Using vue-i18n.runtime.esm-bundler.js in Webpack vue.config.js alias to stop a CSP error causes "Unexpected return type in composer"
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 25/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- typescript, webpack
調査の方向性
レポートに示されている vue.config.js の resolve エイリアスと i18n.ts のセットアップから始め、記載されている Vue と vue-i18n のバージョンを使って両方の挙動を再現します。normal と esm-bundler のパスを JSON ロケールと比較します。bundler のビルドで CSP エラーが回避され、composer エラーなしで翻訳が初期化されれば作業は完了です。
索引モデルが issue の本文から書いたものです。
説明
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:
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.
- 主要言語
- TypeScript
- スター
- 270
- フォーク
- 46
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
intlify/bundle-tools のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
intlify/bundle-tools#612 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 72/100
intlify/bundle-tools#611 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 52/100
intlify/bundle-tools#600 · コメント 5 件 ·
-
Locale files are never invalidated on Vite 8 — dev server serves stale translations until restartオープン
難易度 4/5 3〜5日 初心者へのやさしさ 68/100
intlify/bundle-tools#599 · コメント 1 件 · リアクション 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
intlify/bundle-tools#533 ·
intlify/bundle-tools の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
callstackincubator/rozenite#518 ·
メンテナーはふだん 1 日以内に返信
-
Area/Workflow Priority/Blocker Type/Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
wso2/product-integrator#2622 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
area:bash bug has repro platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
anthropics/claude-code#98644 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
allure-framework/allure-js#1603 ·
メンテナーはふだん 1 日以内に返信