I neeed some config file in #vue/cli 4.0.5 app and I created manually
/vue.config.js with lines :
export const settingsTestriorityLabels = [
{ key: 0, label: 'No00000' },
{ key: 1, label: 'Lowwwwwww' }
]
But trying to use it in my component I got error :
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:8:
64 | <script>
65 | import appMixin from '#/appMixin'
> 66 | import settingsTestriorityLabels from './../../../vue.config.js'
| ^
67 | // vue.config.js
68 | export default {
but in my component settingsTestriorityLabels declared and used, like :
<template>
<div class="hello">
<h1>{{ msg }}</h1>
TasksSelection.vue +++++++
settingsTestriorityLabels::{{ settingsTestriorityLabels }}
</template>
<script>
import appMixin from '#/appMixin'
import settingsTestriorityLabels from './../../../vue.config.js'
export default {
Is this configuration invalid ?
MODIFIED # 2 :
after break I remade my component and run
npm run serve
again but got error in my config file :
s$ npm run serve
> ctasks#0.1.0 serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve
ERROR Error loading vue.config.js:
ERROR SyntaxError: Unexpected token export
/mnt/_work_sdb8/wwwroot/lar/VApps/ctasks/vue.config.js:1
export const settingsTestriorityLabels = [
^^^^^^
SyntaxError: Unexpected token export
at Module._compile (internal/modules/cjs/loader.js:723:23)
I removed export key having in vue.config.js:
const settingsTestriorityLabels = [
{ key: 0, label: 'No00000' },
{ key: 1, label: 'Lowwwwwww' }
]
Is it valid format of vue.config.js?
Anyway I got the same error :
./src/views/Tasks/TasksSelection.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:10:
64 | <script>
65 | import appMixin from '#/appMixin'
> 66 | import { settingsTestriorityLabels } from './../../../vue.config.js'
| ^
67 | // vue.config.js
68 | export default {
My component content :
<template>
<div class="hello">
<h1>{{ msg }}</h1>
settingsTestriorityLabels::{{ settingsTestriorityLabels }}
...
</template>
<script>
import appMixin from '#/appMixin'
import { settingsTestriorityLabels } from './../../../vue.config.js'
export default {
data: function () {
return {
count: 0,
settingsTestriorityLabels: [],
I do not see why error and how to fix it as settingsTestriorityLabels is imported and defined ?
MODIFIED # 3 :
I found in net examples I tried to fill my vue.config.js with contentL
module.exports = {
settingsTaskPriorityLabels: [
{ key: 0, label: 'No' },
{ key: 1, label: 'Low' },
{ key: 2, label: 'Medium' },
{ key: 3, label: 'High' },
{ key: 4, label: 'Urgent' },
{ key: 5, label: 'Immediate' }
]
}
and got errors:
$ npm run serve
> ctasks#0.1.0 serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve
ERROR Invalid options in vue.config.js: "settingsTaskPriorityLabels" is not allowed
I tried some more examples, but failed all...
MODIFIED # 4 :
I created ./app.settings.js with content :
settingsTaskPriorityLabels = [
{ key: 0, label: 'No' },
{ key: 1, label: 'Low' },
{ key: 2, label: 'Medium' },
{ key: 3, label: 'High' },
{ key: 4, label: 'Urgent' },
{ key: 5, label: 'Immediate' }
]
settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'
But got errors :
error in ./app.settings.js
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTaskPriorityLabels' is not defined (no-undef) at app.settings.js:1:1:
> 1 | settingsTaskPriorityLabels = [
| ^
2 | { key: 0, label: 'No' },
3 | { key: 1, label: 'Low' },
4 | { key: 2, label: 'Medium' },
error: 'settingsJsMomentDatetimeFormat' is not defined (no-undef) at app.settings.js:10:1:
8 | ]
9 |
> 10 | settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'
| ^
11 |
Which syntax is valid ?
Try creating a variable in data(){} then setting it equal to settingsTestriorityLabels
Are you sure you are importing correctly? I think you should change your import to
import { settingsTestriorityLabels } from ....
and
data() {
return {
...
testVar: settingsTestriorityLabels
}
}
And then in the template
{{testVar}}
But I don't think that the vue.config.js file is where you should put your settingsTestriorityLabels setting, you can create another file to store these and import it. The vue.config.js file is for adding some configurations for #vue/cli when you build or test. Please have a look here https://cli.vuejs.org/config/#global-cli-config
Related
I'm trying to display interactive maps in my VueJS3 app.
I found a code that works:
<template>
<div id="mapContainer"></div>
</template>
<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
export default {
name: 'LeafletMap',
data() {
return {
map: null,
};
},
mounted() {
this.map = L.map('mapContainer').setView([46.05, 11.05], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(this.map);
//use a mix of renderers
var customPane = this.map.createPane('customPane');
var canvasRenderer = L.canvas({ pane: 'customPane' });
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
L.marker([50, 14]).addTo(this.map);
L.marker([53, 20]).addTo(this.map);
L.marker([49.5, 19.5]).addTo(this.map);
L.marker([49, 25]).addTo(this.map);
L.marker([-10, 25]).addTo(this.map);
L.marker([10, -25]).addTo(this.map);
L.marker([0, 0]).addTo(this.map);
},
onBeforeUnmount() {
if (this.map) {
this.map.remove();
}
},
};
</script>
<style scoped>
#mapContainer {
width: 100vw;
height: 100vh;
}
</style>
But as soon as I import a custom geoJSON, like this:
import France from '#/assets/carto/France.geojson';
I have this in my console:
[Vue Router warn]: uncaught error during route navigation: vue-router.mjs:35:17
SyntaxError: unexpected token: ':' vue-router.mjs:3451:20
[Vue Router warn]: Unexpected error when starting the router: SyntaxError: unexpected token: ':'
Uncaught (in promise) SyntaxError: unexpected token: ':'France.geojson:2:8
What is wrong?
By the way, France.geoJSON is a classic geoJSON file:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[5.829184048326689, 45.93827339383888], ...
]
]
},
"properties": { "dep": "01", "reg": "84", "libgeo": "Ain" }
}, ...
Actually if I write
import France from '#/assets/carto/france.json';
After having changed the name of the file, it works.
I still don't know why the extension matters.
I created a text editor component for my Vue3 project which is based on Quill (for documentation --> https://quilljs.com/docs/api/#setcontents):
<template>
<div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";
export default {
props: {
modelValue: { type: String, default: '' },
},
data() {
return {
editor: null
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false]} ],
["bold", "italic", "underline", "link", "image"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: this.placeholder,
});
this.editor.root.innerHTML = this.modelValue;
this.editor.setText('Default Value');
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
computed: {
}
}
</script>
It works fine and as a default value, I set the text this.editor.setText('Default Value'); But I am getting Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967294 is larger than the node's length error when I try to delete the whole default value.
I want use Gulp build the file is a javescript. the file was imported to the Vue files.
The target code like this:
export const myOrderTable = (h, _this) => {
return [
{
title: 'orderNo',
align: 'center',
dataIndex: 'orderNo',
fixed: 'left',
ellipsis: true,
customRender: (text, record) => {
return (
<a
onClick={() => {
_this.handleDetail(record)
}}
>
{{ text }}
</a>
)
}]
})
My gulpfile.js like this:
gulp.task('cover', () => {
gulp
.src('./dist/const/**/const.js')
.pipe(
babel({
presets: ['es2015'],
})
)
// .pipe(jsx())
// .transform('babelify', { presets: ['es2015', 'vue'] })
.pipe(gulp.dest('./dist/compress'))
.pipe(
uglify({
mangle: true,
compress: true,
//preserveComments: 'all'
})
)
.pipe(gulp.dest('./myProject/**/'))
})
The Gulp build process output:
Unexpected token (68:10)
66 | //
67 | return (
> 68 | <a
| ^
69 | onClick={() => {
70 | _this.handleDetail(record)
71 | }}
The optput message obvious in the gulp-uglify progress and due to the file used the vue component <a> tag.
I need build the file. so what should I do？please！
Use the babel transform vue tag to es2015 can solve the problem.
you need install the dependency:
yarn add babel-preset-vue-app -D
gulpfile.js:
gulp
.src('./dist/const/**/const.js')
.pipe(
babel({
presets: ['es2015','vue-app'],
})
)
I am using https://github.com/r3code/vue-vis-network
I am getting error: Cannot read property 'hasChildNodes' of undefined
My component code is:
<template>
<el-container >
<el-main>
<network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>
<button #click="get_data">GetData</button>
</el-main>
</el-container>
</template>
<script>
export default {
components: { Notification },
data () {
return {
nodes: [],
edges: [],
options: []
}
},
methods:
{
get_data()
{
axios.get(base_url + '/graph')
.then((response) => {
this.nodes = response.data.nodes;
this.edges = response.data.edges;
}).catch((error) => { console.log(error); });
}
},
}
</script>
index.js:
Vue.component('network', new vueVisNetwork.Network);
I suppose that there is problem that it's attempt to access to data placed in #app. How I can say him that he should use data declared in component?
Actual data example:
nodes : [
{id: 1, label: 'Fooo"', group: "company"},
{id: 2, label: 'Baaar', group: "owner"},
],
edges : [
{from: 1, to: 2},
],
possible related issue https://github.com/crubier/react-graph-vis/issues/57
I had created a project in vuejs using Vue-CLI. I have update the version of echarts from version-4.1.0 to version 4.2.0-rc.2. After updating it following error occurs:
In terminal it shows error:
"export 'default' (imported as 'echarts') was not found in 'echarts/lib/echarts'
and on accessing bar chart page, it shows error in console as:
TypeError: Cannot assign to read only property 'exports' of object '#'
Before updating the echarts package, here is my code for
vue.config.js file
const path = require('path');
const webpack = require('webpack');
module.exports = {
baseUrl: process.env.NODE_ENV == 'production' ? '/' : '/',
transpileDependencies: [
/\bvue-echarts\b/,
/\bresize-detector\b/
],
configureWebpack: {
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
}
After updating echarts version, I have replace the some lines of code with these lines:
transpileDependencies: [
/\/node_modules\/vue-echarts\//,
/\/node_modules\/resize-detector\//
],
On updating these lines, I had resolved the 1st error. But in echarts page following error arises in console:
Error in mounted hook: "Error: Component series.bar not exists. Load it first."
Here is my barchart file :
<template>
<ECharts :options="bar" style="width:100%; height:300px"></ECharts>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import { ChartConfig } from "Constants/chart-config";
export default {
components: {
ECharts
},
data() {
return {
bar: {
tooltip: {
trigger: "axis"
},
color: [ChartConfig.color.danger],
legend: {
data: ["Series A"]
},
xAxis: {
type: "category",
boundaryGap: true,
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} K"
}
},
series: [
{
name: "Series A",
type: "bar",
data: [11, 11, 15, 13, 12, 13, 10]
}
]
}
};
}
};
</script>
How I should remove these errors. For more information please,let me know.
Thanks!
I finally ended up with the solution, this error occurs because we cannot mix commonjs & ES modules. To solved this I updated the babel.config.js file:
// babel.config.js
module.exports = {
presets: [
["#vue/app", {
modules: "commonjs"
}]
]
};
By adding above code, all your ES module code will be transpiled to commonjs and then pass to webpack for compilation.