Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
owlyowl opened this issue Sep 18, 2024 · 5 comments
Labels
Status: Review Needed Request for review comments

Comments

@owlyowl
Copy link

owlyowl commented Sep 18, 2024

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:
image

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)

image

Locales are in json format:
image

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:
image

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.
@owlyowl owlyowl added the Status: Review Needed Request for review comments label Sep 18, 2024
@andruhon
Copy link

andruhon commented Sep 24, 2024

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
Copy link

andruhon commented Sep 25, 2024

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
Copy link

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
Copy link

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
Copy link

LarsEmbloom commented Oct 1, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Review Needed Request for review comments
Projects
None yet
Development

No branches or pull requests

5 participants