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"
}
npm install -D browser-sync-webpack-plugin@latest
to update – Gesture