Crash when running on Cloudflare Worker (SSR) due to string evaluation

Hello @kazupon ! I’m trying out vue-i18n with Vitedge, which is doing SSR using Vite. It works well when running in a Node.js server. However, it crashes when running in a Cloudflare Worker environment. I’m not providing a repro link since you would need a Cloudflare account and all of that, but I’m giving more info in the following.

vue & vue-i18n version

ex:

• vue: 3.0.x
• vue-i18n: 9.0.0-beta.8

Steps to reproduce

Use vue-i18n in any Vue app running on a Cloudflare Worker (SSR, different from Node.js environment).

What is Expected?

It should work.

What is actually happening?

It crashes with error Code generation from strings disallowed for this context when the t function is called. This error means that eval and related unsafe calls are not allowed in this environment. After researching for a while, I found that the line that makes it crash is here: https://github.com/intlify/vue-i18n-next/blob/master/src/message/compiler.ts#L73

This new Function('...') is basically a different form of eval, and such a thing is forbidden in a worker environment due to security reasons.

Do you think this could be implemented in a different way without relying on eval? Or any other workaround to support this environment?

Thank you!

[kazupon]

@frandiox @gurumusch

I’ve had been supported vue-i18n for CSP env. you can vue-i18n-next latest version.

To make it work in the CSP environment, you need to import the runtime-only module provided by vue-i18n-next. Also, since it’s runtime only, locale messages must be pre-compiled.

In general vue application, we bundle using the bundler such as webpack to build vue application. In intlify project, for each bundler, we provide the following:

• @intlify/vue-i18n-loader: https://github.com/intlify/vue-i18n-loader
• @intlify/rollup-plugin-vue-i18n: https://github.com/intlify/rollup-plugin-vue-i18n
• @intlify/vite-plugin-vue-i18n: https://github.com/intlify/vite-plugin-vue-i18n

You can precompile and bundle i18n resource / i18n custom blocks by configuring them in your bundler.

for more details, you can refer to the following documentation and examples:

• documentation:
  • about providing modules: https://vue-i18n-next.intlify.dev/installation.html#explanation-of-different-builds
  • runtime only module setting: https://vue-i18n-next.intlify.dev/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only
• examples:
  • for @intlify/vue-i18n-loader: https://github.com/intlify/vue-i18n-loader/tree/next/example
  • for @intlify/rollup-plugin-vue-i18n: https://github.com/intlify/rollup-plugin-vue-i18n/tree/next/examples
  • for @inlify/vite-plugin-vue-i18n: https://github.com/intlify/vite-plugin-vue-i18n/tree/master/examples

[kazupon]

@frandiox Hi! Thank you for your feedback!

I know vitedege & vite-ssr. I think it’s very EXCITING!

A workaround for this problem is that, like Vue’s SSR, vue-i18n need to provide a function like createSSRI18n or renderToString. But unfortunately, it doesn’t look like we’re going to be able to provide it anytime soon.

As for the current development of vue-i18n-next, the implementation is complete. We will be releasing vue-i18n@v9-rc and vue-i18n@v9 with documentation coming soon.

I’m also very interested in edge computing. I have some ideas for an i18n / l10n solution for edge computing. So we’ll continue to work on them. 💪