Bug: SyntaxError: Unexpected token 'export'

[ricardopacheco]

Description

I'm migrating an application to use vike (with SSR option). I don't use anything special, which is in the official i18n-js documentation. In other projects, I have never come across this error.

How to reproduce

Just create a new vike app using official documentation and create a new component importing i18n-js.

What do you expect

Just works normally (I use the dependency in other projects following the doc and everything works perfectly (nextjs and react-create-app)

What happened instead

import { I18n } from "i18n-js"

Syntax Error

Software:

• Gem version: None
• Ruby version: None
• NodeJS version: 20.10.0
• React: 18.2.0
• vike: "^0.4.150"
• vite: "^4.5.1"
• i18n-js: "^4.3.2",

Full backtrace

/home/deploy/projects/experiments/vike-app/node_modules/i18n-js/dist/import/index.js:1
export { I18n } from "./I18n";
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:345:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at nodeImport (file:///home/deploy/projects/experiments/vike-app/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56097:17)
    at ssrImport (file:///home/deploy/projects/experiments/vike-app/node_modules/vite/dist/node/chunks/dep-68d1a114.js:55990:24)
    at eval (/home/deploy/projects/experiments/vike-app/src/components/locales/index.js:3:44)
    at instantiateModule (file:///home/deploy/projects/experiments/vike-app/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56052:9)

[fnando]

This is likely due to your vike project setup, not i18n-js. Can you please upload a sample project that raises this error?

[ricardopacheco]

@fnando Of course, it's a pleasure to do so. Here is the repository link: https://github.com/ricardopacheco/vike-18njs-debug

Use nodejs version 20.10.0 (I use Ubuntu 23.10 WSL2 Windows 11 with standard installation using asdf-nodejs);

Observation

Vike uses vitejs and node itself (SSR). I suspect it's the issue of the server with SSR, since I use vitejs in this same version in other SPA projects and i18n-js works perfectly. And coincidentally, I'm using the same version of nodejs (20.10.0) in these other SPA projects. So I believe it's either a configuration bug (some configuration is missing or I need to add something). would it be the path in nodejs?

[ricardopacheco]

@fnando Good News! I managed to fix the problem (running perfectly on both client and server). From what I understand... the server running nodejs doesn't understand ES6+ syntax and that's why it didn't work. That's right? I don't know that part well. https://github.com/ricardopacheco/vike-18njs-debug/pull/1/files

[fnando]

Afaict, node.js can only use import/export statements if you're files have the extension .mjs. Otherwise, you'd need to do some compiling into something that the regular VM can understand.

https://nodejs.org/api/esm.html