Laravel 8 Tailwind：webpack-cli TypeError：compiler.plugin 不是函数

Question

我想在 Laravel 8 中安装 Tailwind。我已按照文档操作并输入以下内容（未显示错误）。

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

然后我无法成功运行，npm run watch因为安装最新的PostCSS版本v8时出现问题。我查看了一个解决方案，根据Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to beinstalled，我必须升级 Webpack。然后我输入：

npm install laravel-mix@latest

根据文档https://laravel-mix.com/docs/6.0/upgrade ，这包括最新的 Webpack 版本。（没有显示错误）

如果我输入，npm run watch,则会出现以下错误；我不明白，在谷歌中没有找到任何东西......我正在寻求一些帮助：

npm WARN 生命周期 用于脚本的节点二进制文件是 /snap/bin/node，但 npm 使用 /snap/node/3292/bin/node 本身。使用该 --scripts-prepend-node-path选项来包含执行 npm 的节点二进制文件的路径。

@ watch /home/x/Documents/projets/web/site_perso npm 运行开发 -- --watch

npm WARN 生命周期 用于脚本的节点二进制文件是 /snap/bin/node，但 npm 使用 /snap/node/3292/bin/node 本身。使用该 --scripts-prepend-node-path选项来包含执行 npm 的节点二进制文件的路径。

@开发/home/x/Documents/projets/web/site_perso cross-env NODE_ENV=开发node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js " - 手表”

[webpack-cli] TypeError：compiler.plugin 不是 BrowserSyncPlugin.apply 中的函数（/home/x/Documents/projets/web/site_perso/node_modules/browser-sync-webpack-plugin/lib/BrowserSyncPlugin.js:22： 12）在createCompiler（/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:74:12）处创建（/home/x/Documents/projets/web/site_perso/node_modules/） webpack/lib/webpack.js:127:16) 在 webpack (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:135:47) 在 WebpackCLI.f [作为 webpack] (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/index.js:55:16) 在 WebpackCLI.createCompiler (/home/x/Documents/projets/web/site_perso/node_modules/webpack- cli/lib/webpack-cli.js:1845:29) 在异步 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）位于 async Promise.all （索引 1）处的 async 命令。(/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1289:13) npm 错误！代码 ELIFECYCLE npm 错误！errno 2 npm 错误！@开发： cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"npm 错误！退出状态 2 npm ERR！npm 错误！@开发脚本失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
/home/x/.npm/_logs/2021-06-06T08_40_27_985Z-debug.log npm 错误！代码 ELIFECYCLE npm 错误！errno 2 npm 错误！@观看：npm run development -- --watchnpm 错误！退出状态 2 npm ERR！npm 错误！@watch 脚本失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
/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）。