Level 63
Perhaps your issue comes from the settings of InertiaJS.
You have an error around the app id.
Can you show your blade base template you're using to display your VueJS views and the content of your app.js file ?
Oct 11, 2021
5
Level 23
Use Laravel mix to share sass variables between javascript and sass
So,here is an article about config webpack to support sharing variables between javascript and sass. https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
I installed required packages and config mix file, and run npm run hot, but some error occurs. Here is my package.json file and webpack.mix.js file.
package.json
{
"private": true,
"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"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.13",
"axios": "^0.21",
"css-loader": "^6.4.0",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"node-sass": "^6.0.1",
"postcss": "^8.1.14",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.3.0",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"@inertiajs/inertia": "^0.10.1",
"@inertiajs/inertia-vue": "^0.7.2",
"@inertiajs/progress": "^0.2.6",
"core-js": "^3.18.2",
"element-ui": "^2.15.6",
"fuse.js": "^6.4.6",
"js-cookie": "^3.0.1",
"normalize.css": "^8.0.1",
"screenfull": "^5.1.0",
"vue": "^2.6.14",
"vuex": "^3.6.2"
}
}
webpack.mix.js
mix.js('resources/js/main.js', 'public/js')
.vue()
.webpackConfig({
resolve: {
alias: {
'@': path.resolve('resources/js')
}
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
});
and errors:
ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/element-ui/lib/theme-chalk/index.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\node_modules\element-ui\lib\theme-chalk\index.css Unknown word
1 |
> 2 | import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
ERROR in ./node_modules/normalize.css/normalize.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\node_modules\normalize.css\normalize.css Unknown word
1 |
> 2 | import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
ERROR in ./resources/js/components/ErrorLog/index.vue?vue&type=style&index=0&id=53f9e8ca&scoped=true&lang=css& (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/ErrorLog/index.vue?vue&type=style&index=0&id=53f9e8ca&scoped=true&lang=css&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\resources\js\components\ErrorLog\index.vue Unknown word
1 |
> 2 | import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
ERROR in ./resources/js/components/Hamburger/index.vue?vue&type=style&index=0&id=0727e9b1&scoped=true&lang=css& (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Hamburger/index.vue?vue&type=style&index=0&id=0727e9b1&scoped=true&lang=css&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\resources\js\components\Hamburger\index.vue Unknown word
1 |
> 2 | import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
ERROR in ./resources/js/components/SvgIcon/index.vue?vue&type=style&index=0&id=27e6d636&scoped=true&lang=css& (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/SvgIcon/index.vue?vue&type=style&index=0&id=27e6d636&scoped=true&lang=css&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\resources\js\components\SvgIcon\index.vue Unknown word
1 |
> 2 | import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
ERROR in ./resources/js/layout/components/Sidebar/Item.vue?vue&type=style&index=0&id=fbfd6cd0&scoped=true&lang=css& (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/layout/components/Sidebar/Item.vue?vue&type=style&index=0&id=fbfd6cd0&scoped=true&lang=css&)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) D:\sandbox\inertia-element-admin\resources\js\layout\components\Sidebar\Item.vue Unknown word
1 |
> 2 | import API from "!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
webpack compiled with 6 errors
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: D:\sandbox\inertia-element-admin\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -appID "Laravel Mix" -pipeName \.\pipe\notifierPipe-98c85223-9a68-47ac-ad8f-48c89fe3437e -p D:\sandbox\inertia-element-admin\node_modules\laravel-mix\icons\laravel.png -m "Error: !!../../../laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!../../../postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!../../../style-loader/dist/cjs.js!../../../css-loader/dist/cjs.js!../../../sass-loader/dist/cjs.js!./index.css
SyntaxError: SyntaxError
Level 23
@vincent15000 ok，here is my app.js
import Vue from 'vue'
import store from './store'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'
import { Link } from '@inertiajs/inertia-vue'
import SvgIcon from '@/components/SvgIcon'
import Layout from '@/layout'
import 'normalize.css/normalize.css'
import './styles/element-variables.scss'
import '@/styles/index.scss'
require('element-ui/lib/theme-chalk/index.css');
Vue.use(require('element-ui'))
Vue.mixin({ methods: { laRoute: window.route } })
Vue.component('inertia-link', Link)
Vue.component('svg-icon', SvgIcon)
InertiaProgress.init()
createInertiaApp({
resolve: name => {
const page = require(`./views/${name}`).default
page.layout = page.layout || Layout
return page
},
setup({ el, App, props }) {
new Vue({
store,
render: h => h(App, props),
}).$mount(el)
},
})
and layout.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
{{-- <link href="{{ mix('/css/app.css') }}" rel="stylesheet"> --}}
<script src="{{ mix('/js/main.js') }}" defer></script>
<script>
window.laMenu = {!! json_encode($_menu) !!};
</script>
@routes
</head>
<body>
@inertia
</body>
</html>
Level 63
@russellxu All your errors seem to be with the style-loader package. But I really don't know how to solve your problem. Have you tried to delete all the node_modules folder and reinstall them with npm install ? I had a problem with intertia / vuejs / element-plus too and after reinstalling all node modules, it worked fine.
Level 23
It seems to be the problem which laravel mix has default loader of css, use mix.override to override default loader. @vincent15000
1 like
Level 1
@russellxu Could you share the way you solved the problem ?? Thanks !
Please or to participate in this conversation.