Error after run npm run dev :
enter image description here
package.json config:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0"
}
}
I have node version 14.13.1 and npm version 6.14.8
How resolving it's? Thanks!
Related
I'm having an error running npm run watch with laravel 8 when running I get this error:
Previously I got this error "cross-env" is not recognized as an internal or external command and run these commands:
npm uninstall cross-env npm install cross-env --no-bin-links npm run watch
this would be more my package.json configuration
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#tailwindcss/forms": "^0.2.1",
"alpinejs": "^2.8.2",
"autoprefixer": "^10.1.0",
"axios": "^0.19",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"tailwindcss": "^2.0.2",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"#tailwindcss/forms": "^0.3.3",
"cross-env": "^7.0.3",
"node-sass": "^6.0.1"
}
when executing npm run watch it does not compile and the following appears
ERROR Failed to compile with 2 errors 10:22:41
error in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss (c:\laragon\www\projet1\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
at c:\laragon\www\projet1\node_modules\postcss-loader\src\index.js:140:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at c:\laragon\www\projet1\node_modules\webpack\lib\NormalModule.js:316:20
at c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (c:\laragon\www\projet1\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at c:\laragon\www\projet1\node_modules\postcss-loader\src\index.js:208:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I am trying explore Tailwindcss and want to add it to a new Wordpress project. I am using Laravel Mix for compiling assets.
After setting up everything and running "npm run dev", i get the following error:
ERROR in ./assets/src/main.css Module build failed (from
./node_modules/css-loader/index.js): ModuleNotFoundError: Module not
found: Error: Can't resolve './node_modules/tailwindcss/base.css' in
...
My current settings are based on this article:
https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme
Here's code for my package.json
{
"name": "tailwind-wordpress",
"version": "1.0.0",
"description": "WP Theme with Tailwind CSS",
"dependencies": {
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.0",
"postcss-import": "^12.0.1",
"tailwindcss": "^1.1.2"
},
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
}
And this is contents of webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
require('tailwindcss'),
])
And main.css:
#import 'node_modules/tailwindcss/base.css';
#import 'node_modules/tailwindcss/components.css';
#import 'node_modules/tailwindcss/utilities.css';
Any ideas how to solve this issue? All help is highly appreciated.
if you're using webpack and all that jazz you should use
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
I'm running a Laravel project, and I have some vue files which I need to change (for example, erasing some stuff), but the thing is I erase them from the vue file, but they are still appearing on the website. If I modify anything else, like a welcome.blade or whatsoever, it does work, but not with this vue files.
Only time I got it to work was stopping the project, running npm run dev, npm run watch --poll and starting the server again with php artisan serve, but when I tried doing it again, it didn't work.
I don't know if I am missing something obvious here. Please help my out :) and also, if I'm missing some information here please tell me so I can post it so someone can help me. Thanks!
This is my package.json that is on my root folder.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
}
}
Well your file need to be compile so you need to run when editing npm run watch and you'll see live changement on reload and possibly some error discarding on the terminal you are running it from.
This is explicitly specify in the "tips" of Laravel documentation about Vue.
when i am running command npm run dev i got error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
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.
in package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue-template-compiler": "^2.6.10"
}
}
i have coding in composer.json
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",`enter code here`
"require": {
"php": "^7.2",
"fideloper/proxy": "^4.0",
"laravel/framework": "^6.0",
"laravel/tinker": "^1.0",
"laravel/ui": "^1.0"
},
"require-dev": {
"facade/ignition": "^1.4",
"fzaninotto/faker": "^1.4",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^3.0",
"phpunit/phpunit": "^8.0"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/"
},
"classmap": [
"database/seeds",
"database/factories"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
}
}
Not sure why you call the config inside webpack node modules. But you should not call webpack directly inside node_modules. Let try this step by step
npm i --save-dev webpack
npm i --save-dev webpack-dev-server
I suggest to move node_modules/laravel-mix/setup/webpack.config.js to at the root folder, same the level of package.json. Then you can call the webpack directly
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production webpack --no-progress --hide-modules"
},
If still got error. May the error come from your webpack.config. Could you please post the content of it here. Thanks
I have the following package.json
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"installreact": "npm install react react-dom --save",
"installbabel": "npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev",
"installwebpack": "npm install webpack webpack-dev-server --save-dev",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1.4",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"webpack": "^3.11.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"material-ui": "^1.0.0-beta.38",
"material-ui-icons": "^1.0.0-beta.36",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2"
}
}
When I run npm install, cross-env directory is not created in node_modules and there is no error. Only message: up to date in 1.337s.
I tried to uninstall and install the package again, but nothing changes.
Install it globally like I said above or run it using the path. However, npm should set everything in bin folder in the path when running npm script.
"dev": "./node_modules/.bin/cross-env ..."
If the cross-env executable is not within the bin folder. Make sure about 3 things:
You have cross-env as a dependency in your package.json
Delete the folders cross-env and cross-spawn from node_modules folder.
Make sure you haven't got a .npmrc file with bin-links options set to false.
Run npm install again.
Should create the executable in .bin folder within node_modules folder
my issue resolved with
1:You have cross-env as a dependency in your package.json
2:Delete the folders cross-env and cross-spawn from node_modules folder.
3:Make sure you haven't got a .npmrc file with bin-links options set to
false.
(Running npm config ls -l will show you all the implicit settings for
npm, including what it thinks is the right place to put the .npmrc.
But if you have never logged in (using npm login) it will be empty.
Simply log in to create it.)
4:Run npm install again.
First, run:
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
Then run the command
npm install cross-env
npm install
and then you can run