How can I translate the instructions/code that would work on the webpack.config.js to the vue.config.js file?

Question

I'm using vue-cli which, instead of creating a webpack.config.js uses a vue.config.js:

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
 
})

as soon as Install a specific npm package Vue is trowing 17 errors:

Vue Cli uses the latest version of webpack (5). But this new NPM package I've installed is only stable of webpack version 4:

On their npmjs page they say:

If you want to use this package on your project with Webpack v5 you need to add the fallback to your webpack.config.js file:

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

How can I translate the instructions/code that would work on the webpack.config.js instructions, to the vue.config.js file? I know this is probably a basic JS thing but I'm stuck.

Is there anybody out there that could point me in the right direction?

many thanks in advance

Answer 1

Can you try this? found this on vue-cli docs

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        resolve: {
            fallback: {
                assert: require.resolve('assert'),
                http: require.resolve('stream-http'),
                https: require.resolve('https-browserify'),
                os: require.resolve('os-browserify/browser'),
                stream: require.resolve('stream-browserify'),
            },
        },
    }
})