storybook: TypeError: Cannot read property 'module' of undefined

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;
};

@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.

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;
};

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

@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

@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;
};

@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.