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

1

5

I want to install Tailwind in Laravel 8. I've followed the documentation and typed the following (showed no error).

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

Then I could not successfully run npm run watch because there was a problem with installing the latest PostCSS version, v8. I've looked at a solution, and according to Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed, I had to upgrade Webpack. Then I typed:

npm install laravel-mix@latest

This includes the latest Webpack version, according to the docs https://laravel-mix.com/docs/6.0/upgrade. (no error was shown)

If I type npm run watch, I have the following error; I don't understand it and didn't find anything in Google... I'm looking for some help:

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 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.

@ 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 is not a function at BrowserSyncPlugin.apply (/home/x/Documents/projets/web/site_perso/node_modules/browser-sync-webpack-plugin/lib/BrowserSyncPlugin.js:22:12) at createCompiler (/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 [as webpack] (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/index.js:55:16) at WebpackCLI.createCompiler (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1845:29) at async WebpackCLI.buildCommand (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1952:20) at async Command. (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:742:25) at async Promise.all (index 1) at async Command. (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1289:13) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/home/x/.npm/_logs/2021-06-06T08_40_27_985Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ watch: npm run development -- --watch npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ watch script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/home/x/.npm/_logs/2021-06-06T08_40_28_010Z-debug.log

Here is an extract of my package.JSON file, for dependencies:

"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"
}
Gentile answered 6/6, 2021 at 8:49 Comment(0)
G
11

I've solved the issue by reinstalling browser-sync-webpack-plugin which, according to the error, is the plugin that causes the error. Here are the following commands that solved my problem:

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

It upgraded this plugin's package.JSON's line from "^2.0.1" to "^2.3.0".

I think I should update all my NPM plugins (see NPm commands npm outdated and npm update).

Gentile answered 7/6, 2021 at 20:17 Comment(1)
Or just run npm install -D browser-sync-webpack-plugin@latest to updateGesture

© 2022 - 2024 — McMap. All rights reserved.