Attempting to use react in a Laravel project.
I have run npm install
my webpack.mix.js file is mix.react('resources/assets/js/app.js', 'public/js');
and running npm run dev
gives me an error
/Users/jacobchen/www/fusion2/webpack.mix.js:14
mix.react('resources/assets/js/app.js', 'public/js');
^
TypeError: mix.react is not a function
webpack.mix.js
const { mix } = require('laravel-mix');
mix.react('resources/assets/js/app.js', 'public/js');
Anyone had any experience with this?
Best Regards
Jacob
You additionally need to set up laravel-mix in npm script section in package.json.
From Laravel's package.json:
"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"
},
Full example here:
https://github.com/laravel/laravel/blob/master/package.json
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have tried to run npm run dev and got this error:
I've tried:
composer update
rm -rf node_modules
npm cache clean
npm install
npm outdated
npm install
npm run dev
and still didn't work. Can someone help me?
Please check laravel-mix version and scripts commands in package.json file
for laravel-mix 5.*.*
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --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 --config=node_modules/laravel-mix/setup/webpack.config.js"
}
for laravel-mix 6.*.*
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
Well, it looks like some files got corrupt when you run npm install
so I f you confused about some settings,
I suggest you to build new project and run again npm install && npm run dev
I am trying to run npm run build command on local server but unfortuntly getting error using vuejs. please help me how can i resolve that thanks.
package.json
"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"
},
ERROR
developer#developer-ThinkCentre-M93p:~/htdocs/yourstitichart/yourstitichart.com/cms$ npm run
build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/developer/.npm/_logs/2021-03-14T19_37_00_327Z-debug.log
developer#developer-ThinkCentre-M93p:~/htdocs/yourstitichart/yourstitichart.com/cms$
you dont have a script as build
"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",
"build":"write something here"//<-------
},
It looks like there is no build script. Looking at your package.json you probly want to run
npm run prod
To achieve the same behaviour
I am going to test vue components in Laravel application environment.
My package.json "scripts" are following:
"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",
"test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js"
},
When I ran "npm run test" it shows a callstack with following error. Did I do anything wrong?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # test: `mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I think you have to setup laravel-mix webpackConfig.
Ex.
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources/assets/'),
},
},
I've split frontend and admin webpack.mix files like so:
webpack.mix.js:
let mix = require('laravel-mix');
if (process.env.section) {
require(`${__dirname}/webpack.mix.${process.env.section}.js`);
}
Then a seperare webpack.mix.admin.js and webpack.mix.website.js file for controlling the mix with the following in package.json:
"scripts": {
"dev": "npm run development",
"development": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env process.env.section=website NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env process.env.section=website 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 process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"admin-dev": "npm run admin-development",
"admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"admin-watch": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"admin-watch-poll": "npm run admin-watch -- --watch-poll",
"admin-hot": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"admin-prod": "npm run admin-production",
"admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
It's all running well but I can only run npm run watch on the frontend when ideally I want to watch both frontend and admin files for changes.
I've tried npm run watch & npm run admin-watch but the latter is ignored
At the moment I am watching the frontend files and running npm run admin-prod as and when required but this has started to get a little frustrating
I don't know if you are still looking for an answer, but in my configuration I'm able to run 2 scripts in parallel with npm-run-all. Take a look to lint task in my package.json:
"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",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"assets": "gulp assets",
"lint:js": "eslint --max-warnings 0 app/Resources/frontend/scripts/",
"lint:css": "stylelint app/Resources/frontend/",
"lint": "run-p lint:css lint:js",
"lint:fix": "run-p lint:css --fix lint:js --fix"
},
Hope this helps :)
I'm having a problem with laravel 5.4 I'm trying to put a personal js library and I'm not getting it
I'm also not able to remove the vue.js
I think it's in the compilation of the lavender mix
my files
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": "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": "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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4"
}
}
assests/js/app.js
require('./bootstrap');
webpack.mix.js
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
.js('resources/assets/js/cidades-estados-1-4.js', 'public/js');
I tried an npm update and then an npm run dev or prod but it does not update, it is still with the vue.js that I removed
My app.js is giant