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

[thirdhand]

I'm trying to set up a repo with React Storybook and Typescript, but I run into this error:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:48024:16)
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:48050:30)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:679:30)
    at fn (http://localhost:9001/static/preview.bundle.js:89:20)
    at http://localhost:9001/static/preview.bundle.js:46604:19
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:47938:5)
    at Object.defineProperty.value (http://localhost:9001/static/preview.bundle.js:47940:30)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:679:30)
    at fn (http://localhost:9001/static/preview.bundle.js:89:20)
    at Object.validateFormat (http://localhost:9001/static/preview.bundle.js:41909:20)

At first I thought something was wrong in my Typescript setup, but I didn't run into this when trying to make a minimal test case. Also when I try removing the custom webpack config, and only using Javascript the problem persists. The repo is here: https://github.com/thirdhand/components

The story is located here: https://github.com/thirdhand/components/blob/master/packages/react-input-feedback/src/index.stories.js

[marcobiedermann]

Same here, I am trying to import my React component into my story:

Header.jsx

import React from 'react';

import './style.css';

const Header = props => (
  <header className="header" role="banner">
    {props.children}
  </header>
);

export default Header;

stories.jsx

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';
/* eslint-enable */

import Header from './index';

storiesOf('Header/1.0.0', module)
  .addDecorator(withKnobs)
  .addWithStaticMarkup('default', () => (
    <Header>
      {text('Content', 'Header')}
    </Header>
  ));

As soon as I also import prop-types (import PropTypes from 'prop-types';) into my component, I get

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

[thirdhand]

@marcobiedermann Strange, I don't get this error just from importing prop-types.

[marcobiedermann]

@thirdhand
I tested this with another project and still getting this error as soon as I import prop-types.
I will create a branch on my project, so you can take a look at it.
It would also be great if you could provide a link to your project.
This way we can review each other and maybe figure out what we are missing.

[marcobiedermann]

Meanwhile I digged a bit deeper into this issue.
I used the most minimal setup which was copied from https://storybook.js.org/basics/guide-react/
Here is a simplified version of my setup:

.storybook/config.js
packages/Button/stories.jsx
packages/Button/index.jsx
packages/Button/package.json

in packages/Button/package.json I have listed prop-types and react as dependencies (of Button component).

Withing my packages/Button/index.jsx I import the packages defined by the component itself

import React from 'react';
import PropTypes from 'prop-types';

const Button = () => (…);
… 
export default Button;

This always throws the following error:

WARNING in ./packages/Button/index.jsx
13:12-21 "export 'default' (imported as 'PropTypes') was not found in 'prop-types'
 @ ./packages/Button/index.jsx
 @ ./packages/Button/stories.jsx
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

It seams that the webpack configuration from Storybook can not resolve the dependencies of a local package which belongs to a subpackage.

This issue is not specific to any package (react, prop-types or typescript) rather than using local dependencies within a package itself.

[thirdhand]

@marcobiedermann You wouldn't happen to be using lerna in your setup? I tried making a subpackage in my simplified test, but I still don't get the error there. In my real project I'm using lerna, and that's where I encountered the bug.

[thirdhand]

I created a repo with my test. Currently I don't get any errors with it.

https://github.com/thirdhand/test-typescript-storybook

[thirdhand]

I discovered that I'm able to reproduce the issue if I install React as a dependency of the subpackage. I've updated my test repo.

[marcobiedermann]

@thirdhand You are right.
You must not install react as a dependency of a sub package :/

Could it be that different version of react might conflict with each other. I used the same version in my root project and in the sub package but still get this error.

[thirdhand]

Doesn't seem to matter whether the versions are the same. I found out that if I use the command lerna bootstrap --hoist then lerna will lift (the --hoist flag) any common dependencies (such as React) to the top level node_modules directory. This seems to resolve the problem.

As for this bug, I'm not even sure whether it belongs here or in the Webpack issue tracker. I'm leaving this open, but if the maintainer wants to close it I can live with that.

[marcobiedermann]

@thirdhand You are good! I did not know that a --hoist flag exists. I tested it and it works absolutely fine. Good job! 👍

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