nx: Storybook error in console after upgrade to 14.3.6

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'],
};

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 26 (23 by maintainers)

Most upvoted comments

@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 😃

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

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 😃

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.

Your support is wonderful! Thank you 😃