Nx Storybook Webpack“开发”模式

Question

I'm trying to get my Storybook to stop outputting minified JS and subsequent untraceable errors... It seems like it might be due to the way Nx configures Webpack out of the box? I can't seem to figure out how to alter this though

// .storybook/webpack.config.js
/**
 * Export a function. Accept the base config as the only param.
 * @param {Object} options
 * @param {Required<import('webpack').Configuration>} options.config
 * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
 */
module.exports = async ({ config, mode }) => {
  // Make whatever fine-grained changes you need

  // Return the altered config
  return config;
};

// .../.storybook/webpack.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const rootWebpackConfig = require('../../../.storybook/webpack.config');
/**
 * Export a function. Accept the base config as the only param.
 *
 * @param {Parameters<typeof rootWebpackConfig>[0]} options
 */
module.exports = async ({ config, mode }) => {
  config = await rootWebpackConfig({ config, mode });

  const tsPaths = new TsconfigPathsPlugin({
    configFile: './tsconfig.base.json',
  });

  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);
...

Run cmd: nx run exampleApp:storybook

Any ideas on how to fix?

Answer 1

Workaround from pitops on github

// webpack.config.js
config.plugins.forEach((plugin) => {
    if (plugin.constructor.name === 'DefinePlugin') {
      plugin.definitions['process.env'] = {
        NODE_ENV: JSON.stringify('development'),
        NODE_PATH: JSON.stringify(''),
        PUBLIC_URL: JSON.stringify('.'),
      }
    }
  })