找不到模块:错误:无法在中解析'os‘

Question

我正在做一个Laravel/Vue3项目。当我运行"npm run dev“时，突然收到37条错误消息。我想这跟mix或者是webpack的配置有关。但我不是这方面的专家。很可能我犯了一个简单的错误，但我找不到它。

前几条错误消息(总共有37条！)：

 npm run development


> @ development C:\xampp\htdocs\testBankjes
> mix

i Compiling Mix
 Mix: Compiled with some errors in 2.18s
WARNING in ./node_modules/laravel-mix/src/Dependencies.js 138:16-37
Critical dependency: the request of a dependency is an expression

ERROR in ./node_modules/clean-css/lib/options/format.js 1:22-39
Module not found: Error: Can't resolve 'os' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\options'

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

ERROR in ./node_modules/clean-css/lib/options/rebase-to.js 1:11-26
Module not found: Error: Can't resolve 'path' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\options'

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

ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\reader'

ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js 2:11-26
Module not found: Error: Can't resolve 'path' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\reader'

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

我的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": {
        "@vue/compiler-sfc": "^3.2.8",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^16.5.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.36",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/vue-fontawesome": "^3.0.0-4",
        "bootstrap": "^5.1.1",
        "leaflet": "^1.7.1",
        "mitt": "^3.0.0",
        "vue": "^3.2.8"
    }
}

和我的webpack.mix.js：

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

非常感谢您的帮助。

休伯特

Answer 1

在app.js主文件中，查找如下代码行：

 import File from 'laravel-mix/src/File';

删除这行代码，您的工作就会成功编译。