`Unexpected token` when `wmr build` with importing `i18next` #769

riywo · 2021-07-16T06:29:54Z

Describe the bug
When I import i18next, wmr start (development) has no issue and works expectedly. However, wmr build fails with a weird error below. There is no clue from the debug output.

To Reproduce
Steps to reproduce the behavior:

npm init wmr app
cd app && npm install i18next
Add import i18n from "i18next" to public/index.js
npm run build

> wmr build --prerender --debug

  wmr:config  {
  wmr:config    _: [],
  wmr:config    prerender: true,
  wmr:config    debug: true,
  wmr:config    cwd: '/Users/riywo/work/wmr-i18next',
  wmr:config    public: 'public',
  wmr:config    out: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    sourcemap: undefined,
  wmr:config    visualize: undefined,
  wmr:config    minify: true,
  wmr:config    root: '/Users/riywo/work/wmr-i18next/public',
  wmr:config    plugins: [],
  wmr:config    output: [],
  wmr:config    middleware: [],
  wmr:config    features: { preact: true },
  wmr:config    alias: { react: 'preact/compat', 'react-dom': 'preact/compat' },
  wmr:config    customRoutes: [],
  wmr:config    prod: true,
  wmr:config    mode: 'build',
  wmr:config    env: {},
  wmr:config    overlayDir: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    publicPath: '/',
  wmr:config    host: 'localhost'
  wmr:config  }
  npm:plugin  i18next -> npm/[email protected]/dist/esm/i18next.js
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  ./router.js -> npm/[email protected]/router.js
  npm:plugin  ./lazy.js -> npm/[email protected]/lazy.js
  npm:plugin  ./hydrate.js -> npm/[email protected]/hydrate.js
  npm:plugin  ./prerender.js -> npm/[email protected]/prerender.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  @babel/runtime/helpers/esm/typeof -> npm/@babel/[email protected]/helpers/esm/typeof.js
  npm:plugin  @babel/runtime/helpers/esm/classCallCheck -> npm/@babel/[email protected]/helpers/esm/classCallCheck.js
  npm:plugin  @babel/runtime/helpers/esm/objectSpread -> npm/@babel/[email protected]/helpers/esm/objectSpread.js
  npm:plugin  @babel/runtime/helpers/esm/assertThisInitialized -> npm/@babel/[email protected]/helpers/esm/assertThisInitialized.js
  npm:plugin  @babel/runtime/helpers/esm/possibleConstructorReturn -> npm/@babel/[email protected]/helpers/esm/possibleConstructorReturn.js
  npm:plugin  @babel/runtime/helpers/esm/createClass -> npm/@babel/[email protected]/helpers/esm/createClass.js
  npm:plugin  @babel/runtime/helpers/esm/getPrototypeOf -> npm/@babel/[email protected]/helpers/esm/getPrototypeOf.js
  npm:plugin  @babel/runtime/helpers/esm/inherits -> npm/@babel/[email protected]/helpers/esm/inherits.js

Error: Unexpected token (npm/@babel/[email protected]/helpers/esm/possibleConstructorReturn.js:2:8)

    at rb (/Users/riywo/work/wmr-i18next/node_modules/wmr/wmr.cjs:2:960318)
    at Object.transform (/Users/riywo/work/wmr-i18next/node_modules/wmr/wmr.cjs:2:2532029)
    at /Users/riywo/work/wmr-i18next/node_modules/wmr/wmr.cjs:2:337452

Expected behavior
No build failure since wmr start has no issue and application is running.

Bug occurs with:

wmr or wmr start (development)
wmr build (production)
wmr serve

Desktop (please complete the following information):

OS: [macOS 11.4]
Browser: [Chrome]
Node Version: [16.4.1]
WMR Version: [3.4.0]

Additional context
N/A

The text was updated successfully, but these errors were encountered:

riywo · 2021-07-16T06:34:14Z

Without import i18n from "i18next", wmr build won't load any babel plugins:

> wmr build --prerender --debug

  wmr:config  {
  wmr:config    _: [],
  wmr:config    prerender: true,
  wmr:config    debug: true,
  wmr:config    cwd: '/Users/riywo/work/wmr-i18next',
  wmr:config    public: 'public',
  wmr:config    out: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    sourcemap: undefined,
  wmr:config    visualize: undefined,
  wmr:config    minify: true,
  wmr:config    root: '/Users/riywo/work/wmr-i18next/public',
  wmr:config    plugins: [],
  wmr:config    output: [],
  wmr:config    middleware: [],
  wmr:config    features: { preact: true },
  wmr:config    alias: { react: 'preact/compat', 'react-dom': 'preact/compat' },
  wmr:config    customRoutes: [],
  wmr:config    prod: true,
  wmr:config    mode: 'build',
  wmr:config    env: {},
  wmr:config    overlayDir: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    publicPath: '/',
  wmr:config    host: 'localhost'
  wmr:config  }
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  ./router.js -> npm/[email protected]/router.js
  npm:plugin  ./lazy.js -> npm/[email protected]/lazy.js
  npm:plugin  ./hydrate.js -> npm/[email protected]/hydrate.js
  npm:plugin  ./prerender.js -> npm/[email protected]/prerender.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact-render-to-string -> npm/[email protected]/dist/index.mjs
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  htm -> npm/[email protected]/dist/htm.module.js
minify(index.e7dc04ec.js) took 793ms
minify(chunks/prerender.5e4dbeff.js) took 170ms
Merging assets/style.module.83820528.css into assets/style.module.7b16dcc3.css (chunks/index.85d8c93a.js → index.e7dc04ec.js)
Hoisting CSS "assets/style.module.7b16dcc3.css" imported by index.e7dc04ec.js into parent HTML import "assets/style.e6ee4bcf.css".

Wrote 23Kb to disk:
  dist/index.html 460b
  dist/index.e7dc04ec.js 17Kb
  dist/assets/style.e6ee4bcf.css 499b
  dist/chunks/index.85d8c93a.js 214b
  dist/chunks/prerender.5e4dbeff.js 4.8Kb
Prerendered 3 pages:
  /
  /about [from /]
  /error [from /]

riywo · 2021-07-16T07:28:22Z

Captured the actual error by development env:

Error: Unexpected token (npm/@babel/[email protected]/helpers/esm/possibleConstructorReturn.js:2:8)

    at transform (file:///Users/riywo/GitHub/wmr/packages/wmr/src/lib/acorn-traverse.js:1264:23)
    at Object.transform (file:///Users/riywo/GitHub/wmr/packages/wmr/src/plugins/import-assertion.js:31:16)
    at file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:18755:25

Exception:

SyntaxError: Unexpected token (2:7)
    at Object.pp$4.raise (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:15543:13)
    at Object.pp.unexpected (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13235:8)
    at Object.pp.expect (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13229:26)
    at Object.pp$1.parseImportSpecifiers (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:14135:8)
    at Object.parseImport (file:///Users/riywo/GitHub/wmr/node_modules/acorn-import-assertions/lib/index.mjs:77:32)
    at Object.pp$1.parseStatement (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13409:47)
    at Object.pp$1.parseTopLevel (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13292:21)
    at Object.parse (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13094:15)
    at Function.parse (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:13115:35)
    at Graph.contextParse (file:///Users/riywo/GitHub/wmr/node_modules/rollup/dist/es/shared/rollup.js:19192:38) {pos: 60, loc: Position, raisedAt: 66, stack: 'SyntaxError: Unexpected token (2:7)
    at Ob…les/rollup/dist/es/shared/rollup.js:19192:38)', message: 'Unexpected token (2:7)'}

Code is here:

'import _typeof from "@babel/runtime/helpers/typeof";
import assertThisInitialized from "./assertThisInitialized.js";
export default function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  }

  return assertThisInitialized(self);
}'

riywo · 2021-07-16T08:22:00Z

It seems assert after import is treated as special keyword. Once I replace assertThisInitialized to the other word, parse() succeeds:

> parse(code)
Uncaught SyntaxError: Unexpected token (2:7)

> parse(code.replaceAll("assertThisInitialized", "foo"))
Node {type: 'Program', start: 0, end: 265, body: Array(3), sourceType: 'module'}

riywo · 2021-07-16T08:29:10Z

Minimal repro:

const acorn = require("acorn");
const {importAssertions} = require('acorn-import-assertions');
const fs = require('fs');
const code = fs.readFileSync("/Users/riywo/GitHub/wmr/examples/demo/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js", "utf8");

console.log(code)
console.log(acorn.parse(code, {sourceType: "module"})) // No issue
console.log(acorn.Parser.extend(importAssertions).parse(code, {sourceType: "module"})) // Unexpected token

riywo · 2021-07-16T09:57:30Z

With the fix above, wmr build succeeded:

> build
> /Users/riywo/GitHub/wmr/packages/wmr/wmr.cjs build --prerender --debug

  wmr:config  {
  wmr:config    _: [],
  wmr:config    prerender: true,
  wmr:config    debug: true,
  wmr:config    cwd: '/Users/riywo/work/wmr-i18next',
  wmr:config    public: 'public',
  wmr:config    out: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    sourcemap: undefined,
  wmr:config    visualize: undefined,
  wmr:config    minify: true,
  wmr:config    root: '/Users/riywo/work/wmr-i18next/public',
  wmr:config    plugins: [],
  wmr:config    output: [],
  wmr:config    middleware: [],
  wmr:config    features: { preact: true },
  wmr:config    alias: { react: 'preact/compat', 'react-dom': 'preact/compat' },
  wmr:config    customRoutes: [],
  wmr:config    prod: true,
  wmr:config    mode: 'build',
  wmr:config    env: {},
  wmr:config    overlayDir: '/Users/riywo/work/wmr-i18next/dist',
  wmr:config    publicPath: '/',
  wmr:config    host: 'localhost'
  wmr:config  }
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  i18next -> npm/[email protected]/dist/esm/i18next.js
  npm:plugin  preact-iso -> npm/[email protected]/index.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  htm/preact -> npm/[email protected]/preact/index.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  htm -> npm/[email protected]/dist/htm.module.js
  npm:plugin  ./lazy.js -> npm/[email protected]/lazy.js
  npm:plugin  ./router.js -> npm/[email protected]/router.js
  npm:plugin  ./hydrate.js -> npm/[email protected]/hydrate.js
  npm:plugin  ./prerender.js -> npm/[email protected]/prerender.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/[email protected]/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
  npm:plugin  @babel/runtime/helpers/esm/typeof -> npm/@babel/[email protected]/helpers/esm/typeof.js
  npm:plugin  @babel/runtime/helpers/esm/createClass -> npm/@babel/[email protected]/helpers/esm/createClass.js
  npm:plugin  @babel/runtime/helpers/esm/classCallCheck -> npm/@babel/[email protected]/helpers/esm/classCallCheck.js
  npm:plugin  @babel/runtime/helpers/esm/getPrototypeOf -> npm/@babel/[email protected]/helpers/esm/getPrototypeOf.js
  npm:plugin  @babel/runtime/helpers/esm/inherits -> npm/@babel/[email protected]/helpers/esm/inherits.js
  npm:plugin  @babel/runtime/helpers/esm/possibleConstructorReturn -> npm/@babel/[email protected]/helpers/esm/possibleConstructorReturn.js
  npm:plugin  @babel/runtime/helpers/esm/objectSpread -> npm/@babel/[email protected]/helpers/esm/objectSpread.js
  npm:plugin  @babel/runtime/helpers/esm/assertThisInitialized -> npm/@babel/[email protected]/helpers/esm/assertThisInitialized.js
  npm:plugin  @babel/runtime/helpers/typeof -> npm/@babel/[email protected]/helpers/esm/typeof.js
  npm:plugin  preact-render-to-string -> npm/[email protected]/dist/index.mjs
  npm:plugin  ./assertThisInitialized.js -> npm/@babel/[email protected]/helpers/esm/assertThisInitialized.js
  npm:plugin  ./setPrototypeOf.js -> npm/@babel/[email protected]/helpers/esm/setPrototypeOf.js
  npm:plugin  ./defineProperty.js -> npm/@babel/[email protected]/helpers/esm/defineProperty.js
  npm:plugin  preact -> npm/[email protected]/dist/preact.module.js
minify(index.02d249b0.js) took 1261ms
minify(chunks/prerender.ef1cb74a.js) took 127ms
Merging assets/style.module.83820528.css into assets/style.module.7b16dcc3.css (chunks/index.5fc2dbd8.js → index.02d249b0.js)
Hoisting CSS "assets/style.module.7b16dcc3.css" imported by index.02d249b0.js into parent HTML import "assets/style.e6ee4bcf.css".

Wrote 66Kb to disk:
  dist/index.html 460b
  dist/index.02d249b0.js 60Kb
  dist/assets/style.e6ee4bcf.css 499b
  dist/chunks/index.5fc2dbd8.js 214b
  dist/chunks/prerender.ef1cb74a.js 4.8Kb
Prerendered 3 pages:
  /
  /about [from /]
  /error [from /]

developit · 2021-07-16T17:58:52Z

Awesome debugging @riywo!!

riywo · 2021-07-16T20:23:36Z

Just FYI: wmr 3.4.1 fixed this issue. Thank you for the quick release!

Pringels · 2021-09-10T13:13:01Z

It looks like the yup form validation library has the same issue:
https://github.com/jquense/yup/blob/master/src/schema.ts#L313

if I rename the .assert to anything else the build succeeds.

marvinhagemeister · 2021-09-10T14:41:34Z

Reopening, per the above comment.

riywo added the bug Something isn't working label Jul 16, 2021

riywo mentioned this issue Jul 16, 2021

Fix bug when imported name contains assert xtuc/acorn-import-attributes#8

Merged

marvinhagemeister mentioned this issue Jul 16, 2021

Fix ImportSpecifier's wrongly detected as assert keyword #770

Merged

marvinhagemeister closed this as completed in #770 Jul 16, 2021

AbelVM mentioned this issue Aug 19, 2021

v3.5.0 fails building WorkBox v6.2.4 #795

Open

3 tasks

marvinhagemeister reopened this Sep 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Unexpected token` when `wmr build` with importing `i18next` #769

`Unexpected token` when `wmr build` with importing `i18next` #769

riywo commented Jul 16, 2021 •

edited

Loading

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021 •

edited

Loading

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021

developit commented Jul 16, 2021

riywo commented Jul 16, 2021

Pringels commented Sep 10, 2021

marvinhagemeister commented Sep 10, 2021

Unexpected token when wmr build with importing i18next #769

Unexpected token when wmr build with importing i18next #769

Comments

riywo commented Jul 16, 2021 • edited Loading

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021 • edited Loading

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021

riywo commented Jul 16, 2021

developit commented Jul 16, 2021

riywo commented Jul 16, 2021

Pringels commented Sep 10, 2021

marvinhagemeister commented Sep 10, 2021

`Unexpected token` when `wmr build` with importing `i18next` #769

`Unexpected token` when `wmr build` with importing `i18next` #769

riywo commented Jul 16, 2021 •

edited

Loading

riywo commented Jul 16, 2021 •

edited

Loading