Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot run webpack 5 version in lit project #18764

Open
ilp64 opened this issue Jul 22, 2022 · 3 comments
Open

Cannot run webpack 5 version in lit project #18764

ilp64 opened this issue Jul 22, 2022 · 3 comments
Labels
bug needs triage

Comments

@ilp64
Copy link

ilp64 commented Jul 22, 2022

Describe the bug
In a new lit project, add storybook webpack 5 version, and npm run storybook get following error.

> @lit/lit-starter-ts@1.0.4 storybook
> start-storybook -p 6006

info @storybook/web-components v6.5.9
info
✔ Port 6006 is not available. Would you like to run Storybook on port 6007 instead? … yes
info => Loading presets
info => Using prebuilt manager
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% done plugins webpack-hot-middlewarewebpack built preview 03b44d7f2834191a4d2c in 6474ms
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import "/Users/ma/WebstormProjects/lit-storybook/node_modules/core-js/modules/es.object.keys.js";
| import "/Users/ma/WebstormProjects/lit-storybook/node_modules/core-js/modules/es.symbol.js";
| import "/Users/ma/WebstormProjects/lit-storybook/node_modules/core-js/modules/es.array.filter.js";
    at handleParseError (/Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/ma/WebstormProjects/lit-storybook/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/ma/WebstormProjects/lit-storybook/node_modules/babel-loader/lib/index.js:59:71

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
99% done plugins webpack-hot-middlewarewebpack built preview 96c2e9794b0864219fb8 in 291ms

To Reproduce

  1. Init lit project from https://github.com/lit/lit-element-starter-ts
  2. Install storybook npx sb@next init --builder webpack5
  3. Add package.json with content {"type": "commonjs"} to .storybook directory
  4. npm run storybook

reproduction repo: https://github.com/ilp64/lit-storybook

System
Environment Info:

System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
Browsers:
Chrome: 103.0.5060.114
Firefox: 97.0.1
Safari: 14.1.1
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/builder-webpack5: ^6.5.9 => 6.5.9
@storybook/manager-webpack5: ^6.5.9 => 6.5.9
@storybook/web-components: ^6.5.9 => 6.5.9
@LucaColonnello
Copy link

Having an initial look at this, and I tried also on a fresh storybook setup.
As soon as as you add "type": "commonjs" to any package.json, that module becomes a commonjs one.

The webpack documentation is clear about this https://webpack.js.org/api/module-methods/

As soon as a module is recognised as a commonjs one, you won't be able to use import / export syntax.
I'm not sure this is actually a bug.

However, we had exactly this same issue in webpack5 happening for randomly to us, and when deleting a folder, it just went away. The folder contained a simple React component importing a node module.

We tried again adding the folder back, same content, it worked soon after.
The error is coming from acorn, not babel in this case.

@sokra is there anything else that triggers the JavascriptParser to think a module is not an esm one, a part from the commonjs type in package.json and having require calls?

In our case it worked perfectly fine with webpack4, same code, and we had no type in our package.json, so this seem completely random and a bug in webpack5.

@brionmario
Copy link

We got the following error in our package which uses @storybook/html.

You may need an additional loader to handle the result of these loaders.
> import "core-js/modules/es.object.keys.js";
| import "core-js/modules/es.symbol.js";
| import "core-js/modules/es.array.filter.js";
    at handleParseError (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js:44:71
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ../../node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import '@storybook/html';
    at handleParseError (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js:44:71

And as @LucaColonnello had mentioned, the package i created with nx had the module: "commonjs" and after removing it, storybook build was working as expected.

Thanks alot @LucaColonnello.

@ValorLin
Copy link

ValorLin commented Dec 6, 2022

We got the following error in our package which uses @storybook/html.

You may need an additional loader to handle the result of these loaders.
> import "core-js/modules/es.object.keys.js";
| import "core-js/modules/es.symbol.js";
| import "core-js/modules/es.array.filter.js";
    at handleParseError (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js:44:71
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ../../node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import '@storybook/html';
    at handleParseError (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/webpack@5.74.0/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/loader-runner@4.3.0/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/brion/Desktop/portal-rearchitecture/oxygen/node_modules/.pnpm/babel-loader@8.3.0_6zc4kxld457avlfyhj3lzsljlm/node_modules/babel-loader/lib/index.js:44:71

And as @LucaColonnello had mentioned, the package i created with nx had the module: "commonjs" and after removing it, storybook build was working as expected.

Thanks alot @LucaColonnello.

You saved my day. Just removed the "module": "commonjs" and it's fixed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@LucaColonnello @ValorLin @ilp64 @brionmario