Using vue-i18n.runtime.esm-bundler.js in Webpack vue.config.js alias to stop a CSP error causes "Unexpected return type in composer"

[owlyowl]

Reporting a bug?

We spent the day trying to track down a CSP bug:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'"

In looking through previous GitHub issues I've realised we need to reference the esm-bundler in vue.config.js:

Because the non bundler version calls new Function(... which throws a CSP error

Adding the alias in vue.config.js to vue-i18n/dist/vue-i18n.runtime.esm-bundler.js now stops the CSP bug occurring but throws a new error:

main.ts:40 App Error SyntaxError: Unexpected return type in composer (at message-compiler.esm-bundler.js:54:1)
    at createCompileError (message-compiler.esm-bundler.js:54:1)
    at createI18nError (vue-i18n.runtime.esm-bundler.js:100:1)
    at wrapWithDeps (vue-i18n.runtime.esm-bundler.js:545:1)
    at Object.transrateVNode (vue-i18n.runtime.esm-bundler.js:582:1)
    at Proxy.<anonymous> (vue-i18n.runtime.esm-bundler.js:1326:1)
    at renderComponentRoot (runtime-core.esm-bundler.js:914:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:1)
    at instance.update (runtime-core.esm-bundler.js:5763:1)
    at setupRenderEffect (runtime-core.esm-bundler.js:5777:1)

Locales are in json format:

So now we're stuck with, not use the alias, or use it and it breaks.

Expected behavior

JSON translations and i18n esm prod bundler should initialise correctly.

Reproduction

i18n.ts is like so:

Similar to this issue I feel like I'm on the same journey with a no resolution though:
intlify/vue-i18n#381

Issue Package

vue-i18n-loader

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 32.69 GB / 63.71 GB
  Binaries:
    Node: 18.20.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.10.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.2.13 => 3.2.47
    vue-i18n: ^9.2.2 => 9.2.2

Screenshot

No response

Additional context

I had to add:

  resolve: {
            alias: {
                'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
            }
        }

In order to stop the non runtime version creating new Function( and causing the error:

Here is my vue.config.js file:

    configureWebpack: {
        devtool: 'cheap-module-source-map',
        entry: {
            'mr-api': './src/entry.mrApi.ts'
        },
        optimization: {
            splitChunks: false
        },
        module: {
            rules: [{
                test: /\.scss$/,
                use: ['sass-loader', {
                    loader: 'style-resources-loader',
                    options: {
                        patterns: [
                            path.resolve(__dirname, './src/assets/styles/_variables.scss'),
                            path.resolve(__dirname, './src/assets/styles/_mixin.scss')
                        ]
                    }
                }]
            }]
        },
        resolve: {
            alias: {
                'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
            }
        }
    },

Validations

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[andruhon]

I observe similar issue after upgrading @intlify/unplugin-vue-i18n to version 5+.

In my case it seems to be happening when the t is used programmatically in setup, eg

const { t } = useI18n();
const message = t('messages.test');

[andruhon]

It turned out in my case the problem was with other dependencies, I updated Vue and vue-i18n itself and it now seems to work.

[timothymctim]

Identical to @andruhon I experience the same “Unexpected return type in composer” error after upgrading to version 5+. However, upgrading all other dependencies doesn’t resolve this issue in my case. The culprit for me is unplugin-vue-i18n though. Is this related or should I create a new issue?

[Foobartender]

After updating all my dependencies, I also had the same issue as andruhon and timothymctim. Updating vue-i18n to 10.0.3 (note that 9.14.1 is still tagged latest) also didn't fix it at first. I either forgot to restart Vite, or deleting node_modules and pnpm-lock.yaml once more did the trick. Now it works.

[LarsEmbloom]

I'm migrating from Webpack to Vite and spend too much time on this issue but updating to v10.0.3 seems to solve the problem. As mentioned above 9.14.1 is still tagged latest so beware.

[LouisVA]

I updated to vue-18n to v11 and that also fixed this