Storybook error in console after upgrade to 14.3.6 #10919

davidslaby · 2022-06-27T15:35:41Z

bootstrap:27 Uncaught ReferenceError: exports is not defined
    at ./apps/test/.storybook/preview.js

main.js

  core: {},
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config) => {
    const tsPaths = new TsconfigPathsPlugin({
      configFile: './tsconfig.base.json',
    });

    return merge(config, {
      resolve: {
        plugins: [tsPaths],
      },
    });
  },

test/main.js

module.exports = {
  ...rootMain,
  core: { ...rootMain.core, builder: 'webpack5' }, // This needs to be here and not in rootMain, otherwise nx throws false positive error that it's missing.
  staticDirs: ['../src'],
};

The text was updated successfully, but these errors were encountered:

mandarini · 2022-06-27T17:56:33Z

Hi there! Thanks for filing an issue. Can you please share a reproduction repository? It will really help me debug!

davidslaby · 2022-06-28T10:50:37Z

Hi @mandarini, I'm trying to run Storybook with this configuration. We are using MDX, and I'm getting this error in console. Stories are loading, but it's endless because of this error.

mandarini · 2022-06-28T11:16:37Z

I see. It would be super helpful if you gave me a bit more information. Can you try to reproduce this error in a Nx workspace and share it with me?

I would like to see the following:

Contents of root .storybook/main.js
Contents of apps/test/.storybook/main.js
Contents of apps/test/.storybook/preview.js
Your nx report

davidslaby · 2022-06-28T11:29:22Z

.storybook/main.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const { merge } = require('webpack-merge');

module.exports = {
  core: {},
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../*.stories.mdx',
    '../../../stories/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config) => {
    const tsPaths = new TsconfigPathsPlugin({
      configFile: './tsconfig.base.json',
    });

    return merge(config, {
      resolve: {
        plugins: [tsPaths],
      },
    });
  },
  babel: async (options) => {
    // Emotion css prop not working with the new JSX runtime.
    options.presets.push('@emotion/babel-preset-css-prop');
    options.plugins.push('@babel/plugin-transform-modules-commonjs');

    return options;
  },
};

.storybook/preview.js

const theme = createTheme();

export const parameters = {
  controls: {
    matchers: {
      color: /background$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'default',
    values: [
      { name: 'default', value: theme.app.background },
      { name: 'secondary', value: changeColorOpacity(theme.palette.secondary.main, 0.5) },
      { name: 'widget', value: theme.app.widgetBackground },
      { name: 'white', value: theme.palette.common.white },
    ],
  },
};

apps/test/.storybook/main.js

const rootMain = require('../../../../.storybook/main');

module.exports = {
  ...rootMain,
  core: { ...rootMain.core, builder: 'webpack5' },
  stories: ['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
};

apps/test/.storybook/preview.js

import { createTheme } from '../src';

const theme = createTheme();

const ThemeProviderDecorator = (Story) => (
  <Emotion10ThemeProvider theme={theme}>
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  </Emotion10ThemeProvider>
);

export const decorators = [ThemeProviderDecorator];

export const parameters = {
  backgrounds: {
    default: 'dark',
    values: [
      {
        name: 'dark',
        value: '#1B2228',
      },
    ],
  },
};

nx report

info @storybook/react v6.5.9
info 
info => Loading presets
info Addon-docs: using MDX1
info => Loading Nrwl React Storybook preset from "@nrwl/react/plugins/storybook"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished

info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
assets by chunk 6.07 MiB (id hint: vendors)
  assets by status 5.65 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_manager_js-node_modules_storybook_addon-backgrou-45da3d.manager.bundle.js 4.5 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_formatter-9dc562d4_js.manager.bundle.js 886 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_OverlayScrollbars-26c4a78d_js.manager.bundle.js 295 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter-82dea71a_js.manager.bundle.js 206 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_WithTooltip-508b8277_js.manager.bundle.js 126 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_Color-3c22bb81_js.manager.bundle.js 83.3 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_GlobalScrollAreaStyles-8793ce4a_js.manager.bundle.js 15.6 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.2 KiB [emitted] (name: runtime~main)
asset index.html 4.09 KiB [emitted]
asset main.manager.bundle.js 1.36 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.27 KiB [emitted]
Entrypoint main [big] 4.51 MiB = runtime~main.manager.bundle.js 14.2 KiB vendors-node_modules_storybook_addon-actions_manager_js-node_modules_storybook_addon-backgrou-45da3d.manager.bundle.js 4.5 MiB main.manager.bundle.js 1.36 KiB
orphan modules 1000 KiB [orphan] 117 modules
runtime modules 8.7 KiB 15 modules
javascript modules 5.41 MiB 896 modules
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.73.0) compiled successfully in 20795 ms

davidslaby · 2022-06-28T11:30:47Z

Uncaught ReferenceError: exports is not defined
    at ./libs/test/mui/.storybook/preview.js (GettingStarted.stories.mdx:69:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./libs/test/mui/.storybook/preview.js-generated-config-entry.js (preview.js-generated-config-entry.js:9:1)
    at __webpack_require__ (bootstrap:24:1)
    at __webpack_exec__ (generated-stories-entry.cjs:6:1)
    at generated-stories-entry.cjs:6:1
    at __webpack_require__.O (chunk loaded:23:1)
    at generated-stories-entry.cjs:6:1
    at webpackJsonpCallback (jsonp chunk loading:560:1)

mandarini · 2022-06-28T11:31:48Z

Thank you, can you please try running nx report again, and providing the output here?

davidslaby · 2022-06-28T11:33:47Z

of course: I'm sorry

 NX   Report complete - copy this into the issue template

   Node : 14.18.0
   OS   : darwin x64
   yarn : 1.22.10
   
   nx : 14.3.6
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.3.6
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.3.6
   @nrwl/eslint-plugin-nx : 14.3.6
   @nrwl/express : Not Found
   @nrwl/jest : 14.3.6
   @nrwl/js : 14.3.6
   @nrwl/linter : 14.3.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.3.6
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.3.6
   @nrwl/web : 14.3.6
   @nrwl/workspace : 14.3.6
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:

mandarini · 2022-06-28T11:35:18Z

Ok, thanks!

First of all, I see your root .storybook/main.js is linking some stories files. I think this is wrong. Did you write this manually?

  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../*.stories.mdx',
    '../../../stories/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],

I don't see how a root src directory can exist, and also ../../../** is linking files outside the monorepo.

Also, should it really be ./tsconfig.base.json or should it be ../tsconfig.base.json? Because in the .storybook directory there is a tsconfig.json, not a tsconfig.base.json

mandarini · 2022-06-28T11:38:26Z

Also, did you use the Nx Storybook configuration generator to generate your Storybook configuration?

mandarini · 2022-06-28T11:49:24Z

In your root .storybook/preview.js I see you are using a function called createTheme and another one called changeColorOpacity. By googling I inferred that createTheme most probably comes from @mui/material/styles. The changeColorOpacity maybe is a custom one? In any case, these are not imported anywhere in this file, before being used.

Similarly, there seem to be some missing imports in your project's preview.js.

mandarini · 2022-06-28T11:53:44Z

In any case, it would be super helpful if you managed to reproduce this in a new Nx workspace, and share it with me, so that I can make sure I fully understand your setup.

Steps you can follow to do this:

npx create-nx-workspace@14.3.6 my-wksp
choose react and name of the app test
yarn add -D @nrwl/storybook@14.3.6
nx generate @nrwl/react:storybook-configuration test (yes to all options)
Then, try to replace the root .storybook/main.js with your configuration, the same with .storybook/preview.js (you will need to manually create one)
Then, you can try to do the same for the project's Storybook files apps/test/.storybook/main.js and apps/test/.storybook/preview.js

I am trying to do the same! :)

I still have the following questions.

Did you start with a Nx workspace initially?
If yes, what version of Nx?
If no, did you start from a React app with Storybook and migrated to Nx, for example?
Did you create your Storybook configs manually?
When you say it broke after the upgrade, which is the last version of Nx it worked with?
Did you use nx migrate to move from one version to the other? If yes, did the migration change your root .storybook/main.js?

mandarini · 2022-06-28T12:05:53Z

Btw @davidslaby don't worry, we'll get to the bottom of it, and we'll get your Storybook working once again! :)

davidslaby · 2022-06-28T20:38:14Z

Your support is wonderful! Thank you :)

davidslaby · 2022-06-28T20:38:45Z

It's weird because everything worked properly before the upgrade.

davidslaby · 2022-06-28T20:45:55Z

We are using Nx for almost one and half year. The previous version was 14.1.5. Usually, I'm using nx migrate in combination with latest param.

We've changed an array of stories a bit.

I've already tried to create new workspace and there is not so much different config.

Btw. Imports are missing just in the code I shared here. These are our internal libraries. So, it's not missing in the project.

mandarini · 2022-06-29T08:33:36Z

Thanks for getting back to me. We're getting there! :)

Some more questions for you:

Did you create your Storybook configs manually?
You said "I've already tried to create new workspace and there is not so much different config.". Does this mean that you observe this error in a new workspace, too?
"We've changed an array of stories a bit." Do you mean you changed the generated one? I am curious as to why you are declaring the stories in the root .storybook/main.js. This could be causing some issues. I don't know what issues it could be causing, but it could be causing some.
What about the tsconfig.json vs tsconfig.base.json? Does a tsconfig.base.json exist in your root .storybook folder?
Did the migration (nx migrate latest) change any code in your .storybook files? (.storybook/main.js, .storybook/preview.js etc). This is super important for me to understand in order to help you.
Can I see your storybook target in the failing project? You can find that in the failing project's project.json file.

The truth is that I am having trouble reproducing this, to be able to help you properly.

I, again, suggest, you try to create a minimum reproduction in a new Nx workspace and share it with me, and I will be able to give you a definitive solution. But please first try to answer the above questions, especially question number 5. This will help me understand the issue better.

Thank you @davidslaby !!

marckassay · 2022-06-30T18:05:47Z

I believe @davidslaby is experiencing a conflict of differences between JS modules (commonjs and ES). This Storybook issue mentions about a few solutions.

Although I'm not using a stack of the same techs, I haven't experienced what you mentioned in your 'test/main.js' file. Perhaps that's a side effect of what @mandarini mentioned about the entries in stories array.

mandarini · 2022-07-05T08:03:43Z

Hi there @davidslaby ! Do you have any updates on this?

davidslaby · 2022-07-08T13:30:59Z

Hi @mandarini, sorry for late reply. I was off for a few days. I will get back to this on Monday. Thanks a lot for patience :)

mandarini · 2022-07-18T11:13:44Z

Hi there @davidslaby ! Do you still need help with this?

davidslaby · 2022-07-18T12:13:17Z

Hi Katerina, I'm still struggling with that. Unfortunately, I didn't have time last week to stay focused on that.

davidslaby · 2022-07-18T12:15:32Z

I tried to comment all the stories in config, and it didn't help. It shows error in preview.js, looks like it doesn't transpile ES6. There were changes of babel packages, and it stopped working after that. I assume it's because of the new version of babel.

marckassay · 2022-07-18T13:17:10Z

Recently a nxext/nx-extensions PR got merged into main which may help in some way by shedding light on configuration changes. In the description of that PR is a script that should generate a Nx workspace, with Storybook using Webpack 5 and Babel 7. If you run that script, you can now replace the following line:

npm add @nxext/stencil@14.0.3-local.1 --save

with

npm add @nxext/stencil@latest --save

davidslaby · 2022-07-19T17:52:38Z

@mandarini Solved by adding unambiguous in babel.config.js. As we are using ES6 together with Common JS in our app, there was an issue with exports / imports. More about that in official documentation of Babel: https://babeljs.io/docs/en/options#misc-options. Thanks for the support on the way. It was really a pleasure to see the effort :)

mandarini · 2022-07-20T07:06:42Z

Oh wow that' so great!!!! Thank you all!!! Thank you @marckassay for the suggestions! :D

github-actions · 2023-03-22T05:06:05Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

mandarini self-assigned this Jun 27, 2022

mandarini added scope: storybook Issues related to Storybook support in Nx type: bug blocked: repro needed labels Jun 27, 2022

davidslaby closed this as completed Jul 19, 2022

github-actions bot added the outdated label Mar 22, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook error in console after upgrade to 14.3.6 #10919

Storybook error in console after upgrade to 14.3.6 #10919

davidslaby commented Jun 27, 2022

mandarini commented Jun 27, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 28, 2022

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 29, 2022 •

edited

marckassay commented Jun 30, 2022

mandarini commented Jul 5, 2022

davidslaby commented Jul 8, 2022

mandarini commented Jul 18, 2022

davidslaby commented Jul 18, 2022

davidslaby commented Jul 18, 2022

marckassay commented Jul 18, 2022

davidslaby commented Jul 19, 2022

mandarini commented Jul 20, 2022

github-actions bot commented Mar 22, 2023

Storybook error in console after upgrade to 14.3.6 #10919

Storybook error in console after upgrade to 14.3.6 #10919

Comments

davidslaby commented Jun 27, 2022

mandarini commented Jun 27, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 28, 2022 • edited

mandarini commented Jun 28, 2022

mandarini commented Jun 28, 2022 • edited

mandarini commented Jun 28, 2022 • edited

mandarini commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

davidslaby commented Jun 28, 2022

mandarini commented Jun 29, 2022 • edited

marckassay commented Jun 30, 2022

mandarini commented Jul 5, 2022

davidslaby commented Jul 8, 2022

mandarini commented Jul 18, 2022

davidslaby commented Jul 18, 2022

davidslaby commented Jul 18, 2022

marckassay commented Jul 18, 2022

davidslaby commented Jul 19, 2022

mandarini commented Jul 20, 2022

github-actions bot commented Mar 22, 2023

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 28, 2022 •

edited

mandarini commented Jun 29, 2022 •

edited