Build Error When Using Dynamic Imports
See original GitHub issueDescribe 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`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/intl-messageformat/lib/core.js
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
node_modules/intl-messageformat/lib/formatters.js
1: var __extends = (this && this.__extends) || (function () {
^
2: var extendStatics = function (d, b) {
3: extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules/intl-format-cache/lib/index.js
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 Task.run (/path/to/svelte-i18n-dynamic-import-error/node_modules/rollup/dist/shared/watch.js:720:32)
at Watcher.run (/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: https://github.com/ashour/svelte-i18n-dynamic-import-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: https://github.com/rollup/rollup/issues/2072
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:
- Created 3 years ago
- Reactions:2
- Comments:6 (2 by maintainers)
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.
If anyone lands here and wants an interm workaround, I’ve written a tutorial that provides one (among other things): https://phrase.com/blog/posts/a-step-by-step-guide-to-svelte-localization-with-svelte-i18n-v3/