Storybook: "Error: Cannot find module" when importing from another package

danielritter commented 3 months ago

Current Behavior

I have a nx repo with storybook and tailwind configured (storybook-demo.zip). Within I have the following libraries created:

"@frontend/angular-ui-button": ["libs/frontend/angular/ui/button/src/index.ts"],
"@frontend/angular-ui-common": ["libs/frontend/angular/ui/common/src/index.ts"],
"@frontend/angular-ui-storybook": ["libs/frontend/angular/ui/storybook/src/index.ts"],
"@frontend/angular-ui-tailwind": ["libs/frontend/angular/ui/tailwind/src/index.ts"]

I have one file badge.tailwind.ts in @frontend/angular-ui-button that imports two functions from @frontend/angular-ui-tailwind.

When I want to start npm run storybook I get the following error message:

New
ERROR in ./libs/frontend/angular/ui/storybook/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./libs/frontend/angular/ui/storybook/src/styles.scss?ngGlobalStyle 
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module '@frontend/angular-ui-tailwind'
...

My tsconfig for storybook tsconfig.storybook.ts in libs/frontend/angular/ui/storybook looks like this:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    },
    "exclude": ["../**/*.spec.ts"],
    "include": [
        "../**/*.stories.ts",
        "../**/*.stories.js",
        "../**/*.stories.jsx",
        "../**/*.stories.tsx",
        "../**/*.stories.mdx",
        "../storybook/**/*.ts",
        "src/**/*.ts",
        "*.js",
        "*.ts"
    ]
}

To resolve the Error: Cannot find module issue I tried to install the TsconfigPathsPlugin plugin as mentioned here https://stackoverflow.com/questions/71677948/how-to-add-typescript-paths-to-storybook as follows in the main.ts under libs/frontend/angular/ui/storybook/src/lib/storybook:

...
    webpackFinal: async (config, { configType }) => {
        if (config.resolve) {
            config.resolve.plugins = [
                new TsconfigPathsPlugin({
                    configFile: './tsconfig.base.json',
                    extensions: config.resolve.extensions
                })
            ];
...
        }
        return config;
    }
...

I also tried to set the alias as mentioned here: https://storybook.js.org/docs/builders/webpack

...
    webpackFinal: async (config, { configType }) => {
        if (config.resolve) {
...
            config.resolve.alias = {
                ...config.resolve.alias,
                '@frontend/angular-ui-tailwind': path.resolve(__dirname, '../../../../tailwind/src/index.ts'),
            };

            console.log('ALIAS', config.resolve.alias);
        }
        return config;
    }
...

In the project.json in frontend-angular-ui-storybook I also tried to set implicitDependencies as mentioned here: https://nx.dev/recipes/storybook/one-storybook-for-all#extras-dependencies

    "implicitDependencies": [
      "frontend-angular-ui-tailwind"
    ],

The references in tsconfig.json in frontend-angular-ui-storybook are set as follows:

    "references": [
        {
            "path": "./tsconfig.lib.json"
        },
        {
            "path": "./tsconfig.spec.json"
        },
        {
            "path": "./tsconfig.storybook.json"
        }
    ],

With all this done, the error is still here and typescript cannot resolve the module @frontend/angular-ui-tailwind when starting storybook. When I remove the dependencies import { apply, createComponentPlugin } from '@frontend/angular-ui-tailwind'; in badge.tailwind.ts from @frontend/angular-ui-button, storybook can be started.

Expected Behavior

I can import functions from another package and run storybook without errors.

GitHub Repo

https://github.com/user-attachments/files/16458450/storybook-demo.zip

Steps to Reproduce

Download nx repo (see attached)
npm install
npm run storybook

Nx Report

Node           : 20.11.1
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 8.19.4

nx (global)        : 19.1.0
nx                 : 19.5.4
@nx/js             : 19.5.4
@nx/jest           : 19.5.4
@nx/linter         : 19.5.4
@nx/eslint         : 19.5.4
@nx/workspace      : 19.5.4
@nx/angular        : 19.5.4
@nx/cypress        : 19.5.4
@nx/devkit         : 19.5.4
@nx/eslint-plugin  : 19.5.4
@nx/storybook      : 19.5.4
@nrwl/tao          : 19.5.4
@nx/web            : 19.5.4
@nx/webpack        : 19.5.4
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/eslint/plugin
@nx/storybook/plugin
---------------------------------------
Community plugins:
@storybook/angular : 8.1.11

Failure Logs

No response

Package Manager Version

No response

Operating System

[ ] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

Tailwind tailwind.config.ts is configured in libs/frontend/angular/ui/storybook and imports there the plugin badge.tailwind.ts.

Coly010 commented 2 weeks ago

Can you try this again on latest Nx (v20)?

github-actions[bot] commented 1 week ago

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days. It will be closed in 21 days if no results are provided. If the issue is still present, please reply to keep it active. If the issue was not present, please close this issue. Thanks for being a part of the Nx community! 🙏

nrwl / nx