找不到模块：错误：无法解析“计时器”

Question

我正在尝试将此包https://github.com/shwilliam/vue-scrollin安装到我的 laravel + vue 项目中。用laravel mix编译后，出现以下错误：

找不到模块：错误：无法解析“\node_modules\vue-scrollin\dist”中的“计时器”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - 安装 'timers-browserify' 如果你不这样做想要包含一个polyfill，你可以使用一个空模块，如下所示：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 的任何人，这里有一个 PR，其中包含已删除的 polyfills 列表