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

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

[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

[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!