TypeError: Cannot read property 'use' of undefined

[MrJadaml]

Running into the following error after installing this preset. This is a fresh install of storybook (on CRA) with only sass preset added so far.

$ start-storybook -p 6006 -s public
info @storybook/react v6.3.7
info
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/Users/foo/projects/pattern-library/.storybook"
info => Loading 9 other files in "/Users/foo/projects/pattern-library/.storybook"
info => Adding stories defined in "/Users/foo/projects/pattern-library/.storybook/main.js"
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
ERR! TypeError: Cannot read property 'use' of undefined
ERR!     at Object.webpackFinal (/Users/foo/projects/pattern-library/node_modules/storybook-css-modules-preset/index.js:21:24)
ERR!     at /Users/foo/projects/pattern-library/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!     at async Object.webpack (/Users/foo/projects/pattern-library/node_modules/@storybook/builder-webpack4/dist/cjs/presets/custom-webpack-preset.js:36:28)
ERR!     at async Object.start (/Users/foo/projects/pattern-library/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:95:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/foo/projects/pattern-library/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR!     at async buildDevStandalone (/Users/foo/projects/pattern-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR!     at async buildDev (/Users/foo/projects/pattern-library/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)

my config:

module.exports = {
  ...
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    'storybook-css-modules-preset',
  ],
}

my other dependencies/loaders

  "devDependencies": {
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/node-logger": "^6.3.7",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.7",
    "css-loader": "5.2.6",
    "sass": "^1.37.5",
    "sass-loader": "10.1.1",
    "storybook-css-modules-preset": "^1.1.1",
    "style-loader": "2.0.0"
  }

If I jump into the package and log out config.module.rules I get the following:

[
  { test: /\.md$/, use: [ [Object] ] },
  { test: /(stories|story)\.mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /(stories|story)\.mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: '/Users/foo/projects/pattern-library/node_modules/@storybook/source-loader/dist/cjs/index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  { parser: { requireEnsure: false } },
  {
    oneOf: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ]
  }
]

[JohannesKlauss]

Getting the same error

[DaveMBush]

For what its worth, I'm using NRWL/NX. It turns out, with the latest bits this plugin is no longer necessary to get css modules working with React. Putting this here just in case this happens to be the issue others are having.

The reason use is being called on undefined is because the search for the existing css loaders returns nothing. I was seeing the issue because the addon I was using from nrwl, apparently, removes the items. 🤷‍♂️

Hope this helps someone

[Negan1911]

Weird, so NX is the culprit of it? @JohannesKlauss are you using NX too?

[JohannesKlauss]

No, it's unrelated to nx. I get that error on nx projects too, but also on non nx projects.

[Negan1911]

@JohannesKlauss Can you please create a simple reproduction repo?

[JohannesKlauss]

You just create a CRA app, add Storybook, add the plugin and Storybook doesn't work anymore.

[stovv]

This preset filters oneOf from config.module.rules Sections, because the condition
_ && _.test && _.test.toString() ! == css_regex Needless.
I think it is necessary to correct the condition for something like that
_ && (_.test && _.test.toString() ! == css_regex) || _.test === undefined)