How to load "next.config.mjs"?

[oreqizer]

Hi,

I am using next.config.mjs as a configuration file. The addon tells me that it cannot find next.config.js. How do I tell it to look for .mjs?

Thank 👋

[RyanClementsHax]

Thanks for asking the question. This is actually a bug. I forgot that .mjs could be used for the config file. Go ahead and open an issue.

[oreqizer]

I tried to patch-package it into loading the next.config.mjs file, however, there's the issue with it being an ES module, and cannot be required, which is what happens in the built library code

there probably will have to be two separate build targets, one that uses require like it is now, and another one that uses import

[RyanClementsHax]

Now that I am thinking about this deeper, As of right now, I'm not sure this is possible because esmodules are experimental in node and we are bound to the runtime of the webpack running in storybook. In other words, we can't use the import keyword in the addon because we have to use commonjs modules.

I'm not sure how next.js does it, but I'll take a look and see if maybe we can use the technique they use to import esm.

[RyanClementsHax]

I may not have bandwidth to research further into how next.js does this, but my guess is they use experimental node esmodule support under the hood. If this is the case, then I'm not sure we can do it in storybook since storybook relies on commonjs modules so far (as far as I'm aware). I could use extra help in addressing this if anyone from the community could lend a hand.

[tubbo]

@RyanClementsHax Storybook plans to drop CJS support by v7.0, and now that v6.2 is out, it should support ESM out of the box.

In order for this package to support both, I believe you will need to build for both the CJS and ESM formats. This can be done with tsc, and Node's new conditional exports feature lets you specify which file should be used for each module resolution format.

[RyanClementsHax]

Thanks for that. Given that storybook v7 is coming out with nextjs support baked in, I'm going to leave this undone since I'd prefer people to migrate to their solution since it will be better supported.