How to render primevue button? - vuejs3
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import PrimeVue from "primevue/config";
import Button from 'primevue/button'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css' // core css
import 'primeicons/primeicons.css'
const app = new Vue({
render: h => h(App),
})
app.$mount('#app')
app.use(PrimeVue)
app.component('Button', Button)
App.vue
<template>
<div id="app">
<NewCompany/>
</div>
</template>
<script>
import NewCompany from './components/NewCompany'
export default {
name: 'App',
components: {
NewCompany
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
components/NewCompany.vue
<template>
<div>
<Button label="New">Tes</Button>
test
</div>
</template>
<script>
import Button from 'primevue/button';
export default {
name: 'NewCompany',
components: {
Button
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
border: 1px solid;
}
</style>
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am trying to render button based on this video from primevue documentation: https://www.youtube.com/watch?v=cGTXuyqIwMA&t=623s&ab_channel=CagatayCivici
It shows me no button:
And when inspecting the html, there is this:
<div id="app"><div data-v-964ceb26=""><!----> test </div></div>
Errors in console:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Object(...) is not a function"
found in
---> <Button>
<NewCompany> at src/components/NewCompany.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1893
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
Vue._render # vue.runtime.esm.js?2b0e:3571
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
createChildren # vue.runtime.esm.js?2b0e:6097
createElm # vue.runtime.esm.js?2b0e:5998
patch # vue.runtime.esm.js?2b0e:6521
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
createChildren # vue.runtime.esm.js?2b0e:6097
createElm # vue.runtime.esm.js?2b0e:5998
patch # vue.runtime.esm.js?2b0e:6521
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
eval # main.js?56d7:17
./src/main.js # app.js:1137
__webpack_require__ # app.js:849
fn # app.js:151
1 # app.js:1150
__webpack_require__ # app.js:849
checkDeferredModules # app.js:46
(anonymous) # app.js:925
(anonymous) # app.js:928
Show 23 more frames
vue.runtime.esm.js?2b0e:1897 TypeError: Object(...) is not a function
at Proxy.render (button.esm.js?5cfd:74)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at new Watcher (vue.runtime.esm.js?2b0e:4484)
at mountComponent (vue.runtime.esm.js?2b0e:4088)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459)
at init (vue.runtime.esm.js?2b0e:3137)
at createComponent (vue.runtime.esm.js?2b0e:6022)
at createElm (vue.runtime.esm.js?2b0e:5969)
logError # vue.runtime.esm.js?2b0e:1897
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
Vue._render # vue.runtime.esm.js?2b0e:3571
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
createChildren # vue.runtime.esm.js?2b0e:6097
createElm # vue.runtime.esm.js?2b0e:5998
patch # vue.runtime.esm.js?2b0e:6521
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
createChildren # vue.runtime.esm.js?2b0e:6097
createElm # vue.runtime.esm.js?2b0e:5998
patch # vue.runtime.esm.js?2b0e:6521
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3960
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
Watcher # vue.runtime.esm.js?2b0e:4484
mountComponent # vue.runtime.esm.js?2b0e:4088
Vue.$mount # vue.runtime.esm.js?2b0e:8459
eval # main.js?56d7:17
./src/main.js # app.js:1137
__webpack_require__ # app.js:849
fn # app.js:151
1 # app.js:1150
__webpack_require__ # app.js:849
checkDeferredModules # app.js:46
(anonymous) # app.js:925
(anonymous) # app.js:928
Show 22 more frames
main.js?56d7:18 Uncaught TypeError: app.use is not a function
at eval (main.js?56d7:18)
at Module../src/main.js (app.js:1137)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1150)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
at app.js:928
Why it tells object is not a fuction? Which object it is talking about?
First thing - the installed version is 2, needed to reinstal to version 3. When installing with vue cli, it gives a menu to choose version.
components/NewCompany.vue
<template>
<div>
<Button label="New"></Button>
</div>
</template>
<script>
import Button from "primevue/button";
export default {
name: 'NewCompany',
components: {
Button
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* todo use bootstrap */
div {
border: 1px solid;
text-align: left;
}
</style>
App.vue
<template>
<NewCompany/>
</template>
<script>
import NewCompany from './components/NewCompany.vue'
export default {
name: 'App',
components: {
NewCompany
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css' // core css
import 'primeicons/primeicons.css'
createApp(App).mount('#app')
Related
NUXT 3 [nuxt] [request error] File is not defined
I just have basic nuxt3 starter code but it doesnt work due to cryptic error.
How do I troubleshoot this error? Nuxt troubleshooting is really hard with no relevant messages and no stack trace for the code I wrote.
ℹ Vite client warmed up in 2929ms 10:20:14
ℹ Vite server warmed up in 1633ms 10:20:15
✔ Vite server built in 4061ms 10:20:17
✔ Nitro built in 336 ms nitro 10:20:17
[nuxt] [request error] File is not defined
at $id_a2da3f49 (./.nuxt/dist/server/server.mjs:18735:20)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:26247:3)
nuxt.config
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ['#pinia/nuxt'],
css: ['assets/css/main'],
})
assets/css/
#import "tailwind/_base.css";
#import "tailwind/_components.css";
#import "tailwind/_utilities.css";
#import "_checkbox-radio-switch.css";
#import "_app.css";
#import "_scrollbars.css";
#import "_progress.css";
#import "_table.css";
Layouts -> default.vue
<template>
<div>
<side-menu/>
<slot />
<footer-bar />
</div>
</template>
Pages -> index.vue
Flutter Web : javascript Uncaught ReferenceError: Firebase is not defined?
I am trying to add firebase to my flutter web app, i keep getting this error and i dont know why anymore, i have tried everything
Google chrome console error
3(index):1 Unchecked runtime.lastError: The message port closed before a response was received.
zone.dart:1175 Uncaught ReferenceError: firebase is not defined
at Object.X1 (core.dart:54)
at cloud_firestore_web.dart:36
at Qi.a (async_patch.dart:315)
at Qi.$2 (async_patch.dart:340)
at Object.an (async_patch.dart:245)
at Object.BB (main.dart:8)
at js_helper.dart:2677
at js_helper.dart:2677
at dartProgram (js_helper.dart:2677)
at js_helper.dart:2677
here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="weepay_web">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>weepay_web</title>
<link rel="manifest" href="manifest.json">
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyBqi_VL9n1FGXfK2LifaQjVGIm4XN3Sdkw",
authDomain: "wepay-c6dad.firebaseapp.com",
databaseURL: "https://wepay-c6dad.firebaseio.com",
projectId: "wepay-c6dad",
storageBucket: "wepay-c6dad.appspot.com",
messagingSenderId: "10570764732",
appId: "1:10570764732:web:0f56355e304272af91dbb9",
measurementId: "G-539E2WLH93"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=3346340368');
});
}
</script>
<script src="main.dart.js?v=3346340368" type="application/javascript"></script>
</body>
</html>
here is my pubspec yaml file
name: weepay_web
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.0
dev_dependencies:
flutter_test:
sdk: flutter
firebase_core_web: ^0.2.1
cloud_firestore: ^0.14.3
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
and here is my main.dart file
import 'package:flutter/material.dart';
import './pay_link.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/home",
routes: {
"/home": (context) => Container(color:Colors.orange)
},onGenerateRoute: (settings) {
List<String> pathComponents = settings.name.split('/');
if (pathComponents[1] == 'link') {
return MaterialPageRoute(
builder: (context) {
return PayLinkScreen(payment_link:pathComponents.last);
},
);
} else
return MaterialPageRoute(
builder: (context) {
return Container(color:Colors.orange);
},
);
},
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,
),
);
}
}
...................................................................................................................................................................................
I would love to help you but could you share the error you get in the Chrome console log?
Usually, the problem is that you are using firestore and others but did not include them in the index.html.
For example:
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
If you share more information on your error I could try to help you better but this is my first assumption.
More info you can find on https://firebase.google.com/docs/web/setup#available-libraries
After your additional info, I looked closer at your code and it seems that you do not add the scripts in the proper order.
Please look at my standard Flutter Web App index.html:
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXX",
authDomain: "xxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxx.firebaseio.com",
projectId: "xxxx-id",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "XXXXXXXXXX",
appId: "1:XXXXXXXX:web:XXXXXXXXXX",
measurementId: "G-XXXXXXXXXXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
So all the scripts are in the body not the head.
Svelte app returning "unexpected character # " error when running project
I added a semantic-ui-css-only npm module in a svelte app project. Imported the module import "../node_modules/semantic-ui-css/semantic.css"; in main.js file. When I run npm run dev I get this error Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript) Not sure what the solution is. My hypothesis is the # characters in the CSS causing issues no.
Semantic development is dead but you can replace it with Fomantic
read this issue Is Semantic UI development dead ?
and this The future of Fomantic as v3.0
After talking about this, how about this rollup plugin ?
https://www.npmjs.com/package/rollup-plugin-css-only
main.js
import App from './App.svelte';
import 'fomantic-ui-css/semantic.min.css';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
rollup.config.js
...
import css from 'rollup-plugin-css-only';
...
plugins: [
svelte({
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),
css({ output: './public/build/base.css' }),
...
...
]
index.html
<link rel='stylesheet' href='/build/base.css'>
<link rel='stylesheet' href='/build/bundle.css'>
Laravel & Vue warning issue
I have worked on Laravel & Vue js project.
This is Laravel code
The code works well but there is a warning in developer mode (inspect)
Laravel View code
#extends('layouts/app')
#section('content')
<div id="app">
</div>
#endsection
app.js code
const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');
app.js:74791 [Vue warn]: Cannot find element: #app
warn # app.js:74791
query # app.js:79817
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount # app.js:86018
./resources/js/app.js # app.js:86329
__webpack_require__ # app.js:20
0 # app.js:86576
__webpack_require__ # app.js:20
(anonymous) # app.js:84
(anonymous) # app.js:87
app.js:74791 [Vue warn]: Property or method "single" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Overlap> at resources/js/components/OutwardComponent.vue
<Root>
Your div that needs to reference the Vue should be in Layout file, It might be possible that your div is rendering after the Vue Initialization. Put <div id="app"></div> in layouts/app file and see if its gone or not.
Can't compile material-components with webpack-encore
yarn encore dev fail after setting up material-components I installed material-components using yarn add material-components-web --dev and then configured app.js like this : /* --- CSS --- */ import "../css/normalize.scss"; import "material-components-web/material-components-web.scss" import "../css/layout.scss"; import "../css/style.scss"; /* --- RESOURCES ---*/ import $ from "jquery"; import * as mdc from "material-components-web"; When running yarn encore dev, I get the following error : ERROR Failed to compile with 1 errors 22:30:40 error in ./node_modules/material-components-web/material-components-web.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js): #import "#material/elevation/mixins"; ^ File to import not found or unreadable: #material/elevation/mixins. in /var/www/vhosts/salon-virtuel/node_modules/#material/button/_mixins.scss (line 23, column 1) at runLoaders (/var/www/vhosts/salon-virtuel/node_modules/webpack/lib/NormalModule.js:301:20) at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at context.callback (/var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at Object.render [as callback] (/var/www/vhosts/salon-virtuel/node_modules/sass-loader/lib/loader.js:52:13) at Object.done [as callback] (/var/www/vhosts/salon-virtuel/node_modules/neo-async/async.js:8077:18) at options.error (/var/www/vhosts/salon-virtuel/node_modules/node-sass/lib/index.js:294:32) # ./assets/js/app.js 7:0-62 Entrypoint app [big] = runtime.js vendors~app.js app.css app.js error Command failed with exit code 2. Imports in files : node_modules/material-components-web/material-components-web.scss #import "#material/elevation/mdc-elevation"; node_modules/#material/elevation/mdc-elevation.scss #import "./mixins"; #include mdc-elevation-core-styles; node_modules/#material/elevation/_mixins.scss #import "#material/feature-targeting/functions"; #import "#material/feature-targeting/mixins"; #import "#material/theme/variables"; #import "./variables"; Any idea about why it's happening, and how to fix this?
I think you are very close. Try to edit your encore config to include node_modules to sass loader like this:
// enables Sass/SCSS support
.enableSassLoader(function(options) {
// https://github.com/sass/node-sass#options
options.includePaths = ['./node_modules'];
}, {
// set optional Encore-specific options
// resolve_url_loader: true
});
explained here
For the case, someone else stumbles over this. It may would have also solved your issue, if you changed the way how you import the scss/sass files. #import "~#material/feature-targeting/functions"; #import "~#material/feature-targeting/mixins"; #import "~#material/theme/variables"; #import "./variables"; The ~ references the node_modules as well. That is at least how I do it and it works without any special config for the sass-loader.