Search code examples
javascriptnext.jsstorybook

How can I use absolute imports with storybook and Next.js?

In my .storybook/main.js file, I have:

 webpackFinal: async (config) => {
     config.resolve.modules = [
       ...(config.resolve.modules || []),
       path.resolve(__dirname),
     ];

     return config;
   },

But when I run my storybook, I get an error:

resolve 'components/Common/Button' in '/myprojectpath/pages'
  Parsed request is a module
  using description file: /myprojectpath/package.json (relative path: ./pages)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /myprojectpath/pages/node_modules doesn't exist or is not a directory
      looking for modules in /myprojectpath/node_modules

Not sure what's happening. When I run the Next.js project, it loads fine.

Thanks in advance!

Solution

  • It looks like the setting absolute path issue: github issue

    Most likely, will be solved with

    path.resolve(__dirname, ".."), "node_modules"]

    or

    path.resolve(__dirname, "../src"), "node_modules"]