Search code examples
webpackstorybooknrwl-nx

Nx Storybook (Webpack 5) "exports is not defined" and infinite loading

I have upgraded Nx packages to latest version 14.7.5 and it broke my Storybook build which was still using Webpack 4. So I figured updating it to Webpack 5 might fix the problem and after the migration it is successfully building, but the Storybook gets stuck on the main page and infinitely shows the loading animation (XHR call /progress never returns) and in console there is Uncaught ReferenceError: exports is not defined error. This error comes from one of my generated files that is in JS (rest of the files is in TypeScript). I am not sure if the error is causing the infinite loading but it is my only clue.

When I build the Storybook statically it also shows this warning during the compilation:

 export 'AssetService' (reexported as 'AssetService') was not found in './protos/Asset_pb_service' (module has no exports)

which comes from the same file as the error in the console so it might be connected (the files has exports though).

My main Storybook configuration:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  typescript: { reactDocgen: false },
  stories: [],
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: true,
        viewport: false,
      },
    },
    '@nrwl/react/plugins/storybook',
    'storybook-dark-mode'
  ],
};

Storybook configuration of the main app:

// This loads the configuration above
const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../*.stories.mdx',
    '../../../libs/**/*.stories.mdx',
    '../../../libs/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

Storybook package versions:

    "@storybook/addon-docs": "6.5.12",
    "@storybook/addon-essentials": "6.5.12",
    "@storybook/builder-webpack5": "6.5.12",
    "@storybook/core-server": "6.5.12",
    "@storybook/manager-webpack5": "6.5.12",
    "@storybook/react": "6.5.12",

Any help would be appreciated.

Solution

  • The issue was most likely caused by the library ts-protoc-gen which is generating the JS files that caused the error and seems to be connected with this issue. We have finally resolved this issue by removing .babelrc file from the library with the generated files, which somehow solved the compilation of said JS files when they were indirectly imported.