Module not found: Error: Can't resolve 'timers'

Question

i'm trying to install this package https://github.com/shwilliam/vue-scrollin to my laravel + vue project. after compiling with laravel mix, the following error appeared:

Module not found: Error: Can't resolve 'timers' in '\node_modules\vue-scrollin\dist'

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: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "timers": false }

I followed the given instructions but it gives me the same errors.

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
        .sass('resources/css/app.scss', 'public/css/app.css')
        .postCss('resources/css/app.css', 'public/css', [
            //
        ])
        .webpackConfig(require('./webpack.config'));

webpack.config.js

module.exports = {
    resolve: {
        fallback: { "timers": require.resolve("timers") }
    },
};

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
        "@fortawesome/fontawesome-svg-core": "^1.2.35",
        "@fortawesome/free-regular-svg-icons": "^5.15.3",
        "@fortawesome/free-solid-svg-icons": "^5.15.3",
        "@fortawesome/vue-fontawesome": "^3.0.0-3",
        "@vue/compiler-sfc": "^3.0.7",
        "axios": "^0.21",
        "bulma": "^0.9.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "particles.vue3": "^1.3.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-router": "^4.0.5",
        "vue-scrollin": "^0.1.2",
        "timers-browserify": "^2.0.12"
    }
}

Answer 1

You almost got it. webpack.config.js should be:

module.exports = {
    resolve: {
        fallback: { "timers": require.resolve('timers-browserify') }
    },
};

Just change the package in the require.resolve() to what the warning suggests.

For anyone who comes here with a polyfills-problem or about to migrate from webpack 4 to 5, here's the PR with a list of removed polyfills