Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Chiusa
  • Qualcosa non va?
#392 6 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
typescript, webpack
Ambito
build-system, localization

Direzione di ricerca

Inizia con l’alias di resolve in vue.config.js e la configurazione di i18n.ts mostrati nel report, usando le versioni indicate di Vue e vue-i18n per riprodurre entrambi i comportamenti. Confronta i percorsi normal ed esm-bundler con le impostazioni locali JSON; il lavoro è completato quando la build del bundler evita l’errore CSP e inizializza le traduzioni senza l’errore del composer.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

status: review needed
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:
https://github.com/intlify/vue-i18n/issues/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.
Lingua principale
TypeScript
Stelle
269
Fork
46
Merge medio
30m
PR unite (30g)
43

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di intlify/bundle-tools

Tutte le issue di intlify/bundle-tools

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.