Nuxt: Module should export a function: #turf/helpers [ERROR] - npm

Does anyone know why am I getting Module should export a function: #turf/helpers when I add #turf/helpers to my buildModules in nuxt.config.js?
nuxt.config.js
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#turf/helpers'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
Am I adding the module to the wrong array?
FYI: the module is present within my package.json / dependencies. Thus, the installation went through.
// Component where import { point } from '#turf/helpers' returns undefined
<script>
import { defineComponent } from '#vue/composition-api';
import mapboxgl from 'mapbox-gl';
import { point } from '#turf/helpers'
export default defineComponent({
data () {
return {
geojson: {
'type': 'FeatureCollection',
'features': []
},
map: null,
}
},
mounted() {
this.initMapBox();
},
methods: {
// Initialize MapBox map
initMapBox: function() {
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleGFuZHJ1YW5hIiwiYSI6ImNrZTl3NzJ3bzIxNG4yc2w2aG03dHNkMDUifQ.xaSxrVMLZtfGAlWoGvB1PQ';
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/alexandruana/cksxeq0637zjy17tcvd4h919d',
center: [22.253, 45.419],
zoom: 4
});
this.map.on('load', () => {
console.log('Map loaded.')
let point = point([22.253, 45.419]);
console.log(point)
this.map.addSource('points', {
type: 'geojson',
data: this.geojson
});
this.map.addLayer({
id: 'points',
type: 'circle',
source: 'points',
paint: {
'circle-radius': 8,
'circle-color': '#00a9e2'
},
filter: ['in', '$type', 'Point']
});
});
},
}
})

Importing it as a regular NPM package and using it without colliding with the same variable name fixed the issue!
Indeed, this was not a Nuxt module.

Related

how to override the vuetify scss varibales in nuxt3 + vite

I want to override the vuetify scss variable to change the v-text-field border-radius
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced so many warnings related to vuetify:
Code sample
/* nuxt.config */
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [ /* updated */
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
/* assets/variables.scss */
#use 'vuetify/settings' with ( /* updated */
$application-background: red,
$application-color: red
);
All defined varibales in the 'varibales.scss' are detected, but i want to override the vuetify varibales.
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced with so many warnings related to vuetify.
warrnings
nuxt.config
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
plugins/vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
assets/variables.scss
#use 'vuetify/settings' with (
$application-background: red,
$application-color: red
);

Adding a chart-js plugin to vue-chart-js

I'm trying to add a chartjs plugin called chartjs-plugin-annotation (https://github.com/chartjs/chartjs-plugin-annotation) to my vue-chart js project. In my BarChart.vue file, I first imported the chartjs annotation plugin
<script>
import { Bar, mixins } from "vue-chartjs";
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
const { reactiveProp } = mixins;
export default {
extends: Bar,
mixins: [reactiveProp],
plugins: {
annotation: {
drawTime: "afterDatasetsDraw",
events: ["click"],
dblClickSpeed: 350,
annotations: [
{
drawTime: "afterDraw",
id: "a-line-1",
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: "25",
borderColor: "red",
borderWidth: 2,
onClick: function (e) {
// `this` is bound to the annotation element
},
},
],
},
},
props: {
options: {
type: Object,
required: true,
},
},
mounted() {
// add plugin
this.addPlugin([chartjsPluginAnnotation]);
this.renderChart(this.chartData, this.options);
},
watch: {
options() {
this.renderChart(this.chartData, this.options);
},
},
};
</script>
I added the plugin under mounted() this.addPlugin([chartjsPluginAnnotation]);, before rendering the chart.
Am I adding the config options to my chart correctly as at the plugins : ?
I've installed the plugin successfully, using npm install chartjs-plugin-annotation --save. I refreshed my app on my local but there's no annotation plugin added to the chart. What am I supposed to fill up in the onClick: function (e)? What am I still missing?
I apologise in advance because I'm really new to this framework.
Here's how your options object should look like:
{
...
annotation: {
annotations: [
{<your annotation object code here>}
],
},
...
}
Next, you've correctly identified that you should use the addPluing() method, just make sure to use it like so
// in imports
import SomePlugin from "..."
// in mounted
this.addPlugin(SomePlugin);
https://stackoverflow.com/a/65486537/7165219
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
And:
mounted() {
Chart.plugins.register(chartjsPluginAnnotation);
this.addPlugin(chartjsPluginAnnotation);
this.renderChart(this.chartData, this.options);
}

Is it possible to substitute Vue.extend with new Vue?

I am working on a Quasar project and I am having a problem. I need to access from external javascript to the properties and methods of the Vue component.
const vue = Vue.extend({
name: 'PageIndex',
data() {
return {
accessToken:
'myToken',
mapStyle: 'mapbox://styles/mapbox/streets-v11',
coordinates: { lng: -82.42642875898966, lat: 23.11975881338755 },
barbershopsSource: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
title: 'Foo'
},
geometry: {
type: 'Point',
coordinates: [-82.42644475189455, 23.119620627441506]
}
},
{
type: 'Feature',
properties: {
title: 'Bar'
},
geometry: {
type: 'Point',
coordinates: [-82.42193696725194, 23.124402891576594]
}
},
{
type: 'Feature',
properties: {
title: 'Baz'
},
geometry: {
type: 'Point',
coordinates: [-82.43414198682088, 23.115900071933567]
}
}
]
}
};
},
components: {},
methods: {
createMap() {
mapboxgl.accessToken = this.accessToken;
const map = new mapboxgl.Map({
container: 'map',
style: this.mapStyle, // stylesheet location
center: this.coordinates, // starting position [lng, lat]
zoom: 15 // starting zoom
});
const source = this.barbershopsSource;
map.on('load', function() {
console.log('Map loaded');
//I want to have access to the component properties here
});
map.on('click', 'barbershops', function(e) {
console.log('Barbershop clicked:', e.lngLat);
});
}
},
mounted() {
this.createMap();
}
});
export default vue;
I know that access to properties is pretty simple, but the thing is that by default and I don't know why, Quasar uses Vue.extend to create the components. If I substitute
const vue = Vue.extend
by
const vue = new Vue
I can access to properties, but the component view isn't loaded.
Any help would be greatly appreciated
The way it works is, quasar takes App.vue as the entry point and loads the generated compiled javascript. The app is created there.
There is only one app running.
You add functionality to your vue app by extend the app.
You create app once in App.vue and add functionality to it by extending.

error "window is not defined " when using plugin Vue.js

Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,{});
nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'stud-cit',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Stud-cit site' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: 'blue'},
plugins: [
'~/plugins/vuetify',
'~/plugins/vue-awesome-swiper' ,
'~/plugins/vuePose'
],
build: {
vendor :['vue-awesome-swiper/dist/ssr'],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
}
}
};
This library has special build for SSR.
Reference
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

Vuejs Error after updating echarts version from version-4.1.0 to version - 4.2.0-rc.2

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.