Storybook: next/config mock

[joseporto]

I'm using storybook on a nextjs react project, and many of my components import next/config on runtime, but I cannot seem to make it work in storybook/webpack.

being able to override imports with mocked files in .storybook would be nice. For this particular case.

For some reason setting: config.resolve.alias['next/config'] = path.join(__dirname, 'mocks/next/config.js'); in webpack.config.js doesn't work.

I've tried to set resolve and alias in webpack.config, but doing import getConfig() from 'next/config'; node_modules always takes precedence.

I can do the work if anyone has an idea why this happens.

[joseporto]

ok, found a solution, maybe it's good enough. Basically I import the next/config with storybook, and use it's internal setConfig method to add whatever I want it to provide via its default export.

[glrodasz]

@joseporto Do you have an example?

[olimination]

I have used the following, which worked for me:

// .storybook/config.js file
....
import { setConfig } from 'next/config';

const {
    MY_ENV_CONFIG
} = process.env;

// Set the NextJS publicRuntimeConfig property
setConfig({
    publicRuntimeConfig: {
        myEnvConfig: MY_ENV_CONFIG,
    },
});

Hope this helps.

[jacknevitt]

This solved my problem too, when I put setConfig before configure. Thanks

[jmayergit]

For those using a more recent version of Storybook the above solution goes in .storybook/preview.js