Storybook ERROR. Module not found: Error: Can't resolve 'hooks/' in

Question

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"),
    },
  },
};

Answer 1

Try to delete the package-lock.json file and the node_modules and re-install the dependancies.

This might cause by corrupted node modules

Answer 2

Most likely one of your stories files is throwing a silent error. Start by removing the last one you added and continue until you have a working state again, then start debugging.