search

preactjs / wmr

👩‍🚀 The tiny all-in-one development tool for modern web apps.
https://wmr.dev/
MIT License
4.92k stars 109 forks source link

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

Open riywo opened 2 years ago

riywo commented 2 years ago

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:

  1. npm init wmr app
  2. cd app && npm install i18next
  3. Add import i18n from "i18next" to public/index.js
  4. 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/i18next@20.3.3/dist/esm/i18next.js
  npm:plugin  preact-iso -> npm/preact-iso@2.0.3/index.js
  npm:plugin  preact-iso -> npm/preact-iso@2.0.3/index.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  ./router.js -> npm/preact-iso@2.0.3/router.js
  npm:plugin  ./lazy.js -> npm/preact-iso@2.0.3/lazy.js
  npm:plugin  ./hydrate.js -> npm/preact-iso@2.0.3/hydrate.js
  npm:plugin  ./prerender.js -> npm/preact-iso@2.0.3/prerender.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  @babel/runtime/helpers/esm/typeof -> npm/@babel/runtime@7.14.6/helpers/esm/typeof.js
  npm:plugin  @babel/runtime/helpers/esm/classCallCheck -> npm/@babel/runtime@7.14.6/helpers/esm/classCallCheck.js
  npm:plugin  @babel/runtime/helpers/esm/objectSpread -> npm/@babel/runtime@7.14.6/helpers/esm/objectSpread.js
  npm:plugin  @babel/runtime/helpers/esm/assertThisInitialized -> npm/@babel/runtime@7.14.6/helpers/esm/assertThisInitialized.js
  npm:plugin  @babel/runtime/helpers/esm/possibleConstructorReturn -> npm/@babel/runtime@7.14.6/helpers/esm/possibleConstructorReturn.js
  npm:plugin  @babel/runtime/helpers/esm/createClass -> npm/@babel/runtime@7.14.6/helpers/esm/createClass.js
  npm:plugin  @babel/runtime/helpers/esm/getPrototypeOf -> npm/@babel/runtime@7.14.6/helpers/esm/getPrototypeOf.js
  npm:plugin  @babel/runtime/helpers/esm/inherits -> npm/@babel/runtime@7.14.6/helpers/esm/inherits.js

Error: Unexpected token (npm/@babel/runtime@7.14.6/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:

Desktop (please complete the following information):

Additional context N/A

riywo commented 2 years ago

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/preact-iso@2.0.3/index.js
  npm:plugin  preact-iso -> npm/preact-iso@2.0.3/index.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  ./router.js -> npm/preact-iso@2.0.3/router.js
  npm:plugin  ./lazy.js -> npm/preact-iso@2.0.3/lazy.js
  npm:plugin  ./hydrate.js -> npm/preact-iso@2.0.3/hydrate.js
  npm:plugin  ./prerender.js -> npm/preact-iso@2.0.3/prerender.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact-render-to-string -> npm/preact-render-to-string@5.1.19/dist/index.mjs
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  htm -> npm/htm@3.1.0/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 commented 2 years ago

Captured the actual error by development env:

Error: Unexpected token (npm/@babel/runtime@7.14.6/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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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/htm@3.1.0/preact/index.module.js
  npm:plugin  preact-iso -> npm/preact-iso@2.0.3/index.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  i18next -> npm/i18next@20.3.3/dist/esm/i18next.js
  npm:plugin  preact-iso -> npm/preact-iso@2.0.3/index.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  htm/preact -> npm/htm@3.1.0/preact/index.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  htm -> npm/htm@3.1.0/dist/htm.module.js
  npm:plugin  ./lazy.js -> npm/preact-iso@2.0.3/lazy.js
  npm:plugin  ./router.js -> npm/preact-iso@2.0.3/router.js
  npm:plugin  ./hydrate.js -> npm/preact-iso@2.0.3/hydrate.js
  npm:plugin  ./prerender.js -> npm/preact-iso@2.0.3/prerender.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  preact/hooks -> npm/preact@10.5.14/hooks/dist/hooks.module.js
  npm:plugin  preact -> npm/preact@10.5.14/dist/preact.module.js
  npm:plugin  @babel/runtime/helpers/esm/typeof -> npm/@babel/runtime@7.14.6/helpers/esm/typeof.js
  npm:plugin  @babel/runtime/helpers/esm/createClass -> npm/@babel/runtime@7.14.6/helpers/esm/createClass.js
  npm:plugin  @babel/runtime/helpers/esm/classCallCheck -> npm/@babel/runtime@7.14.6/helpers/esm/classCallCheck.js
  npm:plugin  @babel/runtime/helpers/esm/getPrototypeOf -> npm/@babel/runtime@7.14.6/helpers/esm/getPrototypeOf.js
  npm:plugin  @babel/runtime/helpers/esm/inherits -> npm/@babel/runtime@7.14.6/helpers/esm/inherits.js
  npm:plugin  @babel/runtime/helpers/esm/possibleConstructorReturn -> npm/@babel/runtime@7.14.6/helpers/esm/possibleConstructorReturn.js
  npm:plugin  @babel/runtime/helpers/esm/objectSpread -> npm/@babel/runtime@7.14.6/helpers/esm/objectSpread.js
  npm:plugin  @babel/runtime/helpers/esm/assertThisInitialized -> npm/@babel/runtime@7.14.6/helpers/esm/assertThisInitialized.js
  npm:plugin  @babel/runtime/helpers/typeof -> npm/@babel/runtime@7.14.6/helpers/esm/typeof.js
  npm:plugin  preact-render-to-string -> npm/preact-render-to-string@5.1.19/dist/index.mjs
  npm:plugin  ./assertThisInitialized.js -> npm/@babel/runtime@7.14.6/helpers/esm/assertThisInitialized.js
  npm:plugin  ./setPrototypeOf.js -> npm/@babel/runtime@7.14.6/helpers/esm/setPrototypeOf.js
  npm:plugin  ./defineProperty.js -> npm/@babel/runtime@7.14.6/helpers/esm/defineProperty.js
  npm:plugin  preact -> npm/preact@10.5.14/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 commented 2 years ago

Awesome debugging @riywo!!

riywo commented 2 years ago

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

Pringels commented 2 years ago

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 commented 2 years ago

Reopening, per the above comment.