Laravel 8尾风: webpack-cli TypeError: compiler.plugin不是一个函数

Question

我想在Laravel 8中安装Tailwind。我遵循了文档并输入了以下内容(没有显示错误)。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

然后我无法成功地运行npm run watch，因为安装最新的PostCSS版本v8有问题。我研究了一个解决方案，根据顺风CSS Laravel混合误差- PostCSS 8将被安装的说法，我不得不升级Webpack。然后我打字：

npm install laravel-mix@latest

根据docs https://laravel-mix.com/docs/6.0/upgrade的说法，这包括最新的Webpack版本。(没有显示错误)

如果我输入npm run watch,，我有以下错误；我不理解它，也没有在谷歌中找到任何东西。我在找人帮忙：

npm警告生命周期--用于脚本的节点二进制是/snap/bin/node，但npm使用的是/snap/节点/3292/bin/节点本身。使用--scripts-prepend-node-path选项包含执行节点二进制npm的路径。 @ watch /home/x/Documents/projets/web/site_perso npm运行开发-监视npm警告脚本的生命周期，用于脚本的节点二进制为/snap/bin/节点，但npm使用的是/snap/ node /3292/bin/node本身。使用--scripts-prepend-node-path选项包含执行节点二进制npm的路径。 @ development /home/x/Documents/projets/web/site_perso交叉-env NODE_ENV=development node_node/webpack/bin/webpac.js-进度NODE_ENV=development“home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:74:12) at create (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:127:16) at webpack (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:135:47) at WebpackCLI.f webpack at WebpackCLI.createCompiler (/home/x/Documents/projets/web )异步命令处的/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1845:29) at异步WebpackCLI.buildCommand (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1952:20)。异步命令下的异步(/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:742:25) (索引1)。(/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1289:13) npm错误！代码ELIFECYCLE npm错误！errno 2 npm ERR！@ cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" errno！退出状态2 npm错误！国家预防机制错误！@ development脚本失败。国家预防机制错误！这可能不是npm的问题。上面可能还有额外的日志输出。 国家预防机制错误！这个运行的完整日志可以在: npm中找到！ /home/x/.npm/_logs/2021-06-06T08_40_27_985Z-debug.log npm错误！代码ELIFECYCLE npm错误！npm run development -- --watch npm错误！@观看: npm错误！退出状态2 npm错误！国家预防机制错误！@ watch脚本失败。国家预防机制错误！这可能不是npm的问题。上面可能还有额外的日志输出。 国家预防机制错误！这个运行的完整日志可以在: npm中找到！ /home/x/.npm/_logs/2021-06-06T08_40_28_010Z-debug.log

下面是我的package.JSON文件的摘录，用于依赖关系：

"devDependencies": {
    "autoprefixer": "^10.2.6",
    "axios": "^0.19",
    "browser-sync": "^2.26.13",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.19",
    "less": "^3.12.2",
    "less-loader": "^7.0.2",
    "lodash": "^4.17.19",
    "resolve-url-loader": "^3.1.0",
    "tailwindcss": "^2.1.4",
    "vue-template-compiler": "^2.6.12"
}

Answer 1

我通过重新安装browser-sync-webpack-plugin解决了这个问题，根据错误，它是导致错误的插件。下面是解决我的问题的以下命令：

npm uninstall browser-sync-webpack-plugin
npm install browser-sync-webpack-plugin

它将这个插件的package.JSON行从"^2.0.1“升级到"^2.3.0”。

我认为我应该更新我所有的NPM插件(参见NPm命令npm outdated和npm update)。