Storybook not found: Error: node_modules\entities

[timoxa20]

Summary

I have the FSD architecture at the root of the project and there is an entities storybook folder configured for the src directory and not for node_modules, but for some reason it searches for absolute imports in node_modules. The problems are only with this folder, but the problem goes away if you add relative imports. The others are fine.
ERROR in ./src/pages/ArticleDetailsPage/model/services/addCommentFormArticle/addCommentFormArticle.ts 127:0-88
Module not found: Error: Package path ./Article/model/selectors/articleDetails is not exported from package C:\Users\admin\Desktop\projectName\production-proj
ect\node_modules\entities (see exports field in C:\Users\admin\Desktop\projectName\production-project\node_modules\entities\package.json)
@ ./src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx 19:0-105 35:17-38
@ ./src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.stories.tsx 1:0-54 6:13-31
@ ./src/ lazy ^./.$ include: (?%21.node_modules)(?:[\/]src(?:\/(?:(?:(?%21(?:^%7C[\/]).).)?)[\/]%7C[\/]%7C$)(?%21.)(?=.)[^\\/]?.stori
es.(mjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.stories.tsx ./pages/ArticleDe
tailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.stories
@ ./storybook-stories.js 10:11-14:5
@ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

preview compiled with 1 error

Additional information

the configuration is located in src/config/stoorybook
main.ts
import type {StorybookConfig} from "@storybook/react-webpack5";

const config: StorybookConfig = {
stories: ["../../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-webpack5-compiler-swc",
"@storybook/addon-onboarding",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
"@storybook/addon-styling-webpack",
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
swc: () => ({
jsc: {
transform: {
react: {
runtime: 'automatic'
}
}
}
}),
docs: {
autodocs: "tag",
},

};
export default config;

---

webpack specifically for storybook
import {BuildPaths} from "../build/types/config";
import {buildCssLoaders} from "../build/loaders/buildCssLoaders";
import webpack, {DefinePlugin} from "webpack";
import path from "path";

export default ({config}: { config: webpack.Configuration }) => {
const paths: BuildPaths = {
build: '',
html: '',
entry: '',
src: path.resolve(__dirname, '..', '..', 'src'),
};
config!.resolve!.modules!.push(paths.src);
config!.resolve!.extensions!.push('.ts', '.tsx');

if(config!.module!.rules) {
    config!.module!.rules = config!.module!.rules.map((rule) => {
        if(rule && typeof rule !== 'string' &&  '...') {
            if (/svg/.test(rule.test as string)) {
                return {...rule, exclude: /\.svg$/i};
            }

            return rule;
        }

    });
}

config!.module!.rules!.push({
    test: /\.svg$/,
    use: ['@svgr/webpack'],
})
config!.module!.rules!.push(buildCssLoaders(true))


config!.plugins!.push(new DefinePlugin({
    __IS_DEV_: JSON.stringify(true),
    __API__: JSON.stringify(''),
    __PROJECT__: JSON.stringify('storybook')
}))
return config

}

---

package.json
"devDependencies": {
"@babel/core": "^7.24.1",
"@babel/preset-react": "^7.24.1",
"@babel/preset-typescript": "^7.24.1",
"@chromatic-com/storybook": "^1.3.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
"@storybook/addon-actions": "^8.0.9",
"@storybook/addon-essentials": "^8.0.6",
"@storybook/addon-interactions": "^8.0.6",
"@storybook/addon-links": "^8.0.9",
"@storybook/addon-onboarding": "^8.0.6",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
"@storybook/addons": "^7.6.17",
"@storybook/blocks": "^8.0.6",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^8.0.9",
"@storybook/react-webpack5": "^8.0.6",
"@storybook/test": "^8.0.6",
"@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.3.0",
"@types/jest": "^29.5.12",
"@types/node": "^20.11.19",
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.19",
"@types/react-router-dom": "^5.3.3",
"@types/webpack": "^5.28.5",
"@types/webpack-bundle-analyzer": "^4.7.0",
"@types/webpack-dev-server": "^4.7.2",
"@typescript-eslint/eslint-plugin": "^7.3.0",
"@typescript-eslint/parser": "^7.3.0",
"babel-plugin-i18next-extract": "^0.10.0",
"concurrently": "^8.2.2",
"css-loader": "^6.11.0",
"eslint": "^8.57.0",
"eslint-plugin-i18next": "^6.0.3",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.8.0",
"execa": "^8.0.1",
"html-webpack-plugin": "^5.6.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-transform-css": "^6.0.1",
"jest-transform-stub": "^2.0.0",
"json-server": "^0.17.4",
"mini-css-extract-plugin": "^2.8.1",
"react-refresh": "^0.14.2",
"reg-cli": "^0.18.1",
"regenerator-runtime": "^0.14.1",
"sass": "^1.74.1",
"sass-loader": "^14.1.1",
"storybook": "^8.0.6",
"storybook-addon-sass-postcss": "^0.2.0",
"style-loader": "^3.3.4",
"stylelint": "^16.2.1",
"stylelint-config-standard-scss": "^13.0.0",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
"typescript": "^5.3.3",
"webpack": "^5.90.3",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.2"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.3",
"axios": "^1.6.8",
"i18next": "^23.10.1",
"i18next-browser-languagedetector": "^7.2.0",
"i18next-http-backend": "^2.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.1.0",
"react-redux": "^9.1.1",
"react-router-dom": "^6.22.3",
"ts-essentials": "^9.4.2"
},

Create a reproduction

No response

[ayub-a]

I had the same problem. I didn't find a solution in the storybook docs and I decided to rename entities to units for now.