I tried to apply Storybook to a React Project (NO-CRA) but Storybook can't resolve webpack.config.js and webpack.shared.js "alias" settings, but for example RTL it does. I tried to configure a .storybook/webpack.config.js but it still doesn't work, I can't find the key to resolve this error.
I'm using node -v -> v14.17.6
My folder structure is:
- .storybook
- api
- cypress
- src
- components
- Loading
- Loading.js
- Loading.module.css
- Loading.stories.js
- Loading.test.js
- Range
- Range.js
- Range.module.css
- Range.stories.js
- Range.test.js
- RangeFixed.test.js
- domain
- hooks
- mocks
- resources
package.json
{
"name": "range",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@babel/runtime": "^7.17.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"cypress": "^9.4.1",
"i18next": "^21.6.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.3",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.0"
},
"devDependencies": {
"@4tw/cypress-drag-drop": "^2.1.0",
"@babel/core": "^7.17.0",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@storybook/addon-actions": "^6.5.0-alpha.38",
"@storybook/addon-essentials": "^6.5.0-alpha.38",
"@storybook/addon-links": "^6.5.0-alpha.38",
"@storybook/builder-webpack5": "^6.5.0-alpha.38",
"@storybook/manager-webpack5": "^6.5.0-alpha.38",
"@storybook/node-logger": "^6.5.0-alpha.38",
"@storybook/preset-create-react-app": "^4.0.0",
"@storybook/react": "^6.5.0-alpha.38",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"babel-loader": "^8.2.3",
"css-loader": "^6.6.0",
"eslint": "^8.8.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^5.0.5",
"html-webpack-plugin": "^5.5.0",
"msw": "^0.36.8",
"storybook-css-modules-preset": "^1.1.1",
"style-loader": "^3.3.1",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"scripts": {
"start": "webpack-dev-server --open",
"cypress": "cypress open",
"test": "react-scripts test",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"jest": {
"moduleNameMapper": {
"^root(.*)$": "<rootDir>/src$1",
"^components(.*)$": "<rootDir>/src/components$1",
"^hooks(.*)$": "<rootDir>/src/hooks$1",
"^api(.*)$": "<rootDir>/api$1",
"^resources(.*)$": "<rootDir>/src/resources$1",
"^domain(.*)$": "<rootDir>/src/domain$1",
"^mocks(.*)$": "<rootDir>/src/mocks$1"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"eslintConfig": {
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
},
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
}
}
webpack.config.js
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.(js)$/,
use: { loader: "babel-loader" },
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true
}
}
]
}
]
},
mode: "development",
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
],
resolve: {
alias: {
"api": path.resolve(__dirname, "api/"),
"components": path.resolve(__dirname, "src/components"),
"domain": path.resolve(__dirname, "src/domain"),
"hooks": path.resolve(__dirname, "src/hooks"),
"resources": path.resolve(__dirname, "src/resources"),
"mocks": path.resolve(__dirname, "src/mocks")
}
}
};
webpack.shared.js
const paths = {
APP_DIR: path.resolve(__dirname, "..", "src"),
};
exports.resolveRoot = [paths.APP_DIR, "node_modules"];
exports.aliases = {
"root": path.resolve(paths.APP_DIR, ""),
"components": path.resolve(paths.APP_DIR, "components"),
"hooks": path.resolve(paths.APP_DIR, "hooks"),
"api": path.resolve(paths.APP_DIR, "api"),
"domain": path.resolve(paths.APP_DIR, "domain"),
"resources": path.resolve(paths.APP_DIR, "resources"),
"mocks": path.resolve(paths.APP_DIR, "mocks"),
};
.storybook/main.js
module.exports = {
stories: ["../src/**/*.stories.@(js|mdx)"],
addons: ["@storybook/addon-essentials", "storybook-css-modules-preset"],
};
.storybook/webpack.config.js
var path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
},
],
},
],
},
resolve: {
modules: [path.resolve(__dirname, "..", "src"), "node_modules"],
alias: {
"api": path.resolve(__dirname, "api/"),
"components": path.resolve(__dirname, "src/components"),
"domain": path.resolve(__dirname, "src/domain"),
"hooks": path.resolve(__dirname, "src/hooks"),
"resources": path.resolve(__dirname, "src/resources"),
"mocks": path.resolve(__dirname, "src/mocks"),
},
},
};