Build Error When Using Dynamic Imports

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`
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).

[AhmadMayo]

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.

[ashour]

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/