Search code examples
javascriptvue.jswebpackbabeljsvuejs3

Vue 3 - How to add Polyfills to ChainWebpack


Using Vue 3, how do I add path-browserify to vue.config.js?

module.exports = {
    chainWebpack: config => {}
}

I am receiving the following error when compiling:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

Solution

  • With @Zack's help, using chainWebpack:

    const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
    
    module.exports = {
        chainWebpack: config => {
            config.plugin('polyfills').use(NodePolyfillPlugin)
        },
    }