search

webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
MIT License
12.56k stars 483 forks source link

Unable to run with webpack 5 #529

Closed AbstractAlao closed 1 year ago

AbstractAlao commented 1 year ago

Issue description

I am getting the following error trying to run the webpack analyzer

$ webpack --profile --json > stats.json; webpack-bundle-analyzer ./stats.json
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'WEBPACK_BUILD'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?,
 loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?
, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           WEBPACK_BUILD: …
         }
       })
     ]
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Technical info

My webpack.config.js

const webpack = require('webpack');
const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = function override(config) {
  if (config.resolve === undefined || config.resolve === null)
    config.resolve = { fallback: {} };

  const fallback = config.resolve.fallback;

  Object.assign(fallback, {
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
  });

  config.resolve.fallback = fallback;

  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
    new BundleAnalyzerPlugin(),
  ]);

  return config;
};

my package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "private": true,
  "dependencies": {
    "aos": "^2.3.4",
    "nth-check": "^2.1.1",
    "path-browserify": "^1.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^18.2.0",
    "react-minimal-pie-chart": "^8.3.0",
    "react-redux": "^7.2.8",
    "react-router-dom": "^6.4.0",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "stream": "npm:stream-browserify@^3.0.0",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.5",
    "typescript": "^4.8.3",
    "web-vitals": "^2.1.2",
    "web3": "^1.8.0",
    "web3-eth-contract": "^1.8.0"
  },
  "author": "xxx",
  "license": "MIT",
  "scripts": {
    "git-info": "node src/gitInfo.js",
    "start": "npm run git-info && react-app-rewired start",
    "build": "npm run git-info && react-app-rewired build",
    "test": "npm run git-info && react-app-rewired test",
    "report": "webpack --profile --json > stats.json; webpack-bundle-analyzer ./stats.json",
    "eject": "npm run git-info && react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/runtime": "^7.19.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "react-scripts": "^5.0.1",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.10.0"
  }
}
npx envinfo --system --binaries --npmPackages='*webpack*' --npmGlobalPackages=webpack-bundle-analyzer

  System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 1.22 GB / 15.73 GB
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    webpack: ^5.74.0 => 5.74.0
    webpack-bundle-analyzer: ^4.6.1 => 4.6.1
    webpack-cli: ^4.10.0 => 4.10.0

Debug info

How do you use this module? As CLI utility or as plugin? plugin If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json) webpack --profile --json > stats.json; webpack-bundle-analyzer ./stats.json If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true }))

What other Webpack plugins were used?

It would be nice to also attach webpack stats file. It can be generated using these options:

new BundleAnalyzerPlugin({
  analyzerMode: 'disabled',
  generateStatsFile: true,
  // Excludes module sources from stats file so there won't be any sensitive data
  statsOptions: { source: false }
})

stats.json will be created in Webpack bundle output directory. stats.json is empty

valscion commented 1 year ago

Hi, this looks like it's a webpack configuration issue and not related to this plugin.

AbstractAlao commented 1 year ago

Yes, you were right. I updated it to the following and it started working 

const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      assert: require.resolve('assert'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify'),
      url: require.resolve('url'),
    },
  },
  plugins: [
    new ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
    new BundleAnalyzerPlugin(),
  ],
};