Migration info v2 to v3

lwc-services

There are some breaking changes between v2 and v3 for lwc-services. For new projects it's not relevant; for projects that you want to migrate, you need to make some minor adjustments.

Module config has moved to lwc.config.json

Some configuration has moved from lwc-services.config.js to lwc.config.json. In particular, the modulesDir option has moved there, and now follows the standard format, using the name modules.

So if you have:

// lwc-services.config.js
module.exports = {
  // ...
  moduleDir: 'path/to/modules'
}

Then you should create a lwc.config.json file containing this:

{
    "modules": [
        { "dir": "path/to/modules" }
    ]
}

Webpack is updated from v4 to v5

Webpack has been updated to v5. Webpack has a migration guide for this.

In terms of lwc-services, you may have to add a webpack.config.js file for Webpack-specific configuration. You can pass this into lwc-services using e.g.:

lwc-services build -w webpack.config.js

or

lwc-services watch -w webpack.config.js

A common thing you might have to do, when upgrading to Webpack v5, is to add fallbacks for Node.js polyfills and globals to your webpack.config.js:

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer'),
      process: require.resolve('process/browser')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ]
};

In the above example, we are adding fallbacks for Buffer and process, but you may need to add other Node polyfills if you see error messages for them.

Note that the devServer option can stay in lwc-services.config.js. It does not need to be added to webpack.config.js.