-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
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.
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
Webpack5 + type: module = require is not defined #14877
Comments
Do you have a repro repo you can share? |
Sure, I can create it: https://github.com/arty-name/storybook-webpack5-module |
Confirmed the issue with [email protected] |
Confirmed the issue with [email protected] |
I looked into this a bit, and it's a bit weird since the file as checked in to Git actually does use the Not quite sure what the proper solution is for this. One possibility is to maintain two copies of EDIT: Actually it's more complicated than this since the template files also reference |
The |
I can confirm that the workaround does not work for me. |
I've updated the example repo from above and updated the packages to |
@jpzwarte I think the reason that the Let me see if I understand this issue correctly:
I wonder if there is an alternate way to tell WP that the bundle we are create is (to begin with at least) CJS, not ESM, so it doesn't look in We would like to properly sort out this ESM/CJS business in 6.5 so it is possible to actually just use ESM everywhere. |
Good call @benbender -- hopefully we can get a fix that doesn't break CRA this week |
That would be wonderful news as I simply pinned |
For those following along, the fix in the CRA preset is here: storybookjs/presets#229 |
Released as |
@shilman I don't use cra but sveltekit, sorry |
Hi! I ran into this issue and none of the workarounds worked for me so I tried
|
This doesn’t seem to be an issue in 6.5.4 anymore 👍 Thank you for fixing it! |
Still seeing this as an issue in 6.5.15 with |
@arty-name @shilman hey, could you please reopen it since it's still actual with |
Hey folks, in my experience, the developers pay more attention to new issues rather than to ones reopened with additions. Since I haven’t used the |
Also, could you try with SB7 please? This stuff has changed a lot and we are close to release. |
@tmeasday Thank you for checking! My projects seem to run fine with the SB7 prerelease, and I even could remove the workarounds. Well done! |
error message ``` ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' ``` issues - storybookjs/storybook#15335 - storybookjs/storybook#14877
* use webpack5 and type: module * uninstall tsconfig-paths-webpack-plugin * fix webpackFinal: * fix ModuleParseError error message ``` ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' ``` issues - storybookjs/storybook#15335 - storybookjs/storybook#14877 * revert preview.ts
I have solved problem by adding virtual package.json file in const VirtualModulesPlugin = require('webpack-virtual-modules');
const pathPackageJson = path.join(__dirname, '../package.json');
const virtualModules = new VirtualModulesPlugin({
[pathPackageJson]: JSON.stringify({
"name": "someName",
}),
}); and add this plugin to the module.exports = {
webpackFinal: config => {
config.plugins.push(
virtualModules,
);
return config;
}
} It's the workaround for solving problem with type: "module" in our package.json |
@tmeasday Couldn't we change the content of the virtual files to use dynamic imports instead, which are supported in ESM and CommonJS environments? |
@valentinpalkovic, naively yes. I don't see any reason that: storybook/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars Lines 8 to 9 in a172e04
Couldn't be changed to const getProjectAnnotations = async () =>
composeConfigs(await Promise.all([{{#each previewAnnotations}}import('{{this}}'),{{/each}}])); (This is very close to the generated code in Vite, btw:
This issue is closed though. What is the circumstance that cause it to happen again? Very happy to look at it again together if you like. |
Seems like a step forward. |
@shilman Our company's project also happened after the execution of the storybook build page error: require is not defined, my colleagues spent a whole day to study the problem, and now the problem is solved, the difference is that we are using vite, but I searched for the problem when I found the issue, I think it should be a class of problems, the root cause of the problem is not defined, the problem is not defined. The root cause is that .storybook/main.js does not read the complete configuration of vite.config.js, I hope that someone later encountered can be solved in this way, or hope to read the complete vite related configuration. The solution is to manually add the commonjs processing logic like in the image below, which should be a read omission issue? |
Describe the bug
A barebones example with type: module and Webpack5 results in "require is not defined" error in browser:
To Reproduce
git clone [email protected]:arty-name/storybook-webpack5-module.git && yarn install && npx start-storybook
Alternatively these simple steps:
package.json
containing{ "type": "module" }
yarn add react react-dom
yarn add --dev @storybook/react @storybook/builder-webpack5 @storybook/manager-webpack5
.storybook/main.cjs
containingmodule.exports = { core: { builder: 'webpack5' }, stories: ['../test.stories.js'] }
test.stories.js
containing:npx start-storybook
System
The text was updated successfully, but these errors were encountered: