Storybook: Cannot assign to read only property 'exports' of object '#<Object>'

[ericclemmons]

Describe the bug

Using require within on a CommonJS module throws this red error in the preview window.

To Reproduce
Steps to reproduce the behavior:

import { storiesOf } from '@storybook/react';
import { setupGraphiQL } from '@storybook/addon-graphql';

const createQuery = require('./createQuery'); // This is the problem line

Where createQuery.js is:

module.exports = function createQuery(operationName = 'MyQuery') {
  return `...`
}

Expected behavior

I expect to be able to require a module with module.exports.

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System:

• OS: [MacOS]
• Device: [Macbook Pro 2018]
• Browser: [chrome]
• Framework: [e.g. react]
• Addons: [graphql]
• Version: [e.g. 4.1.7]

Additional context

Custom webpack.config.js:

// https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

const webpack = require('webpack');

module.exports = config => {
  config.devtool = 'inline-source-map';

  // Needed for ./node_modules/graphiql/graphiql.css
  config.module.rules.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
  });

  // Explicitly ignore `.flow` files because GraphiQL, for whatever
  // insane reason, ships `.flow` files that get picked up by Webpack
  // and Next.js
  //
  // > https://github.com/apollographql/apollo-client-devtools/pull/59/files
  config.plugins.push(new webpack.IgnorePlugin(/\.flow$/));

  return config;
};

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jth0024]

I'm seeing this issue as well

[shilman]

Is this an issue with addon-graphql only, or a general SB issue?

[lassiter]

bump, We're running into this issue as well. We use module.exports for our API library. Has anyone made any progress?

[ndelangen]

Related:
https://github.com/webpack/webpack/issues/4039

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[JulienPradet]

For anyone looking for an actionable solution:

You need not to mix import with the module.exports syntax. (cf. https://github.com/webpack/webpack/issues/4039#issuecomment-273804003)

However, sometimes it's not mixed in your code. You only have some require/module.exports in your file. But the error still occurs because some webpack loaders actually add some imports to your file (most likely babel).

So get rid of your module.exports and only use export/export default syntax. Sometimes you can also configure your loaders to ensure that they don't use any imports, but didn't manage to find a magic solution on my end.

[gilesbutler]

For anyone stumbling across this, I faced the same problem after importing a NPM package to a Vue component in Storybook. Adding sourceType: 'unambiguous' to my babel config fixed the issue for me. Thanks to this issue https://github.com/vuejs/vue-cli/issues/2746

[DalderupMaurice]

I'm having this issue as well, not sure how to fix this as I'm not using any module.exports nor am I using Vue and I am uzing CRA so there's no babel config to modify

[lannierose]

Fixed mine by removing { "modules": false } from this line in .babelrc: ["env", { "modules": false }]

[mattvalleycodes]

This error happens when there is a mix of module.exports and export. Often times your code only uses ES6 syntax but still get this error. It could be because Webpack / Typescript / Babel are configured in a way that don't exclude some of the node_modules. For me that was the case as I'm using Yarn work-spaces. Try to inspect the generated Webpack config by adding:

webpackFinal: async (config) => console.log(config.module.rules);

chances are that Typescript / Javascript loaders are not configured correctly.

I fixed the issue by doing:

// loader for JS and TS
config.module.rules[0].exclude = [/node_modules/];

The original value was excluding only the root-level node_modules whereas with Yarn workspaces you gotta exclude all node_modules.

[pramod0]

Fixed mine by removing { "modules": false } from this line in .babelrc: ["env", { "modules": false }]

signed in to report that this works. Thank you.