You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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";
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";
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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');
}
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
Beta Was this translation helpful? Give feedback.
All reactions