I have searched for hours now without any luck. I am trying to implement Kalendar-vue https://github.com/altinselimi/kalendar in a existing webpack project. When I run the project this is the error I get:
Uncaught Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
{-webkit-box-sizing:border-box;box-sizing:border-box}.calendarium{--current-day-color:#fef4f4;--dark:#212121;--hour-row-color:inherit;--lightg:#9e9e9e;--main-color:#ec4d3d;--odd-cell-border-color:#e5e5e5;--table-cell-border-color:#e5e5e5;--weekend-color:#f7f7f7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.calendarium.gstyle{--current-day-color:rgba(0,0,0,0.04);--hour-row-color:#212121;--main-color:#4285f4;--odd-cell-border-color:transparent;--table-cell-border-color:#e0e0e0;--weekend-color:transparent;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}.calendarium.gstyle .week-navigator{background:#fff;border-bottom:none;color:rgba(0,0,0,.54);padding:20px}.calendarium.gstyle .week-navigator button{color:rgba(0,0,0,.54)}.calendarium.gstyle .existing-event,.calendarium.gstyle .new-event{background-color:#c6dafc;border-left:none;border-radius:2px;color:rgba(0,0,0,.38);opacity:1;text-shadow:none}.calendarium.gstyle .existing-event>,.calendarium.gstyle .new-event>{text-shadow:none}.calendarium.gstyle .existing-event{width:96%}.calendarium.gstyle .existing-event .time{right:12px}.calendarium.gstyle .sticky-top .days{margin-left:0;padding-left:50px}.calendarium.gstyle .all-day{display:none}.calendarium.gstyle .hours,.calendarium.gstyle ul.building-blocks li{border-right:1px solid var(--table-cell-border-color)}.calendarium.gstyle .hours li{font-size:80%}.calendarium.gstyle .hour-indicator-line>span.line{background-color:#db4437;height:2px}.calendarium.gstyle .days{border-top:1px solid var(--table-cell-border-color);position:relative}.calendarium.gstyle .days:before{background-color:var(--table-cell-border-color);bottom:0;content:"";height:1px;left:0;position:absolute;width:50px}.calendarium.gstyle .day-indicator{-ms-flex-align:start;-ms-flex-direction:column;-webkit-box-align:start;-webkit-box-direction:normal;-webkit-box-orient:vertical;align-items:flex-start;border-right:1px solid var(--table-cell-border-color);color:var(--dark);display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column;font-size:13px;padding-left:16px}.calendarium.gstyle .day-indicator.is-before{color:#757575}.calendarium.gstyle .day-indicator .number-date{-ms-flex-order:2;-webkit-box-ordinal-group:3;font-size:40px;order:2}.calendarium.gstyle .day-indicator .letters-date{font-weight:500}.calendarium.gstyle .day-indicator:first-child{position:relative}.calendarium.gstyle .day-indicator:first-child:before{background-color:var(--table-cell-border-color);content:"";height:100%;left:-1px;position:absolute;top:0;width:1px}.calendarium.non-desktop .building-blocks{pointer-events:none}.existing-event,.new-event{cursor:default;font-size:14px;height:100%;padding:4px 6px;width:100%;word-break:break-word}.existing-event h4,.new-event h4{font-weight:400}.new-event{background-color:#34aadc;opacity:.9}.new-event>{text-shadow:0 0 7px rgba(0,0,0,.25)}.existing-event{background-color:#bfecff;border-left:3px solid #34aadc;color:#1f6570;opacity:.74}.week-navigator{background:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#f9f9f9));background:linear-gradient(#fdfdfd,#f9f9f9);border-bottom:1px solid #ec4d3d;padding:10px 20px}.week-navigator,.week-navigator .nav-wrapper{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.week-navigator .nav-wrapper{-ms-flex-pack:justify;-webkit-box-pack:justify;font-size:22px;justify-content:space-between;margin:0 auto;max-width:30ch;width:25ch}.week-navigator button{-ms-flex-align:center;-webkit-box-align:center;align-items:center;background:transparent;border:none;color:#ec4d3d;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;margin:0 10px;padding:0 0 5px}.week-navigator .chevron:before{-webkit-transform:rotate(45deg);border-style:solid;border-width:.11em .11em 0 0;content:"";display:inline-block;height:.6em;left:0;position:relative;top:.15em;transform:rotate(45deg);vertical-align:top;width:.6em}.week-navigator .chevron.left:before{-webkit-transform:rotate(-135deg);left:.25em;transform:rotate(-135deg)}.week-navigator .chevron{opacity:.7;outline:none}.week-navigator .chevron:active,.week-navigator .chevron:focus,.week-navigator .chevron:hover{opacity:1}.wrapping-all{background-color:#fff;min-width:300px}.no-scroll{max-height:100%;overflow-y:hidden}.hour-indicator-line{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-box-align:center;-webkit-user-select:none;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:10px;pointer-events:none;position:absolute;user-select:none;width:100%;z-index:2}.hour-indicator-line>span.line{-ms-flex:1;-webkit-box-flex:1;background-color:var(--main-color);display:block;flex:1;height:1pxbuild.js:9230) at webpack_require (bootstrap:19) at Module../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./wwwroot/src/components/Calendar.vue?vue&type=script&lang=js& (build.js:1875) at webpack_require (bootstrap:19) at Module../wwwroot/src/components/Calendar.vue?vue&type=script&lang=js& (Calendar.vue?3701:1) at webpack_require (bootstrap:19) at Module../wwwroot/src/components/Calendar.vue (Calendar.vue:1) at webpack_require (bootstrap:19) at Module../wwwroot/src/routes.js (routes.js:1) at webpack_require (bootstrap:19)
It's my first project using webpack, so I am not sure what to do. I am not sure which files you guys wanna see, but I think the problem is somewhere in these files.
Calendar.vue
<template>
<kalendar :configuration="calendar_settings" :appointments="appointments" />
</template>
<script>
import { Kalendar } from 'kalendar-vue';
import 'kalendar-vue/dist/kalendarvue.css';
export default {
components: {
Kalendar
}, data: () => ({
appointments: [],
calendar_settings: {
style: 'material_design', // ['flat_design', 'material_design']
view_type: 'Month', // ['Month', 'Day']
split_value: 20, // Value % 60 === 0
cell_height: 20, // !isNaN(Value)
scrollToNow: true, // Boolean
current_day: new Date(), // Valid date
military_time: true, // Boolean
},
})
}
</script>
package.json
{
"name": "someProject",
"description": "A project description",
"author": "Anders Tofte <email>",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"jquery": "3.3.1",
"kalendar-vue": "^0.2.3",
"less-loader": "^4.1.0",
"popper.js": "1.14.4",
"vue": "2.5.17",
"vue-router": "^3.0.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"css-loader": "^0.28.11",
"file-loader": "^2.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"vue-loader": "15.4.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.5.17",
"webpack": "4.17.2",
"webpack-cli": "3.1.0"
},
"scripts": {
"build": "webpack --progress --color --watch --display-error-details"
}
}
webpack.config.js
let path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
mode: "development",
entry: "./wwwroot/src/main.js",
output: {
filename: "build.js",
path: path.resolve("./wwwroot/dist/")
},
resolve: {
extensions: [".js", ".vue", ".css"],
alias: {
"vue$": "vue/dist/vue.esm.js"
}
},
devtool: "source-map",
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
'less-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
I run the project with
webpack watch
If I need to provide anything, please let me know!
Thanks in advance :)
import 'kalendar-vue/dist/kalendarvue.css';looks wrong to me; remove that and see if it compiles?