Storybook: Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'

Created on 29 Oct 2018 · 9Comments · Source: storybookjs/storybook

Describe the bug
When migrating from 3.4.11 to 4.0 I use create-react-app-ts (internally uses CRA@1)
I receive the following error:

ERR! Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:497:25)
ERR!     at Module.require (internal/modules/cjs/loader.js:626:17)
ERR!     at require (internal/modules/cjs/helpers.js:20:18)
ERR!     at Object.<anonymous> (/Users/Maurice/Development/ultimate-ttt/.storybook/webpack.config.js:3:26)
ERR!     at Module._compile (internal/modules/cjs/loader.js:678:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:589:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:520:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:626:17)
ERR!     at require (internal/modules/cjs/helpers.js:20:18)
ERR!     at interopRequireDefault (/Users/Maurice/Development/ultimate-ttt/node_modules/@storybook/core/dist/server/serverRequire.js:61:18)
ERR!     at serverRequire (/Users/Maurice/Development/ultimate-ttt/node_modules/@storybook/core/dist/server/serverRequire.js:101:10)
ERR!     at _default (/Users/Maurice/Development/ultimate-ttt/node_modules/@storybook/core/dist/server/loadCustomWebpackConfig.js:16:56)
ERR!     at Object.webpack (/Users/Maurice/Development/ultimate-ttt/node_modules/@storybook/core/dist/server/core-preset-webpack-custom.js:49:61)

To Reproduce
(the easiest for me right now is to use the repo I try to migrate as an example)
Steps to reproduce the behavior:

go to branch https://github.com/ultimate-ttt/ultimate-ttt/pull/110
run yarn storybook
see that it fails. Try to run:

yarn remove babel-core
yarn add @babel/core babel-loader --dev

(I don't have babel-runtime as a dependency therefore I don't remove it like in the docs)

run yarn storybook (still fails)

Expected behavior
Storybook starting up.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

{
  ...,
  "dependencies": {
    "classnames": "^2.2.6",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-github-corner": "^2.3.0",
    "react-redux": "^5.0.7",
    "react-scripts-ts": "^3.1.0",
    "redux": "^4.0.1",
    "redux-saga": "^0.16.2",
    "rmwc": "^3.0.5"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom --coverage",
    "test:watch": "react-scripts-ts test --watch",
    "eject": "react-scripts-ts eject",
    "storybook": "start-storybook -p 6006"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-knobs": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addons": "^4.0.0",
    "@storybook/react": "^4.0.0",
    "@types/classnames": "^2.2.6",
    "@types/enzyme": "^3.1.13",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/jest": "^23.3.3",
    "@types/node": "^10.12.0",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/react-redux": "^6.0.9",
    "@types/redux-logger": "^3.0.6",
    "@types/storybook__addon-actions": "^3.4.1",
    "@types/storybook__addon-knobs": "^3.3.1",
    "@types/storybook__addon-links": "^3.3.2",
    "@types/storybook__react": "^3.0.9",
    "babel-loader": "^8.0.4",
    "coveralls": "^3.0.2",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-logger": "^3.0.6",
    "redux-saga-test-plan": "^3.7.0",
    "typescript": "^3.1.3"
  }
}

System:

OS: MacOS High Sierra
Device: Macbook Pro 2016
Framework: react
Version: 4.0.0

Additional context
Using create-react-app-typescript which is based on CRA@1 right now.

question / support

Source

maracuja-juice

👍1

Most helpful comment

You can't anymore import default webpack config like this:
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

now you should take it as the 3rd parameter in:
```js
// .storybook/webpack.config.js
module.exports = (baseConfig, mode, defaultConfig) => ...

igor-dv on 29 Oct 2018

👍5

All 9 comments

You can't anymore import default webpack config like this:
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

now you should take it as the 3rd parameter in:
```js
// .storybook/webpack.config.js
module.exports = (baseConfig, mode, defaultConfig) => ...

igor-dv on 29 Oct 2018

👍5

CRA hides all the Webpack logic. So I'm not sure how I can change this without ejecting my app.

Is there maybe the option to completely reinstall storybook? I think this would solve the issue.

maracuja-juice on 29 Oct 2018

It is a SB custom config, not the CRA's one. Take a look at your .storybook dir

igor-dv on 29 Oct 2018

👍2

I wasn't aware that storybook makes a custom config. Good to know. I will take a look and report back.

maracuja-juice on 29 Oct 2018

I changed now everything to apply to the defaultConfig parameter.

const path = require('path')
// const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, '../src')
  });
  defaultConfig.resolve.extensions.push('.scss');

  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: path.resolve(__dirname, '../src'),
    loader: require.resolve('ts-loader')
  });
  defaultConfig.resolve.extensions.push('.ts', '.tsx');

  return defaultConfig;
};

Is this how you meant it?
The startup works with this setup but then I receive the following error:

    Error: Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: Cannot read property 'ts' of undefined

I also tried it like this like you detailed in your TypeScript md file:

module.exports = (baseConfig, env, config) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('awesome-typescript-loader'),
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

This gives me a lot of errors about source files that are not in the root directory though.

maracuja-juice on 29 Oct 2018

Both your examples look ok to me. The first error sounds like you didn't install ts-loader.

Anyway, I need some reproduction / logs to understand the problem

igor-dv on 29 Oct 2018

I'll try with installing ts-loader tomorrow
I can provide full logs or you could try it out with cloning my repo. (currently don't have the time to build a minimal example. Maybe one could be built though when creating a new Typescript app through CRA, installing [email protected] and then upgrading to 4.0)

maracuja-juice on 29 Oct 2018

Okay I got it working now.