Laravel 8 Tailwind: webpack-cli TypeError: compiler.plugin is not a function

Question

我想在 Laravel 8 中安装 Tailwind。我已经按照 documentation 并输入了以下内容（没有显示错误）。

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

然后我无法成功运行 npm run watch 因为安装最新的PostCSS 版本v8 时出现问题。我看过一个解决方案，根据，我不得不升级 Webpack。然后我输入：

npm install laravel-mix@latest

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

如果我输入 npm run watch, 我有以下错误；我不明白，也没有在 Google 中找到任何内容...我正在寻求帮助：

npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3292/bin/node itself. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.

@ watch /home/x/Documents/projets/web/site_perso npm run development -- --watch

npm WARN lifecycle 用于脚本的节点二进制文件是 /snap/bin/node 但是 npm 正在使用 /snap/node/3292/bin/node 本身。使用 --scripts-prepend-node-path 包含节点路径的选项二进制 npm 是用
执行的

@ development /home/x/Documents/projets/web/site_perso cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

[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) 在异步 Promise.all（索引 1）在异步命令。 (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1289:13) 错误！代码 ELIFECYCLE npm ERR！ 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 ERR!
/home/x/.npm/_logs/2021-06-06T08_40_27_985Z-debug.log npm 错误！代码生命周期 npm 错误！ errno 2 npm 错误！ @手表：npm run development -- --watch npm 错误！退出状态 2 npm ERR！错误！ @watch 脚本失败。错误！这可能不是 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）。

Laravel 8 Tailwind: webpack-cli TypeError: compiler.plugin is not a function

Laravel 8 Tailwind: webpack-cli TypeError: compiler.plugin is not a function

laravel

npm

webpack

tailwind-css

laravel-mix