Storybook v7 nextjs - Importing from another lib causes Module not found: Error: Can't resolve error

[victorcarvalhosp]

Current Behavior

I have two libs: "layout" and "families: - and configured storybook for them using the nextjs version of the storybook generator: https://nx.dev/packages/storybook/documents/storybook-7-setup

It works fine at the beginning, but as soon as I try to create a new story in the "families" project, that relies on one component that comes from "layout" lib then storybook doesn't work anymore and throw the following error:

ERROR in ./libs/families/src/lib/components/sidebarMenuFamilies/newComponent/newComponent.tsx 3:0-76
 Module not found: Error: Can't resolve '@my-project-mono/layout' in '/Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/sidebarMenuFamilies/newComponent'
 resolve '@my-project-mono/layout' in '/Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/sidebarMenuFamilies/newComponent'
   Parsed request is a module
   using description file: /Users/victor/Documents/dev/my-project-mono/package.json (relative path: ./libs/families/src/lib/components/sidebarMenuFamilies/newComponent)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/sidebarMenuFamilies/newComponent/node_modules doesn't exist or is not a directory

Running the project outside storybook everything works fine.

Expected Behavior

Storybook should work fine when there's some component that imports some component from another library in the same monorepo.

GitHub Repo

No response

Steps to Reproduce

1. Create two nextjs libraries:

nx g @nrwl/next:lib layout

nx g @nrwl/next:lib families

2-Then configure storybook for both:
nx g @nrwl/storybook:configuration layout --storybook7Configuration --storybook7UiFramework=@storybook/nextjs
nx g @nrwl/storybook:configuration families --storybook7Configuration --storybook7UiFramework=@storybook/nextjs

Now create some component in the layout lib, and import it on families project.

The component can be as basic as this:

on layout:

export function NewComponentLayout() {
  return <div>MyComponent</div>
}

on families:

import {NewComponentLayout} from '@my-project-mono/layout'

export function MyComponent() {
  return <NewComponentLayout />
}

Then run storybook in the families lib and this error will happen:

ERROR in ./libs/families/src/lib/components/newComponent/newComponent.tsx 3:0-76
 Module not found: Error: Can't resolve '@my-project-mono/layout' in '/Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/newComponent'
 resolve '@my-project-mono/layout' in '/Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/newComponent'
   Parsed request is a module
   using description file: /Users/victor/Documents/dev/my-project-mono/package.json (relative path: ./libs/families/src/lib/components/newComponent)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/victor/Documents/dev/my-project-mono/libs/families/src/lib/components/newComponent/node_modules doesn't exist or is not a directory

Nx Report

Node : 18.7.0
   OS   : darwin arm64
   npm  : 8.15.0
   
   nx                      : 15.9.0-rc.2
   @nrwl/js                : 15.9.2
   @nrwl/jest              : 15.9.2
   @nrwl/linter            : 15.9.2
   @nrwl/workspace         : 15.9.2
   @nrwl/cli               : 15.9.2
   @nrwl/cypress           : 15.9.2
   @nrwl/devkit            : 15.9.2
   @nrwl/eslint-plugin-nx  : 15.9.2
   @nrwl/next              : 15.9.2
   @nrwl/react             : 15.9.2
   @nrwl/storybook         : 15.9.2
   @nrwl/tao               : 15.9.0-rc.2
   @nrwl/web               : 15.9.2
   @nrwl/webpack           : 15.9.2
   typescript              : 4.9.5
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nrwl/js@15.9.2
     - @nrwl/jest@15.9.2
     - @nrwl/linter@15.9.2
     - @nrwl/workspace@15.9.2
     - @nrwl/cli@15.9.2
     - @nrwl/cypress@15.9.2
     - @nrwl/devkit@15.9.2
     - @nrwl/eslint-plugin-nx@15.9.2
     - @nrwl/next@15.9.2
     - @nrwl/react@15.9.2
     - @nrwl/storybook@15.9.2
     - @nrwl/web@15.9.2
     - @nrwl/webpack@15.9.2
   
   To fix this, run `nx migrate nx@15.9.2`

Failure Logs

No response

Additional Information

No response

[mandarini]

Hi @victorcarvalhosp ! Can you please share your .storybook/main.js with me?

[victorcarvalhosp]

Hi @mandarini, it's the default one that was generated:

const config = {
  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
}

export default config

[mandarini]

Thank you very much @victorcarvalhosp ! I will investigate this issue this week. I noticed such a regression in the vite builder too, maybe it's related.

[terrymun]

@mandarini Thanks for looking into this! I have encountered a similar issue as well, and my attempts of "trying to be smart" by manually adding aliases through the webpackFinal option didn't work. I'm not sure if this is of any use, but just a little heads up :)

In my example, the storybook sits as its own package and it's trying to load all stories and MDX files from its sister packages.

The directory structure:

.
└── MONOREPO_ROOT/
    └── packages/
        ├── my-library
        ├── my-site
        └── storybook

The main.ts file looks like:

export const rootMain: StorybookConfig = {
  stories: ['../../**/*.stories.mdx', '../../**/*.stories.@(ts|tsx)'],
  addons: ['@storybook/addon-a11y', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  staticDirs: ['../public'],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve = {
        ...config.resolve,
        alias: {
          ...(config.resolve.alias ?? {}),
          '@my-library': path.resolve(__dirname, '../../my-library/src/index.ts'),
        },
      };
    }

    return config;
  },
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: '../../site/next.config.js',
    },
  },
  docs: {
    autodocs: true,
  },
};
export default rootMain;

[mandarini]

This PR should fix this issue!

[mandarini]

In the meantime, you can check these docs to help you resolve your issue: https://storybook.js.org/docs/react/builders/webpack#typescript-modules-are-not-resolved-within-storybook

[mandarini]

I am closing this, since it turned out to be a third-party issue. Once the next version of Storybook is released which contains the fix, your issue should be resolved, without any extra settings from your part. Just your plain .storybook/main.js

[terrymun]

Thanks for the very helpful info @mandarini :) you've saved me one too many times: for some reason I remember seeing that doc page on Storybook but could never find it again.

p/s: For those who can't get the default usage to work, i.e.:

new TsconfigPathsPlugin({
  extensions: config.resolve.extensions,
})

...manually resolving to the tsconfig.base.json at the root of the monorepo worked for me, using the configFile option:

new TsconfigPathsPlugin({
  extensions: config.resolve.extensions,
  configFile: path.join(process.cwd(), './tsconfig.base.json'),
})

[mandarini]

Ha, that's so good to hear @terrymun ! :D

Once the Storybook PR gets merged, you will not need to do these manual settings!! :) :)

The credit goes to the Storybook team and @valentinpalkovic for the quick fix!!!

[terrymun]

@mandarini I realized that I have no tsconfig.json in my Nx monorepo root (I have tsconfig.base.json instead), so I probably still need to use the plugin manually, right? Based on my understanding of the PR, it will only auto-look for tsconfig.json files

[mandarini]

No, it works with tsconfig.base.json, too! It will find your project's tsconfig.json, and that points to tsconfig.base.json. For example: https://github.com/mandarini/nx-next-storybook-paths/blob/main/apps/next-app/tsconfig.json

I tried it in my example reproduction repository and it works as expected!

[victorcarvalhosp]

Thank you very much @mandarini !
I'll wait the next version to be launched so I can try without changing anything.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.