vvanpo
commented
4 years ago A cheap fix would be to just look for main.cjs in addition to main.js. Better might be to register @babel/register within server-require.js and use import().
Closed vvanpo closed 2 years ago
vvanpo
commented
4 years ago A cheap fix would be to just look for main.cjs in addition to main.js. Better might be to register @babel/register within server-require.js and use import().
shilman
commented
4 years ago @ndelangen @igor-dv can you give a hand here?
vvanpo
commented
4 years ago Upon taking a closer look, it appears .cjs+.mjs support was added recently: https://github.com/storybookjs/storybook/commit/6b25bf55c7f95e124e9994718b9cd12348405d59
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.
stale[bot]
commented
3 years ago 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!
ndelangen
commented
3 years ago Assuming the above is true, I'll close this now, if it's still an issue, we can re-open!
MrX8503
commented
3 years ago I'm not able to get this working with CRA.
main.js to main.cjsI get the warning "Unable to find main.js"
shilman
commented
3 years ago reopening cc @yannbf
rue-mishakorablin
commented
3 years ago 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 UnhandledPromiseRejectionWarning rather than an exception.
suared
commented
3 years ago +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.
shilman
commented
3 years ago If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!
stale[bot]
commented
3 years ago 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!
kohloth
commented
3 years ago 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 require() of ES modules is not supported.
I installed storybook as per the npm package page (https://www.npmjs.com/package/@storybook/svelte) using npx -p @storybook/cli sb init.
Node version is 14.15.3
The Storybook install command put this in my package.json
"@storybook/addon-actions": "^6.1.17",
"@storybook/addon-essentials": "^6.1.17",
"@storybook/addon-links": "^6.1.17",
"@storybook/svelte": "^6.1.17",Tried taking "type": "module", out of the package.json, but then the app itself stops working. Not really sure what Storybook wants.
jeremytenjo
commented
3 years ago Issue persists:
I get the warning "Unable to find main.js"
wpatter6
commented
3 years ago I tried the workaround mentioned in this issue of adding an empty object package.json into the .storybook folder for it to be treated as a commonjs type, and now I get stuck building storybook, always at this acorn-jsx/index.js:
Renaming main.js to main.cjs gives the "unable to find main.js" warning but also gets stuck at the same place.
Removing "type": "module" from the root package.json and not including any of the above changes, storybook builds and runs correctly.
jeanfredrik
commented
3 years ago I solved it by adding a package.json file inside the .storybook folder. The file could have any content really, but an empty object gives an error, so I went with this:
{
"type": "commonjs"
}
unknownterritory
commented
3 years ago I don't think the workaround is working anymore.
I'm trying to integrate Storybook in a clean installation of SvelteKit followed by either npx sb init or npx sb@next init.
Tried adding the package.json file into the .storybook folder.
Also tried to change .storybook/main.js and .storybook/preview.js to .cjs extensions.
I would suggest removing the has workaround label.
shilman
commented
3 years ago @yannbf is this one that you've looked at before in another issue?
unknownterritory
commented
3 years ago On the particular configuration I'm working on — SvelteKit + Storybook — it was possible to get Storybook to run by changing the extensions of .storybook/main.js and .storybook/preview.js to .cjs and removing the mention to svelte.config.js in .storybook/main.cjs.
Credit to @Muj on the #svelte channel of the Storybook discord.
unknownterritory
commented
3 years ago However, npm run build-storybook fails to find .storybook/main.js and .storybook/preview.js as they have now different extensions. This will likely affect custom themes and other configurations especially when deploying Storybook in production, at Chromatic or elsewhere.
shilman
commented
3 years ago @unknownterritory mind opening a separate issue about that? feels like a bug in storybook that we need to fix.
unknownterritory
commented
3 years ago My bad: storybook complains about not finding the files with .js extensions but reads the content of the .cjs files nonetheless.
tjlittle
commented
3 years ago I would like to add that it would be really nice to be able to import items from the SvelteKit config - it's a good spot for specifying shared config between SvelteKit and Storybook.
shilman
commented
3 years ago @tjlittle what would that look like?
tjlittle
commented
3 years ago @shilman - I was specifically trying to share aliased folders with webpack in Storybook and SvelteKit. Storybook improves very quickly, so I'm not sure if this is still the case, but about a month ago, TypeScript projects had to change the storybook config files to *.cjs. Because of different module systems I wasn't able to directly import the svelte.config.js file.
I ended up creating a sharedConfig.cjs file and importing that into both Storybook's main.cjs and svelte.config.js.
What would be even better is for both Storybook and Sveltekit to import aliases from tsconfig.json. That conversion is probably out of scope for both though.
:-D
These are all desired conveniences (obviously) so probably not a high priority.
filipesperandio
commented
3 years ago I still facing problems with this as well.
.storybook/main.cjs
const reactRefresh = require("@vitejs/plugin-react-refresh")
module.exports = {
plugins: [
reactRefresh({
exclude: [/node_modules/, "**/stories/*.stories.*"],
include: ["**/*.tsx", "**/*.jsx"],
}),
],
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
core: {
builder: "storybook-builder-vite",
},
}-> changes to Button.tsx are indeed auto-reloaded
-> changes to Button.stories.tsx don't get reflected in Storybook, though, the HMR update gets triggered properly with the above config with those reactRefresh options.
zachbryant
commented
2 years ago I think it should be noted that 6.3.6 comes with a --modern flag that helped me get past this particular issue. I ended up with a .storybook/package.json containing {}, and main.cjs
schindld
commented
2 years ago I was able to get storybook running by adding .storybook/pakcage.json containing
{
"type": "commonjs"
}and changing line 12 of .storybook/main.js from
"preprocess": require("../svelte.config.js").preprocessto
"preprocess": import("../svelte.config.js").preprocess
beebase
commented
2 years ago Wow, what an easy fix!! thanks so much @schindld
I was able to get storybook running by adding
.storybook/pakcage.jsoncontaining{ "type": "commonjs" }and changing line 12 of
.storybook/main.jsfrom"preprocess": require("../svelte.config.js").preprocessto
"preprocess": import("../svelte.config.js").preprocess
song9446
commented
2 years ago I was able to get storybook running by adding
.storybook/pakcage.jsoncontaining{ "type": "commonjs" }and changing line 12 of
.storybook/main.jsfrom"preprocess": require("../svelte.config.js").preprocessto
"preprocess": import("../svelte.config.js").preprocess
@schindld I don't think this is a valid workaround. Dynamic import is an async function so import("../svelte.config.js").preprocess actually means that the preprocess property of the Promise so it is evaluated as undefined.
ndelangen
commented
2 years ago Indeed, "preprocess": import("../svelte.config.js").preprocess doesn't look right to me..
onmax
commented
2 years ago I was able to get storybook running by adding
.storybook/pakcage.jsoncontaining{ "type": "commonjs" }and changing line 12 of
.storybook/main.jsfrom"preprocess": require("../svelte.config.js").preprocessto
"preprocess": import("../svelte.config.js").preprocess
I have applied the solution mentioned but it does not work.
I have added Storybook using npx sb init and after the solution that @schindld wrote I get the following output
Albermonte
commented
2 years ago Hey @onmax, seems like @schindld solution is not enough, you need some extra steps sometimes, you can find them on this article
shilman
commented
2 years ago Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.42 containing PR #17524 that references this issue. Upgrade today to the @next NPM tag to try it out!
npx sb upgrade --prereleaseClosing this issue. Please re-open if you think there's still more to do.
bartenra
commented
2 years ago Still get an error, this time about interpret-require.js.
$ npm run storybook
> frontend@0.0.0 storybook
> start-storybook -p 6006
info @storybook/vue3 v6.5.0-alpha.55
info
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/bart/src/enra_v3/frontend/.storybook/main.js from /home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/bart/src/enra_v3/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR! at interopRequireDefault (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR! at serverRequire (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR! at getPreviewBuilder (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR! at buildDevStandalone (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/build-dev.js:104:71)
ERR! at async buildDev (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5)
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/bart/src/enra_v3/frontend/.storybook/main.js from /home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/bart/src/enra_v3/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR! at interopRequireDefault (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR! at serverRequire (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR! at getPreviewBuilder (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR! at buildDevStandalone (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/build-dev.js:104:71)
ERR! at async buildDev (/home/bart/src/enra_v3/frontend/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5) {
ERR! code: 'ERR_REQUIRE_ESM'
ERR! }
JU12000
commented
2 years ago Just checked and I'm also getting the above error for interpret-require.js on version @storybook/svelte v6.5.0-alpha.57.
Removing type: module is not an option for me as it breaks my svelte app.
Additionally, creating an empty package.json in the .storybook folder won't solve the problem fully because of the require('../svelte.config.js') issue mentioned above.
However, expanding on:
Indeed,
"preprocess": import("../svelte.config.js").preprocessdoesn't look right to me..
adding an empty package.json with "type": "commonjs" and then changing main.js to the following seems to work for me. YMMV:
import('../svelte.config.js').then((module) => { return module.preprocess; })
This successfully resolves the promise returned by the import and allows preprocess to evaluate to something other than undefined.
IanVS
commented
2 years ago @bartenra @JU12000 as far as I know, the main.js file cannot actually be an ESM file, the rest of storybook assumes that the code which runs in node is commonjs. So, can you try renaming your main.js file to main.cjs?
JU12000
commented
2 years ago @IanVS Renaming main.js to main.cjs works but only if you also rename svelte.config.js to svelte.config.cjs. To me this seems like a more cumbersome change because it's editing files outside of the immediate scope of storybook. IMO it would be better to have this working out of the box without the need to enforce that users give their svelte.config a certain file ending as it's impossible to know what else that might conflict with.
EDIT: I just realized that another way to change main.js to main.cjs without needing to rename svelte.config is to change the name of the file as well as changing the require statement to the import statement from my previous comment. That removes the need for the extra package.json in the .storybook folder as well.
gangal86
commented
2 years ago I solved it by adding a package.json file inside the
.storybookfolder. The file could have any content really, but an empty object gives an error, so I went with this:{ "type": "commonjs" }
it works for me, thanks
yannbf
commented
2 years ago 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
CasperSocio
commented
1 year ago I 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.
Rename .storybook/main.js to .storybook/main.cjs
In .storybook/main.cjs replace require with import:
module.exports = {
// ...
svelteOptions: {
preprocess: import('../svelte.config.js').preprocess
},
// ...
}Remember to include the file extension .js.
NexZhu
commented
1 year ago @shilman @yannbf Hi, I'm trying @storybook/vue3-vite@7.0.0-alpha.47
I have "type": "module" in my package.json, .storybook/main.ts and .storybook/preview.ts using ESM import, however storybook dev still fails and the error log shows that the command is still running the CommonJS version of Storybook:
ERR! TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined
ERR! at __node_internal_captureLargerStackTrace (node:internal/errors:484:5)
ERR! at new NodeError (node:internal/errors:393:5)
ERR! at createRequire (node:internal/modules/cjs/loader:1278:11)
ERR! at Function.MarkdownItShiki (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/markdown-it-shiki@0.6.1/node_modules/markdown-it-shiki/dist/index.js:69:40)
ERR! at MarkdownIt.MarkdownIt.use (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/markdown-it@13.0.1/node_modules/markdown-it/lib/index.js:497:10)
ERR! at Object.markdownItSetup (/root/dev/web/vue-component-library-starter/vite.common.ts:62:10)
ERR! at createMarkdown (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/vite-plugin-vue-markdown@0.22.1_vite@3.2.2/node_modules/vite-plugin-vue-markdown/dist/index.js:85:11)
ERR! at VitePluginMarkdown (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/vite-plugin-vue-markdown@0.22.1_vite@3.2.2/node_modules/vite-plugin-vue-markdown/dist/index.js:272:25)
ERR! at Object.<anonymous> (/root/dev/web/vue-component-library-starter/vite.common.ts:57:3)
ERR! at Module._compile (node:internal/modules/cjs/loader:1159:14)
ERR! at Module._compile (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
ERR! at Object.newLoader [as .ts] (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1037:32)
ERR! at Module._load (node:internal/modules/cjs/loader:878:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1061:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at Object.<anonymous> (/root/dev/web/vue-component-library-starter/.storybook/main.ts:3:45)
ERR! at Module._compile (node:internal/modules/cjs/loader:1159:14)
ERR! at Module._compile (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
ERR! at Object.newLoader [as .ts] (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1037:32)
ERR! at Module._load (node:internal/modules/cjs/loader:878:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1061:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at R (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:6:16)
ERR! at b (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:6:204)
ERR! at $r (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:16:3928)
ERR! at buildDevStandalone (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-server/dist/cjs/build-dev.js:92:56)
ERR! at async withTelemetry (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-server/dist/cjs/withTelemetry.js:72:5)
ERR! at async In (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+cli@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/cli/dist/generate.js:277:2113)
ERR! TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined
ERR! at __node_internal_captureLargerStackTrace (node:internal/errors:484:5)
ERR! at new NodeError (node:internal/errors:393:5)
ERR! at createRequire (node:internal/modules/cjs/loader:1278:11)
ERR! at Function.MarkdownItShiki (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/markdown-it-shiki@0.6.1/node_modules/markdown-it-shiki/dist/index.js:69:40)
ERR! at MarkdownIt.MarkdownIt.use (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/markdown-it@13.0.1/node_modules/markdown-it/lib/index.js:497:10)
ERR! at Object.markdownItSetup (/root/dev/web/vue-component-library-starter/vite.common.ts:62:10)
ERR! at createMarkdown (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/vite-plugin-vue-markdown@0.22.1_vite@3.2.2/node_modules/vite-plugin-vue-markdown/dist/index.js:85:11)
ERR! at VitePluginMarkdown (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/vite-plugin-vue-markdown@0.22.1_vite@3.2.2/node_modules/vite-plugin-vue-markdown/dist/index.js:272:25)
ERR! at Object.<anonymous> (/root/dev/web/vue-component-library-starter/vite.common.ts:57:3)
ERR! at Module._compile (node:internal/modules/cjs/loader:1159:14)
ERR! at Module._compile (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
ERR! at Object.newLoader [as .ts] (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1037:32)
ERR! at Module._load (node:internal/modules/cjs/loader:878:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1061:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at Object.<anonymous> (/root/dev/web/vue-component-library-starter/.storybook/main.ts:3:45)
ERR! at Module._compile (node:internal/modules/cjs/loader:1159:14)
ERR! at Module._compile (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
ERR! at Object.newLoader [as .ts] (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/esbuild-register@3.3.3_esbuild@0.14.54/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1037:32)
ERR! at Module._load (node:internal/modules/cjs/loader:878:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1061:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at R (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:6:16)
ERR! at b (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:6:204)
ERR! at $r (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-common@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-common/dist/index.js:16:3928)
ERR! at buildDevStandalone (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-server/dist/cjs/build-dev.js:92:56)
ERR! at async withTelemetry (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-server/dist/cjs/withTelemetry.js:72:5)
ERR! at async In (/root/dev/web/vue-component-library-starter/node_modules/.pnpm/@storybook+cli@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/cli/dist/generate.js:277:2113) {
ERR! code: 'ERR_INVALID_ARG_VALUE'
ERR! }As you can see in the last few lines it's still running the CommonJS version:
node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.47_yalvw3r2waubxycyb7k7qsruca/node_modules/@storybook/core-server/dist/cjs/withTelemetry.js:72:5
What might be wrong? Thanks!
Reproduction: https://github.com/daotl/vue-component-library-starter/tree/feat/storybook7
IanVS
commented
1 year ago @NexZhu what moduleResolution are you using in your TS config?
NexZhu
commented
1 year ago @IanVS It was node, I've just tried classic, nodenext, the same result.
cseas
commented
1 year ago I just got storybook running in a react project with "type": "module" in package.json and "module": "NodeNext" in tsconfig.json. No cjs workarounds required. Here are the changes I made after upgrading to storybook 7.0.0-beta.20.
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;
},
};
laverdet
commented
11 months ago I'm new to Storybook and was stuck on this for a while. The virtual storybook-config-entry.js file uses import, import.meta, and require all in the same file. Wow!
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: https://www.npmjs.com/package/@babel/plugin-transform-modules-commonjs https://www.npmjs.com/package/string-replace-loader
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: