tried to use the bootstrap-vue for the first time but got issue upon compiling assets. When I run npm run watch, I got an error something like below.
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)
# ./node_modules/bootstrap-vue/lib/mixins/index.js 2:0-38
app.js
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.component('b-navbar', require('./components/Navbar.vue'));
Navbar.vue
<template>
<div>
<!-- navbar contents here.. -->
</div>
</template>
<script>
import { bNavbar } from 'bootstrap-vue/lib/components'
export default {
components: { bNavbar }
}
</script>
Expected result
Must display the navbar component
It seems, that you try to use single BV component. In that case you need to setup your dev enviroment to be able to compile BV sources by installing babel plugin https://babeljs.io/docs/plugins/transform-object-rest-spread/ and configuring babel to include node_modules/bootstrap-vue/lib folder
Related
I am using VUE 3 and vite for my project. I have installed vite-svg-loader and imported and included the svg file as below.
import ProgressPin1 from '../assets/svg/google.svg?components';
export default {
components: {
ProgressPin1
}
}
Afterwards, I tried using the SVG inside my file as below:
<template>
<ProgressPin1/>
</template>
However, I am still getting the following error in my console.
Failed to resolve component: ProgressPin1
If this is a native custom element, make sure to exclude it from component resolution via
Do advise! Thank you.
I created new Vue project using create-vue command as it was written here. Here are my answers to questions:
D:\checks>npm init vue#latest
Vue.js - The Progressive JavaScript Framework
√ Project name: ... VueQuestionJSX
√ Package name: ... vuequestionjsx
√ Add TypeScript? ... No
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... Yes
√ Add Cypress for End-to-End testing? ... Yes
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes
Scaffolding project in D:\checks\VueQuestionJSX...
Done. Now run
I have not changed any settings in project. I just added simple JSX variable in script
const textDiv = <div>Hi all!</div>;
and decided to check how it works. It didn't. First of all ESlint showed an error Parsing error: Unexpected token <. Then compiler threw an error
[vite] Internal server error: Failed to parse source for import analysis because the content
contains invalid JS syntax. Install #vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
I checked readme for #vitejs/plugin-vue-jsx and noticed it seems it doesn't understand this usual syntax. First of all component which contains JSX must be exported, and second it must use defineComponent function.
I created a separate file CheckJSX.vue. Here is the whole its content:
CheckJSX.js
import { defineComponent } from "vue";
const Bar = defineComponent({
render() {
return <div>Test</div>;
},
});
export { Bar };
As defineComponent returns Vue Component I inserted Bar as component
HomeView.vue
<script setup>
import { Bar } from "#/components/CheckJSX.js";
</script>
<template>
<Bar />
</template>
ESlint was in shock of this syntax and highlighted everything in red. Probably it didn't like .vue extension. I changed it to .js. ESLint calmed down but still showed an error Parsing error: Unexpected token <.
Compiler threw an error
20:56:29 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Plugin: vite:import-analysis
File: D:/checks/VueQuestionJSX/src/components/CheckJSX.js
4 | render() {
5 | return <div>Test</div>;
6 | },
| ^
7 | });
Why Vue doesn't understand JSX out of the box even if you chose "Add JSX support"?
A workaround is to enable JSX parsing in the ESLint config:
// .eslintrc.cjs
module.exports = {
⋮
"parserOptions": {
⋮
"ecmaFeatures": {
"jsx": true,
}
}
}
I think this is a new bug because JSX worked previously for me out of the box in a newly scaffolded project. I recommend filing a GitHub issue to get it fixed.
I try to import this package into my nuxt project.
All my coding experiments can be found here. I will refer to different branches.
There are several ways to do so:
Just import it right in the page like here (master branch)
This way worked well. You can go to the uploading page via a button on a home page.
Until you manually refresh the page
Then you will get this error SyntaxError Cannot use import statement outside a module
The same error happens when you try to build it.
Import it via plugins (like in plugin-use branch with or without vendor option in build)
I've got the same error.
Import it via plugins with some options (like in plugin-options branch)
Then the package loads only when you refresh the page and only in dev mode.
If you will go to that button on a home page (referenced before) - there will be an empty page.
Import it through modules (like in modules branch).
Then the nuxt cannot load at all, this error happens SyntaxError: Invalid or unexpected token
Could you comment on each method and why it doesn't work?
How to import it correctly?
The final answer is following (I've looked up the projects which use this package).
There was a project which run on Nuxt.
These are changes which you should add to #tamzid-oronno 's answer
//vue-upload-multiple-image.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import VueUploadMultipleImage from 'vue-upload-multiple-image'
Vue.use(VueLazyload) // this is from the package installation guide
Vue.component('VueUploadMultipleImage', VueUploadMultipleImage)
And list it in plugins the same way.
//nuxt.config.js
plugins: [
{ src: '~plugins/vue-upload-multiple-image', ssr: false }
]
Thus you will be able to use the package without importing it in pages as tags. This was implemented in plugin_plus_lazy branch.
Both tags will work vue-upload-multiple-image and VueUploadMultipleImage.
//your-index-file.vue
<template>
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
:data-images="images"
idUpload="myIdUpload"
editUpload="myIdEdit"
dragText = "Drag an image here"
browseText = "(or click here to browse)"
primaryText = "Default Image"
markIsPrimaryText = "Set as default image"
popupText = "This image will be set as default"
dropText = "Drag and drop"
accept = image/jpeg,image/png,image/jpg,image/tif,image/tiff
></vue-upload-multiple-image>
</div>
</template>
<script>
export default {
name: "AppUpload",
data(){
return{
file:"",
images: []
}
},
methods:{
uploadImageSuccess(formData, index, fileList) { },
beforeRemove (index, done, fileList) { },
editImage (formData, index, fileList) { },
}
}
</script>
<style scoped>
</style>
To create a static version and test it on your local machine do the following:
$ npm run generate
# test the project
$ npm install http-server
$ cd dist
$ http-server -p 3000
I still have a question - why does it work? :)
Use it as plugin.
In the plugins folder, make a file named vue-upload-multiple-image.js
//vue-upload-multiple-image.js
import Vue from 'vue'
import {VueUploadMultiple} from 'vue-upload-multiple-image'
Vue.use(VueUploadMultiple)
List it under plugins block on nuxt.config.js
//nuxt.config.js
plugins: [
{ src: '~plugins/vue-upload-multiple-image', ssr: false }
]
Thus you will be able to use the package on any component of your project
Is it possible to load a vue component dynamically at runtime (in an electron app to build a plugin system)?
The component is in a specific file
Its path is only known at runtime
The component can either be precompiled (if that is possible, don't know) or is compiled at runtime
A simple example component is listed below
I tried the following approaches, both failing:
Require component
<template>
<component :is="currentComp"></component>
</template>
<script>
...
methods: {
loadComponent(path) {
const dynComp = eval('require(path)'); // use eval to prevent webpackresolving the require
this.currentComp = dynComp;
}
},
...
</script>
The import works, but the line this.currentComp = dynComp; Fails with error message:
Error in data(): "Error: An object could not be cloned."
Using the code presented here, but replace url with a local path
Fails with error message:
Failed to resolve async component: function MyComponent() {
return externalComponent('/path/to/Component.vue');
}
Reason: TypeError: Chaining cycle detected for promise #<Promise>
The used example component is the following:
// Example component
module.exports = {
template: `
<div>
<input v-model="value"/>
<button #click="clear">Clear</button>
<div>{{ value }}</div>
</div>`,
name: 'Example',
data() {
return {
value: '',
};
},
watch: {
value(value) {
console.log('change!');
},
},
methods: {
clear() {
this.value = '';
},
},
};
I found a solution:
Create the vue component as a SFC in a separate file (here src/Component.vue). I didn't try, but probably it works for inline components, too.
Precompile the component using vue-cli-service, which is already a dev dependency, if the project is created using vue-cli (It's nice to use vue-cli here, since the required loaders are already included):
yarn vue-cli-service build --target lib src/Command.vue
The component is compiled to different bundle types in the dist directory. The file [filename].umd.min.js can be imported now.
Import the component dynamically at runtime:
let MyComponent = eval(`require('/absolute/path/to/[filename].umd.min.js')`);
Vue.component('MyComponent', MyComponent);
The require is wrapped inside an eval to prevent webpack of trying to include the import in its bundle and transforming the require into a webpack__require.
(Optional) If the SFC component contains a <style>...</style> tag, the resulting css is compiled to a separate file. The css can be inlined in the js file by adding the following lines to the vue.config.js in the components project root:
module.exports = {
...
css: {
extract: false,
},
};
You can probably look into async loading:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
and see this for a webpack lazy load example:
https://vuedose.tips/dynamic-imports-in-vue-js-for-better-performance/#the-meat%3A
These are just some things I would research for your requirements.
I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js.
I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".
/plugins/octicion.js :
import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'
// Pick one way betweem the 2 following ways
// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'
// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'
Vue.use(octicon);
In MyComponent.vue I use it like
<template>
<div>
<octicon name="repo-forked" label="Forked Repository"></octicon>
</div>
</template>
nuxt.config.js looks like
plugins: [
"#/plugins/bootstrap-vue",
"#/plugins/octicon.js"
],
My Browser shows me:
Where is my error?
Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:
plugins: [
"#/plugins/bootstrap-vue",
{ src: '~/plugins/octicon.js', mode: 'client' }
]
Secondly you may need to add it to the transpile build option, also in nuxt config.js:
build: {
transpile: ['octicon.js']
}
You may also want to wrap the <octicon> tag in a <no-ssr> tag.