Storybook cannot be built on packages using "type": "module" #11587
Comments
|
A cheap fix would be to just look for |
vvanpo
changed the title
|
@ndelangen @igor-dv can you give a hand here? |
|
Upon taking a closer look, it appears So I'll just have to wait until v6 is released. Still, it would be nice if we could figure out a solution that doesn't require renaming the file. |
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
Assuming the above is true, I'll close this now, if it's still an issue, we can re-open! |
|
I'm not able to get this working with CRA.
I get the warning "Unable to find main.js" |
|
reopening cc @yannbf |
|
The interesting aspect of this failure is that the exit code is still 0, so this doesn't get caught as a failure in some CI environments like GitHub Actions. I think this is because the error happens in a promise, so this triggers |
|
+1 on this. What I heard about Storybook sounded interesting but trying to go through the quick start with a super basic example fails. Used the demo from lit-eleent to start with: https://github.com/Polymer/lit-element to get a basic structure in place. Then started following the install instructions from storybook. Fails with the subject error here. moving from .js to .cjs does not solve the issue. Added as watcher to investigate storybook when ready to work with modules. |
|
If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize! |
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
Am experiencing this too. Just got a basic SvelteJS set up and fancied running storybook along with it. Error in the terminal is: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /computer/projectPath/etc/.storybook/main.js I installed storybook as per the npm package page (https://www.npmjs.com/package/@storybook/svelte) using Node version is 14.15.3 The Storybook install command put this in my package.json Tried taking |
|
Issue persists:
I get the warning "Unable to find main.js" |
|
I tried the workaround mentioned in this issue of adding an empty object package.json into the Renaming main.js to main.cjs gives the "unable to find main.js" warning but also gets stuck at the same place. Removing |
|
I solved it by adding a package.json file inside the {
"type": "commonjs"
} |
|
I don't think the workaround is working anymore. |
|
@yannbf is this one that you've looked at before in another issue? |
|
On the particular configuration I'm working on — SvelteKit + Storybook — it was possible to get Storybook to run by changing the extensions of Credit to @muj on the #svelte channel of the Storybook discord. |
|
@IanVS Renaming EDIT: I just realized that another way to change |
) * build: move bundler to vite * chore: remove unused rollup deps after moving to vite * refactor: use treeshakeable lodash import * build(vite): add esm and cjs outputs * feat: update target to es6 for better compat * fix(storybook): add empty package.json so it can run with main.js since root package.json is now type: module, .js files are now treated as ESM files... which storybook does not support. See storybookjs/storybook#11587 (comment)
…so it can use cjs while we use esm idea from storybookjs/storybook#11587 (comment)
it works for me, thanks |
|
FYI this issue was not really solved in v6.5.0-alpha.42, but it was fixed in v7.0.0-alpha.11 from this PR: #18619 This means that in Storybook 7 you can use ESM for your main.js files out of the box. |
Solution SummaryI was struggling with this issue for a while and there's a ton of information here, so I'll just summarise what worked for a Storybook 6 Svelte Vite setup in September 2022. Step 1Rename Step 2In module.exports = {
// ...
svelteOptions: {
preprocess: import('../svelte.config.js').preprocess
},
// ...
}Remember to include the file extension |
|
@shilman @yannbf Hi, I'm trying As you can see in the last few lines it's still running the CommonJS version: What might be wrong? Thanks! Reproduction: https://github.com/daotl/vue-component-library-starter/tree/feat/storybook7 |
|
@NexZhu what |
|
@IanVS It was |
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
ESM-only SolutionI just got storybook running in a react project with Override the webpack config of Storybook like this: // .storybook/main.js
export default {
// ...
webpackFinal: async (config) => {
const customConfig = { ...config };
// use ts-loader to process typescript files
customConfig.module.rules.push({
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
});
// Configure webpack to allow using .js extension for typescript file imports.
// You only need this if you're adding .js to relative imports in your project.
// Refer: https://github.com/microsoft/TypeScript/issues/42813#issuecomment-942633095
customConfig.resolve.extensionAlias = {
".js": [".tsx", ".ts", ".js"],
};
return customConfig;
},
}; |
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
Specifically: * Remove UMD module support. Per caniuse.com, all browsers that support WebAssembly also support ES6, save Firefox < 54, which is now over 5 years old. * Add `files` to the package config and ensure that all files in `dist` and `wasm_dist` are included in the package. Note that Storybook expects CommonJS format, and adding `type: module` to `package.json` causes it to break. This will be fixed in Storybook v7, but until then, we implement the workaround described here: storybookjs/storybook#11587 (comment)
|
I'm new to Storybook and was stuck on this for a while. The virtual storybook-config-entry.js file uses I worked around it with this horrific rule in my Webpack loader chain. {
test: /storybook-config-entry/,
type: "javascript/dynamic",
rules: [ {
loader: "babel-loader",
options: {
babelrc: false,
configFile: false,
plugins: [ "@babel/plugin-transform-modules-commonjs" ],
}
}, {
loader: "string-replace-loader",
options: {
search: "import.meta.webpackHot",
replace: "module.webpackHot",
flags: "g",
},
} ],
}Install loaders & plugins from npm: |
and others
Describe the bug
For projects configured to use native ES modules in node.js via the
"type": "module"configuration inpackage.json(https://nodejs.org/api/esm.html#esm_package_json_type_field), Storybook cannotrequire()themain.jsconfiguration file, becausenodedoes not supportrequire()for this package type. We also cannot rename it tomain.cjsto allow the use ofrequire(), because Storybook does not recognize that file.To Reproduce
In any project using Storybook, add
"type": "module"to yourpackage.jsonand observe broken builds (even after converting all your commonjs to esm).Expected behavior
Storybook should provide some mechanism for allowing configuration in packages that use the
moduletype.System:
The text was updated successfully, but these errors were encountered: