profile
viewpoint

Ask questionsError: exports is not defined

I'm trying to use storybook for the first time, so I decided to follow the guides. I can get it working with the examples, but as soon as i pull in my own components i get exports is not defined. It doesn't matter if I use the "Quick Start Guide" or the "Slow Start Guide (React)" I always get the same unhelpful error.

exports is not defined

ReferenceError: exports is not defined at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:43176:23) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:43132:76) at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:43142:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at loadStories (http://localhost:6006/static/preview.bundle.js:40160:3) at ConfigApi._renderMain (http://localhost:6006/static/preview.bundle.js:41134:20) at render (http://localhost:6006/static/preview.bundle.js:41092:17) at ConfigApi.configure (http://localhost:6006/static/preview.bundle.js:41117:9) at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:40164:68) at Object.defineProperty.value (http://localhost:6006/static/preview.bundle.js:40165:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object.window.STORYBOOK_REACT_CLASSES (http://localhost:6006/static/preview.bundle.js:38867:18) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at http://localhost:6006/static/preview.bundle.js:725:39 at http://localhost:6006/static/preview.bundle.js:728:10

That error doesn't really help much, and when I look up the error I end up at some issues from last year all saying that this problem has been patched out... I know that it's probably my component that is exported in some way that storybook doesn't like. But since all I'm getting is exports is not defined (along with some mess of a stacktrace) its kind of hard to debug.

I'm using typescript and I'm compiling it with just plain old tsc.

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

And then importing the compiled js into storybooks.

//index.stories.jsx
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { MatrixEffect } from '../dist/index';

storiesOf('MatrixEffect', module)
  .add('100x100', () => 
    <MatrixEffect height={100} width={100} />
  );

Version

  • @storybook/react 3.4.0
  • @storybook/addon-actions 3.4.0
  • babel-core 6.26.0
  • react 16.3.0

What am I missing? (if there's a way to just import the ts straight away then that would preferable. But since I haven't found any official docs for it, this is what I've got so far)

storybookjs/storybook

Answer questions busticated

totally stymied by this one as well. spent the last ~2 days unsuccessfully trying all the suggestions from this thread as well as some of my own. none were successful 😒

ultimately, i'm left with:

WARNING in ./packages/one/src/index.jsx 2:289-293
"export 'default' (imported as 'Two') was not found in '@my-monorepo/two'
 @ ./packages/one/src/index.stories.jsx
 @ ./packages sync \.stories\.jsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js

...when starting storybook and...

index.js:49 ReferenceError: exports is not defined
    at react-is.development.js:18
    at Module../packages/one/node_modules/react-is/cjs/react-is.development.js (react-is.development.js:226)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/react-is/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/prop-types/index.js (index.js:9)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)

...when viewing the storybook ui (http://localhost:9001). my stories don't load.

fwiw, here's my setup:

my-monorepo
β”œβ”€β”€ .storybook/
β”‚   β”œβ”€β”€ addons.js
β”‚   β”œβ”€β”€ config.js
β”‚   └── webpack.config.js
β”‚
β”œβ”€β”€ packages/
β”‚   β”œβ”€β”€ one
β”‚   β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”‚   β”œβ”€β”€ index.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ index.stories.jsx
β”‚   β”‚   β”‚   └── index.test.jsx
β”‚   β”‚   β”œβ”€β”€ dist/
β”‚   β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   β”‚   β”œβ”€β”€ index.stories.js
β”‚   β”‚   β”‚   └── index.test.js
β”‚   β”‚   └── package.json
β”‚   β”‚
β”‚   └── two
β”‚       β”œβ”€β”€ src/
β”‚       β”‚   β”œβ”€β”€ index.jsx
β”‚       β”‚   β”œβ”€β”€ index.stories.jsx
β”‚       β”‚   └── index.test.jsx
β”‚       β”œβ”€β”€ dist/
β”‚       β”‚   β”œβ”€β”€ index.js
β”‚       β”‚   β”œβ”€β”€ index.stories.js
β”‚       β”‚   └── index.test.js
β”‚       └── package.json
β”‚
β”œβ”€β”€ .babelrc
β”œβ”€β”€ .eslintrc.js
β”œβ”€β”€ jest.config.js
β”œβ”€β”€ lerna.json
β”œβ”€β”€ npm-shrinkwrap.json
└── package.json

<details> <summary>addons.js</summary> <p>

import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-storysource/register';

</p> </details>

<details> <summary>config.js</summary> <p>

import { configure } from '@storybook/react';

const req = require.context('../packages', true, /.stories.jsx$/);

function loadStories(){
	req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

</p> </details>

<details> <summary>webpack.config.js</summary> <p>

module.exports = {
	module: {
		rules: [
			{
				test: /\.stories\.jsx?$/,
				loaders: [require.resolve('@storybook/addon-storysource/loader')],
				enforce: 'pre'
			}
		]
	}
};

</p> </details>

<details> <summary>.babelrc</summary> <p>

{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": [
		"@babel/plugin-transform-modules-commonjs"
	]
}

</p> </details>

<details> <summary>package.json (root)</summary> <p>

{
  "name": "my-monorepo",
  "description": "monorepo containing POC react ui component library",
  "version": "1.0.0",
  "author": "me",
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "storybook": "npm run build && start-storybook --port 9001 --config-dir .storybook --ci",
    "test": "npm run lint && npm run test:unit",
    "test:unit": "npm run build && NODE_ENV=development BABEL_ENV=test jest --no-watchman",
    "test:unit:watch": "npm run test:unit -- --watch",
    "test:unit:snapshot": "npm run test:unit -- --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "build": "npm run clean && lerna run build",
    "clean": "lerna run clean",
    "clean:modules": "lerna clean --yes",
    "release": "npm run build && lerna publish",
    "start": "npm run storybook"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-backgrounds": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-storysource": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "babel-jest": "^22.4.1",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.18.2",
    "eslint-config-particle": "^2.2.1",
    "eslint-plugin-react": "^7.14.2",
    "jest": "^22.4.2",
    "jest-styled-components": "^6.3.3",
    "lerna": "^3.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.3.2"
  }
}

</p> </details>

<details> <summary>package.json (one)</summary> <p>

{
  "name": "@my-monorepo/one",
  "description": "react component one",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15",
    "styled-components": ">=3"
  },
  "dependencies": {
    "@my-monorepo/two": "^1.1.0",
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

</p> </details>

<details> <summary>package.json (two)</summary> <p>

{
  "name": "@my-monorepo/two",
  "description": "react component two",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15"
  },
  "dependencies": {
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

</p> </details>

everything within the components' ./src directory uses ESM-style imports / exports. the @my-monorepo/one depends on @my-monorepo/two. at install-time, lerna links the dependency (via lerna bootstrap). all packages are built using babel - the top-level npm run build command generates the individual ./dist directories and their contents. npm start first builds the components, then starts storybook.

under v3 all of this worked just fine - though it always felt a bit awkward to have to build the components first. i get why though - package.json includes "main: "dist/index.js" so without that in place storybook would report that @my-monorepo/two could not be found when attempting to build (since @my-monorepon/one depends on it). but otherwise, i was happy with the setup.

one thing i noticed: when i added "module": "src/index.jsx" to the components' package.json files, it got rid of the webpack warning but the client-side ReferenceError: exports is not defined remained. i found someone reporting the same error but no resolution.

i'm going to stick with storybook v3 for now but i'll keep an eye on this thread and happily try any suggestions :pray::+1:

useful!
source:https://uonfu.com/
Github User Rank List