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

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