TypeError: Cannot read property 'module' of undefined

[jordyvandomselaar]

I'm using the latest Storybook: 5.0.0

I'm using React generated with create-react-app with the --typescript flag. Following this guide; https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-with-babel-loader

I get the following error: TypeError: Cannot read property 'module' of undefined

[tograd]

same issue I guess

ERR! TypeError: Cannot read property 'module' of undefined
ERR!     at module.exports (D:\code\github\...\.storybook\webpack.config.js:3:10)
ERR!     at Object.webpack (D:\code\github\...\node_modules\@storybook\core\dist\server\preview\custom-webpack-preset.js:43:12)
ERR!  { TypeError: Cannot read property 'module' of undefined
ERR!     at module.exports (D:\code\github\...\.storybook\webpack.config.js:3:10)
ERR!     at Object.webpack (D:\code\github\...\node_modules\@storybook\core\dist\server\preview\custom-webpack-preset.js:43:12)
ERR!   stack:
ERR!    "TypeError: Cannot read property 'module' of undefined
    at module.exports (D:\\code\\github\\...\\.storybook\\webpack.config.js:3:10)
    at Object.webpack (D:\\code\\github\\...\\node_modules\\@storybook\\core\\dist\\server\\preview\\custom-webpack-preset.js:43:12)" }

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[jangerhofer]

Logging the three variables in the line (baseConfig, env, config) => { shows that the latter two are undefined with v5. The baseConfig object has a config key whose value is an object with the keys module and resolve.

I don't have any grasp on what the aforementioned trio of variables are intended to represent, but I did find that changing the enclosing function got me up and running. My webpack.config.js now contains:

const path = require("path");
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader")
      },
      {
        loader: require.resolve("react-docgen-typescript-loader")
      }
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

[tograd]

Thank you

Another issue that might crop up afterwards is in .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
const req = require.context('../stories', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);

using the default npx install it puts files into ../src/stories not ../stories

[tmeasday]

Any one keen to send a PR to the docs to fix these two things? 🙏

[filiplindbladh]

Can't get the example with babel-loader to work either! tried some different webpack configs but no luck, it looks like this:

const path = require("path");
module.exports = ({ config, mode }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [{ loader: require.resolve("babel-loader") }],
    });
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
};

any ideas?

[tograd]

@dai4

yes just change to require.context('../src', true, /.stories.tsx$/) if you put .stories files everywhere, or require.context('../src/stories', true, /.stories.tsx$/) if you keep them in src/stories folder only

[dai4]

@tograd Thanks for your reply!

I misunderstood what you said as I'm having a different issue where this bit of code require.context('../stories', true, /.stories.tsx$/) is not actually looking only in the ../stories folder, but rather everywhere, starting from root.

[jangerhofer]

@tmeasday: Sure! I would be happy to take a stab at it. It looks to me like this line loads the function provided in a custom webpack.config.js file. I see that said function's signature changed in this commit.

I'll submit a PR for the docs accordingly!

[jangerhofer]

@filiplindbladh: Are you blocked by any error in particular? I just tried using the npx -p @storybook/cli sb init set up method on a fresh Create-React-App Typescript project, and the webpack.config.js below (straight from the docs) worked on the first go for me.

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    options: {
      presets: [["react-app", { flow: false, typescript: true }]]
    }
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

[DanRYoung]

@jangerhofer For me at least, the issue arises in upgrading Storybook from 4.x to 5 on my existing TypeScript CRA app, per the upgrade guide.

[littlepoolshark]

@jangerhofer
It work for me,Thanks a lot.

[shilman]

@DanRYoung did you get this figured out? There was a bug in "extend-mode" webpack config that got fixed in 5.0.2 https://github.com/storybooks/storybook/blob/next/MIGRATION.md#deprecate-webpack-extend-mode

[jordyvandomselaar]

Thanks everyone for the awesome replies and all the help! You guys are awesome 👍

[forrestblade]

I'm still having this error, I'm not understanding what I need to do to fix it. This is what my webpack.config inside my .storybook looks like.

const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());

module.exports = (config, mode) => {
    // Had to add this and the below packages in order for create-react-app
    // inline SVG loader to work.
    // https://github.com/storybooks/storybook/issues/4298
    config.module.rules.push({
        test: /\.(js|jsx)$/,
        include: path.resolve(appDirectory, 'src'),
        loader: require.resolve('babel-loader'),
        options: {
            presets: [require.resolve('babel-preset-react-app')],
            plugins: [
                [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                        loaderMap: {
                            svg: {
                                ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                            },
                        },
                    },
                ],
            ]
        }
    });

    config.resolve.extensions.push(".stories.js");

    return config;
};

EDIT: Don't forget you curly braces in ({config, mode})

[shilman]

@forrestblade If you're using Storybook 5, the webpack config function signature changed. You're still using the v4 version. See: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#webpack-config-simplification

[forrestblade]

I figured, it out. It's been a long day haha. I forgot my curly braces

[sandinosaso]

For me to make it work with 5.3.x version I had to have my webpack config like this:

const path = require("path");
module.exports = ({ config }) => {
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: require.resolve("awesome-typescript-loader")
            },
            {
              loader: require.resolve("react-docgen-typescript-loader")
            }
          ]
        }
      ]
    },
    resolve: {
      ...config.resolve,
      extensions: [
        ...config.resolve.extensions,
        ".ts",
        ".tsx"
      ]
    }
  }
};