This article records the GridManager table component upgrade [email protected] process and encountered problems, including build, start, test and other related commands to fix the problem.

Testing compatibility

Try adding the following options to [email protected] to test the compatibility of the current environment with [email protected].

module.exports = {
  // ...
  node: {
    Buffer: false.process: false}};Copy the code

If something goes wrong, you need to update the node version, which is currently v14.0.0. Note: This code needs to be cleared after the test.

Upgrading dependency packages

  • webpack: v4.x=> v5.x
  • webpack-cli: v3.x => v4.x

Problems encountered during the upgrade

NPM run start error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.
Copy the code

The solution is to update other dependencies:

  • css-loader: 2.x => 5.x
  • less-loader: 4.x => 8.x
  • mini-css-extract-plugin: 0.x=> 1.x

2, NPM run build error

Although the build command ends with an error, the build file has been built

[webpack-cli] [Error: EISDIR: illegal operation on a directory, open '/Users/baukh/work/GridManager/dist'] {
  errno: -21,
  code: 'EISDIR',
  syscall: 'open',
  path: '/Users/baukh/work/GridManager/dist'
}
Copy the code

This is because the API of copy-webpack-plugin is changed after the version is updated to 7.*. The solution is to update the configuration items according to the new API.

3, NPM run test error

The current project is using karma unit test. After updating [email protected], the normally executed unit test reported an error with the error message is not function.

This is because chunk is enabled by default in [email protected], which can be resolved by adding the specified item to karma-wepback:

optimization: {
    runtimeChunk: false,
    splitChunks: false
},
Copy the code

For more details, please click the relevant link.

4. An error occurs when the JSON file is imported

Json files need to use named exports, and [email protected] no longer supports deconstruction from import

Import {version} from './package.json'; // import pak from './package.json'; const version = pak.version;Copy the code

Execute successfully

When all scripts are successfully executed, the volume built by [email protected] is 83773, which is about 1.2% less than that built by [email protected] (84809). If the project itself is large enough, the volume savings can be significant.

To view detailed configuration information, click on Github.