Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Build Error When Using Dynamic Imports

See original GitHub issue

Describe the bug When using dynamic imports to aysnchronously load message dictionary JSON files, a compilation error is thrown. This occurs with both npm run dev and npm run build.

 > svelte-app@1.0.0 dev /path/to/svelte-i18n-dynamic-import-error
> rollup -c -w

(node:9166) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
rollup v2.18.1
bundles src/main.js → public/build/bundle.js...
(!) `this` has been rewritten to `undefined`
4: See the accompanying LICENSE file for terms.
5: */
6: var __assign = (this && this.__assign) || function () {
7:     __assign = Object.assign || function(t) {
8:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
1: var __extends = (this && this.__extends) || (function () {
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
4: See the accompanying LICENSE file for terms.
5: */
6: var __spreadArrays = (this && this.__spreadArrays) || function () {
7:     for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
8:     for (var r = Array(s), k = 0, i = 0; i < il; i++)
...and 1 other occurrence

...and 3 other files
[!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
Error: UMD and IIFE output formats are not supported for code-splitting builds.
    at error (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/rollup.js:5154:30)
    at validateOptionsForMultiChunkOutput (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/rollup.js:12123:16)
    at Bundle$1.generate (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/rollup.js:11967:17)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at handleGenerateWrite (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/rollup.js:19347:23)
    at async Promise.all (index 0)
    at (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/watch.js:720:32)
    at (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/watch.js:640:17)

To Reproduce Here is a minimal repo the reproduces the error:

Expected behavior The Svelte app runs and renders in the browser on npm run dev.

Information about your project:

  • Your operating system: OSX 10.15.5

  • svelte-i18n version 3.0.4

  • Using Rollup

Additional context The problem seems to be coming from Rollup, and to be related to this:

Note Btw you need to install the Rollup JSON plugin and configure it before you can import JSON files, dynamically or not (perhaps this should be a separate issue; feel free to break it out).

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

AhmadMayocommented, Jul 28, 2020

I got it working. You’ll need to: 1- change output.format to ‘es’ 2- change output.file to output.dir (e.g. ‘public/build’) 3- change the <script> tag in index.html to point to the new entry point /build/main.js, and use type=“module”

It worked like a charm.

ashourcommented, Jul 10, 2020

If anyone lands here and wants an interm workaround, I’ve written a tutorial that provides one (among other things):

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error: Cannot find module with dynamic import #6680 - GitHub
Webpack performs a static analyse at build time. It doesn't try to infer variables which that import(test) could be anything, hence the failure....
Read more >
Uncaught Error: Cannot Find Module When Using Dynamic ...
I'm using Create-React-App and am looking to use the dynamic import() supported by webpack 2.0 to import a module based on a variable...
Read more >
Dynamic Import, Code Splitting, Lazy Loading, and Error ...
You will encounter the error: “Cannot find module with dynamic import.” This error comes from Webpack, which is used by Create React App....
Read more >
Dynamic imports are only supported when the 'module' flag is ...
To solve the error "Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'esnext' or 'commonjs'", set the module...
Read more >
How to Bypass ES Modules Errors in Next.js with Dynamic ...
The error in the image below shows that we can't use the CommonJS approach to import a module. serialize-1. This new standard and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found