Error: exports is not defined #3346
Comments
|
I'm getting |
|
this might help since we don't have official docs yet: #3270 |
|
This is still not working... |
|
I just ran into an issue with the same error message in a storybook after turning on yarn workspaces in a lerna project. I suspect that this is caused by package loading issues. Investigating further. |
|
Sounds like I have the identical issue. |
|
If I understand the problem right, there is an issue with resolving .ts files from the .js? (Though, I don't understand why you are importing your component from Maybe you should add |
|
@igor-dv No, I use JS. Anyway, changing variable identifier ( |
|
I'm getting this error without using TypeScript, just vanilla JS |
|
I removed the babel loader from |
|
I'm running into this, in the browser I get
If I change the internal dependency's package.json main config to the non-built source everything works So there's something wrong with storybook's webpack config and importing cjs into es module code, or something ... My fixSo I realized I accidentally deleted my package.json "module" field that pointed to the ES module version of my builds, adding that back in makes everything work again. Still seems like storybook should be able to pull the cjs version, but my problem is solved 🤷🏽♂️ |
|
This is still happening for me in v4.0.0-alpha.20 with babel 7.0.0 |
|
Same here @tony. I'm using Flow, though. |
|
@ryanflorence I have the exact same lerna setup and the exports issue for storybook. |
|
this issue can be fixed by adding the correct plugin in the This is what I have in my
Note: This solution works for another kind of modules https://babeljs.io/docs/en/next/plugins#modules |
|
For me the issue is caused with the recent changes to include babel-loader in 4.0.0.alpha. The default server webpack config could include your commonjs compiles (packages, workspaces): https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/webpack.config.dev.js#L78 For me, a fix is to override the default plugin declare with a custom webpack.dev.js: // exclude 'babel-loader' so we can override it later
...defaultConfig.module.rules.filter(rule => !(
(rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
)),{
test: /\.jsx?$/,
include: require('path').resolve('./'),
exclude: /(node_modules|dist)/, // exclude any commonjs files
loader: 'babel-loader',
},Omitting |
assuming you use yarn 😉
is that the root cause? applying the change locally doesn't seem to fix my issue. i'm getting the following in my browser's console: ...which is a bit different i guess..? yet another error that you see all the time but always has a different solution 🤦♂ /me frowns in babel and webpack's general direction 😬
oh yeah i hear you - none of this stuff is ever easy. thank you very much for al the work you do here and elsewhere - storybook (even v3) is an amazingly helpful tool 🙏👏👏👏👍 |
This is most likely caused by Webpack wrapping a CommonJS module with its ESM wrapper. Webpack will use an ESM wrapper if it sees any usage of
To avoid the second case you'll need to set Babel's https://github.com/i-like-robots/broken-webpack-bundle-test-case Update: My original comment is hidden above but this is the base configuration we have been using to resolve these issues across multiple monorepo projects: const excludePaths = [/node_modules/, /dist/]
module.exports = ({ config }) => {
// Use real file paths for symlinked dependencies do avoid including them multiple times
config.resolve.symlinks = true
// HACK: extend existing JS rule to ensure all dependencies are correctly ignored
// https://github.com/storybooks/storybook/issues/3346#issuecomment-459439438
const jsRule = config.module.rules.find((rule) => rule.test.test('.jsx'))
jsRule.exclude = excludePaths
// HACK: Instruct Babel to check module type before injecting Core JS polyfills
// https://github.com/i-like-robots/broken-webpack-bundle-test-case
const babelConfig = jsRule.use.find(({ loader }) => loader === 'babel-loader')
babelConfig.options.sourceType = 'unambiguous'
// HACK: Ensure we only bundle one instance of React
config.resolve.alias.react = require.resolve('react')
return config
} |
|
@i-like-robots what's the downside of using |
|
Thanks for posting the workaround! |
|
I'm going to use this to improve monorepo support: #8822 (6.0.0 feature) |
|
Maybe unrelated, but I was having this |
|
@qrosmeli Thanks for the tip. You saved my day! 🚀 |
|
Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 containing PR #8822 that references this issue. Upgrade today to try it out! You can find this prerelease on the Closing this issue. Please re-open if you think there's still more to do. |
|
[UPDATED] - We have to exclude node_modules from this rule otherwise it will break the build I have resolved it by adding this rule in storybook main.js file let rules = [{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: /dist/, //Include dist folder as well to parse using babel loader in order to resolve exports not defined error
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", {
modules: "commonjs"
}]
]
}
}]Along with this, you may also need to disable the eslint validations for your dist folder, so for that, you can use below script webpackFinal: config => {
//Find eslint loader rule from webpack config
let eslintRule = config.module.rules.find(rule => {
if (rule && rule.use) {
return rule.use.some(use => use.loader.match('eslint-loader'))
}
});
//Exclude validations of dist folder contents
eslintRule.exclude = /dist/;
return {
...config,
module: {
rules: [
...rules,
eslintRule,
...config.module.rules
]
}
}
} |
|
Thanks @ashvin777, works like a charm 😉 |
|
Hey @aperkaz, I have updated the rule to exclude |
|
I had the exact same issue, and for me the solution was switching from using before module.exports = {
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
plugins: [
'transform-es2015-modules-commonjs',
'@babel/plugin-proposal-class-properties'
]
};after module.exports = {
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-proposal-class-properties'
]
}; |
I spent the day on this issue, I already had the For my part, it was not linked to a A workaround that works for me is to force the option I also have this problem with EDIT: This is not a solution because it loses the benefits of ESM modules with webpack. I need to force transform to cjs only for the storybook builds. 🎉 My {
"extends": "../.babelrc",
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}
|
|
Got this to work again with a simple fix: Remove "module" from {
"module": "commonjs",
} |
|
I am having the same issue using in package.json. Storybook version 6.5.10 |
thank you. this worked |
|
If anyone is still encountering this, here's what worked for me: Perhaps because my Babel config is named const config = {
stories: [
"../stories/**/*.stories.tsx",
],
addons: [
"@storybook/addon-essentials",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5"
},
babel: async (options) => {
// Ignoring the default Storybook options and loading our own:
const opt = require('../babel.config');
// I'm manually adding "@babel/preset-env" here since my personal setup doesn't
// specify it in the main Babel config file. You probably won't need this part.
opt.presets.unshift(
[
"@babel/preset-env",
{
"targets": {
"chrome": "108",
}
}
]
)
return opt;
},
}
export default config;I also had to modify the React imports of the example from |
|
Some entity in the compile toolchain is generating code that looks like this: exports.ArrowSvg = void 0; // exports is not defined here
var react_1 = require("react");
var ArrowSvg = function (_a) { /* SNIP */ }
exports.ArrowSvg = ArrowSvg;This is still an issue using all Versions:
"@storybook/addon-essentials": "^7.5.2",
"@storybook/addon-interactions": "^7.5.2",
"@storybook/addon-links": "^7.5.2",
"@storybook/blocks": "^7.5.2",
"@storybook/nextjs": "^7.5.2",
"@storybook/react": "^7.5.2",
"@storybook/testing-library": "0.2.2",
"eslint-plugin-storybook": "^0.6.15",
"storybook": "^7.5.2",import type { StorybookConfig } from "@storybook/nextjs";
import assert from "assert";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
},
webpackFinal: async (config) => {
assert(config.resolve);
config.resolve.plugins = [new TsconfigPathsPlugin()];
return config;
},
};
export default config; |
and others
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.
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.
And then importing the compiled js into storybooks.
Version
@storybook/react3.4.0@storybook/addon-actions3.4.0babel-core6.26.0react16.3.0What 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)
The text was updated successfully, but these errors were encountered: