intlify / intlify/bundle-tools

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

Open
#392 6 comments 0 reactions 0 assignees View on GitHub
status: review needed
Dominant language
TypeScript
Stars
270
Forks
46
PR merge metrics
No merged PRs in 30d

Description

### 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](https://github.com/user-attachments/assets/c2a437cf-48e3-49b8-b5a6-f4a55ccceb42)

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. (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](https://github.com/user-attachments/assets/1b5ab8cb-e814-45b6-bee9-ba668657156a)

Locales are in json format:
![image](https://github.com/user-attachments/assets/e686d473-83ec-4eca-aca8-cb28923a7500)

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](https://github.com/user-attachments/assets/286566e6-290a-4a1b-ba15-9c5709a1f0ab)

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

```shell
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

- [X] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/.github/contributing.md).
- [X] Read the README
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/bundle-tools/discussions).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.