when running npm run watch I get the following warning which makes compilation fail.
WARNING in ./resources/js/app.js 19:9-58
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# multi ./resources/js/app.js ./resources/sass/app.scss /js/app[0]
This is my package.json file:
{
"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": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^8.2.6",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"laravel-mix": "^4.0.14",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"vue": "^2.6.7",
"vue-template-compiler": "^2.6.7",
"axios": "^0.18",
"jquery": "^3.2",
"lodash": "^4.17.4",
"tomtom-sdk": "^1.0.0",
"vue-moment": "^4.0.0",
"vue-parallaxy": "^1.1.1",
"vue2-datepicker": "^2.6.4",
"vue2-editor": "^2.6.6",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"
}
}
My .babelrc file which is currently inside my .vscode folder, dunno if that's the best place...
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
OF COURSE if I remove System.import for import I get the following error:
https://i.imgur.com/UEhxaOh.png
which doesn't makes much sense to me since I have already added the plugins section to my babelrc file...
You're not attach your webpack.mix.js config. But I think your problem will solve with the link below.
Laravel-mix Webpack Public Path
Related
i am using vue in laravel and trying run npm run dev but it is giving me this error
code: 'MODULE_NOT_FOUND',
requireStack: [
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\cli.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack\\bin\\webpack.js'
]
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.0.0",
"and": "0.0.3",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"eslint": "^5.9.0",
"install": "^0.12.2",
"jest": "^23.6.0",
"npm": "^6.4.1",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"vue": "^2.6.11",
"vue-router": "^3.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.3.9",
"vuetify-loader": "^1.4.3",
"vuetify-toast-snackbar": "^0.6.1",
"vuex": "^3.5.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"cross-env": "^7.0.2",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack-dev-server": "^3.1.10"
}
}
How i can solve this issue ?
The development script in your package.json is attempting to load the webpack config from laravel-mix and you don't have it installed
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js",
Just install laravel-mix or create your own webpack config
npm i laravel-mix
And make sure that you have webpack.mix.js on the root directory if you decide to use the mix wrapper
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
I am using Vue for a small part of a laravel app. I'm not using it for images so it's just the js and css inside of the Vue components. It's 256kb and even after minifying it, it's somehow 256kb as well. I just posted my package.json file below. Is there any package that looks like a duplicate? Or any other ways to reduce the bundle size?
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development webpack --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",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^4.0.14",
"lodash": "^4.16.2",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"vue": "^2.0.1",
"vue-loader": "^15.7.0",
"vue-resource": "^1.0.3",
"vue-template-compiler": "^2.6.8"
},
"dependencies": {
"axios": "^0.18.0",
"cross-env": "^5.2.0"
}
}```
I am going to install this admin panel https://coreui.io/ (free version) in my laravel project. It contains a package.json file with the following dependencies:
"dependencies": {
"#coreui/coreui": "^2.1.5",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
"#coreui/icons": "0.3.0",
"bootstrap": "^4.2.1",
"chart.js": "2.7.3",
"core-js": "^2.6.1",
"flag-icon-css": "^3.2.1",
"font-awesome": "4.7.0",
"jquery": "3.3.1",
"pace-progress": "1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.6",
"simple-line-icons": "2.4.1"
},
So I am just going to put these dependencies in my package.json and run
npm install and npm run dev. My project's packaje.json is
{
"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"
},
"dependencies": {
"#coreui/coreui": "^2.1.6",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
"#coreui/icons": "0.3.0",
"bootstrap": "^4.2.1",
"chart.js": "2.7.3",
"core-js": "^2.6.1",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"jquery": "3.3.1",
"node-sass": "^4.11.0",
"pace": "*",
"pace-progress": "1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.6",
"simple-line-icons": "^2.4.1"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"css-loader": "^2.1.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.3"
}
}
But as result I see the following:
So, how I can fix it? What is wrong?
First of all ensure you have installed all packages successfully. I personally recommend you delete your node_modules then run npm install.
I think the problem is that your project doesn't found it's CSS/SASS dependencies.
Ensure to import all CSS/SASS files into your app.scss file.
For example for Simple Line Icons package you should do something like this.
#import "~simple-line-icons/scss/simple-line-icons";
Also double check all js. components
For example in your app.js
import 'coreui';
Edit : I've change my package.json according to the progress of my research it seems to be related to babel, I keep looking. However, I wanted to change the package.json that I present to you from which I will work from now on and try to find the right dependencies.
I am currently facing a problem to integrate the coreui template into laravel 5.7.
I get this error :
Module build failed: SyntaxError: Unexpected token.
It happened in the router file. It crashes at the component import level.
import Vue from 'vue'
import Router from 'vue-router'
// Containers
const DefaultContainer = () =>/* HERE */ import('#/containers/DefaultContainer')
I am new to npm and really don't know how to solve that. So any help will be highly appreciated.
Here is my 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.18",
"cross-env": "^5.1",
"install": "^0.12.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
},
"dependencies": {
"#coreui/coreui": "^2.0.4",
"#coreui/icons": "^0.3.0",
"#coreui/vue": "^2.0.0",
"bootstrap-vue": "^2.0.0-rc.11",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"vue-router": "^3.0.1"
}
}
To solve this problem I just create a file .babelrc on the root of the project and add
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
Now I get an other issue that I ask in other question.
Thank you Boussadjra Brahim for your help :)
I have a fresh installation of Laravel, and I can't get npm run dev to successfully run:
These dependencies were not found:
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
Browsing the Internet for answers, I found issue #289 on Github but the fix proposed doesn't work:
Last line of _variables.scss:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
App.scss:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#import "_app";
My 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"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-env": "^1.2.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"css-loader": "^0.27.1",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.8",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"vue": "^2.1.10",
"webpack": "^2.2.1"
}
}
Any ideas? Thank you in advance!
I managed to get it to work by reverting to the previous version of package.json. You can find it here: https://github.com/laravel/laravel/blob/c1643bf0c59b6864fc55e09cce3bfafc67d29e2a/package.json