Storybook: Support ESModule

[gsklee]

I tried changing .storybook/main.js to .storybook/main.mjs and its content to:

export const stories = ['../src/**/*.stories.js'];
export const addons = [
  '@storybook/preset-create-react-app',
  '@storybook/addon-actions',
  '@storybook/addon-links',
];

This does not seem to work or is something supported as a $ yarn storybook command would bring up a broken Storybook interface.

Node version is v13.6.0.

[shilman]

cc @igor-dv @ndelangen

[igor-dv]

Main.js runs during the bootstrap of Storybook it's not something that is bundled with webpack. So if you want to use mjs, you need your node to understand ESM

[gsklee]

@igor-dv as indicated I am using Node v13.6.0 which has out-of-box support for ESM. I already have a bunch of other Node CLI scripts in ESM format and they are all working.

[gsklee]

Keep in mind for ESM, name of the script will end in .mjs. I am wondering if somewhere in the codebase we are making assumptions about file name extensions which could be the source of the issue.

[gsklee]

Tried this and didn't work as well:

export const stories = ["../src/**/*.stories.js"];
export default { stories };

So in both cases (this and the original comment) instead of going to http://localhost:9009/?path=/story/welcome--to-storybook, I ended up with http://localhost:9009/?path=/story/* in an apparently stuck state.

[gsklee]

@shilman @igor-dv my guess is adding .mjs into this array here will solve the problem:
https://github.com/storybookjs/storybook/blob/5b11df0638c68341ecb936530e24ea30df17e7bf/lib/core/src/server/utils/interpret-files.js

[shilman]

@gsklee that sounds reasonable. Any chance you can get a dev setup on your local machine, test it out, and provide a PR if it works?

[igor-dv]

@gsklee, sorry, missed your node version.
adding the .mjs to the boost array probably won't work, this array just contains the most used extensions at first place. we use interpret in order to define how to import files with what extensions, and as far as I understand they don't have .mjs https://github.com/gulpjs/interpret/issues/65.

you can probably add .mjs to the /interpret-files.js as a workaround, but the loading is happening here -https://github.com/storybookjs/storybook/blob/5b11df0638c68341ecb936530e24ea30df17e7bf/lib/core/src/server/utils/server-require.js#L81, I am not sure what node will do while using require for mjs though.. this is something that should be checked 🤔

[stale[bot]]

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!

[shilman]

cc @yannbf

[yannbf]

Hey @gsklee, what @igor-dv said is correct. The boost array only holds the extension names, but interpret has loaders related to every extension, which would be required in order to load .mjs files. I have tried a workaround and it works, which is described in https://github.com/gulpjs/interpret/issues/65#issuecomment-597184897.

However, that is not optimal for your project, given that every time you run npm or yarn install it will override that change. Also, I believe right now storybook only supports .js for their config files.

My suggestion to you is to try the following:
1 - rename your storybook config files (main.mjs, preview.mjs, etc) to use .js instead
2 - if necessary, add a loader or plugin to your webpack.config file that supports .mjs so it can interpret your .mjs components

[stale[bot]]

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!

[machineghost]

A much simpler way to solve ES Module issues is to not use Node, and instead use the "esm" module (from the creator of Lodash).

With that module and Node's -r argument, solving ES module code is as simple as:

npm i esm
node -r esm foo.stories.js

It seems to me the ideal solution here would be to just give the storybook command a --esm option that does that (or rather, the in-code equivalent), or a generic -r option that lets you require any module before running storybook.

EDIT

Actually, while the above would be nice to have, here's a simple workaround for anyone who wants to use ES Modules with Storybook.

Simply npm i esm then change your .storybook/main.js into:

require = require('esm')(module);
module.exports = require('./realMain.js');

Then just move whatever you used to have in main.js to realMain.js, and you're set: realMain.js can import other modules using ESM syntax, without any issues.

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.31 containing PR #10097 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.