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.