laravel - 找不到模块 : Error: Can't resolve 'timers'

Question

我正在尝试安装这个包 https://github.com/shwilliam/vue-scrollin到我的 laravel + vue 项目。用laravel mix编译后出现如下错误:

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 modulesby default. This is no longer the case. Verify if you need this moduleand 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 }

我按照给定的说明进行操作，但它给了我同样的错误。

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") }
    },
};

包.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

你几乎明白了。 webpack.config.js 应该是:

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

只需将 require.resolve() 中的包更改为警告建议的内容即可。

对于来到这里 遇到 polyfills 问题或即将从 webpack 4 迁移到 5 的任何人，here's the PR with a list of removed polyfills