Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'
Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
Related
I am using Vue 3 + Vite plugin for Quasar + Pinia for Store management. I followed all official documentation (Quasar, Pinia). But I am getting this error.
[Vue warn]: injection "Symbol(pinia)" not found.
...
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
at <ViewLogin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
...
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
pinia.esm-browser.js:1638 Uncaught (in promise) Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
at useStore (pinia.esm-browser.js:1638:19)
js:185:25)
main.js
import {createApp} from 'vue'
import {Notify, Quasar} from 'quasar'
// Import icon libraries
import '#quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
import '#quasar/extras/material-icons-round/material-icons-round.css'
// A few examples for animations from Animate.css:
// import #quasar/extras/animate/fadeIn.css
// import #quasar/extras/animate/fadeOut.css
// Import Quasar css
import 'quasar/src/css/index.sass'
// Import icon libraries
import '#quasar/extras/material-icons/material-icons.css'
import '#quasar/extras/material-icons-sharp/material-icons-sharp.css'
// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
import router from "./router/router";
import i18n from "./i18n/i18n"
import {createPinia} from "pinia/dist/pinia";
import {useLoginStore} from "./stores/login";
const app = createApp(App)
// app.config.globalProperties.loginStore = useLoginStore();
app.use(Quasar, {
plugins: {
Notify,
}, // import Quasar plugins and add here
})
app.use(router)
app.use(i18n)
app.use(createPinia())
// Assumes you have a <div id="app"></div> in your router.html
app.mount('#app')
And I am recieving this error after adding 'const store = useLoginStore()' to the component's code.
<script setup>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useLoginStore} from '../../stores/login'
import {useQuasar} from 'quasar'
const $q = useQuasar()
const email = ref(null)
const password = ref(null)
const store = useLoginStore()
const {loginEmail} = storeToRefs(store)
</script>
What is the problem and how to fix it?
The problem was related to WebStorm. It automatically creates this import:
import {createPinia} from "pinia/dist/pinia";
instead of this
import {createPinia} from 'pinia'
For me it was :
import { isTemplateNode } from '#vue/compiler-core'
Cut and reload the server works fine
I am having vue application inside static JS app and in vuejs's main.js file I am having 3 lines of code:
import { createApp } from 'vue'
import componentMap from './componentMap'
createApp(componentMap['vue-home-page']).mount("#vueContainer")
App.vue:
<template>
<h1> VUE Starter Kit </h1>
</template>
<script>
export default {
name: 'App'
}
</script>
and I am getting error on second line i.e. import App from './App.vue'
where it says
Module not found: Error: path argument is not a string
componentMap.js:
import App from '.App.vue';
const componentMap = {'vue-home-page': App}
export default componentMap
vue-page.hbs:
<div id='vueContainer'><vue-home-page /></div>
Project Structure:
src
hbs-app
page
index.hbs
landing-page.hbs
vue-page.hbs
vue-app
main.js
App.vue
componentMap.js
I am currently importing alot of svg files using the normal import statement like the following.
index.vue
<script>
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
components: {
danalock,
smartlock,
light,
clicker,
battery100,
environmental,
batter25charge,
...
},
I already searching for some workarounds like making a folder in components like components/images/ and made an image.js and put all the import statement there like the following
components/images/images.js
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
danalock,
smartlock,
light,
clicker,
...
}
and tried accessing it in my vue file like the follow but can't find good results
index.vue
<script>
import { danalock, smartlock } from "~/components/images/images.js"
export default {
components: {
danalock,
smartlock,
...
}
the template of my index.vue
<template>
<smartlock />
</template>
throws the following error
Unknown custom element: <smartlock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am creating a helper class in react. The image below shows my setup:
In my App.js, I have:
import Helpers from './Helpers.js'
I have also tried:
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import {Helpers} from './components/Helpers.js'
import {Helpers} from 'src/components/Helpers.js'
and I have also tried, in my Helpers.js:
export default Helpers
export default Helpers();
However, I receive an error message:
'./Helpers.js' does not contain an export named 'Helpers'.
It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:
Helpers.helperFunctionHere();
thanks.
Option 1: Export each function individually
In Helpers.js
export function helperFunctionHere() {
console.log("hello there");
}
In App.js
import {helperFunctionHere} from "./Helpers";
render() {
helperFunctionHere();
}
Option 2: Static properties on the class
In Helpers.js
class Helpers {
static helperFunctionHere() {
console.log("hi");
}
}
export default Helpers
In App.js
import Helpers from "./Helpers";
render() {
Helpers.helperFunctionHere();
}
Should be export default Helpers. Am also assuming that your bundler is setup correctly.
Can you see why this is failing?
In my ./app.js file:
import Howdy from ('./app/Howdy');
Get this error:
SyntaxError: /Users/elk/testapp/app.js: Unexpected token (6:18) while parsing file: /Users/carlf/Documents/dev/reactjs/FlyTweet/app.js
/app/Howdy.js
import React from 'react';
export default class Howdy extends React.Component {
render() {
return (
<div>Howdy {this.props.name}</div>
);
}
}
If I change to using var Howdy = require('./app/Howdy') in app.js and React.createClass() in Howdy.js it works even when keep import React from 'react' in Howdy.js
The syntax should be:
import defaultMember from "module-name";
Get rid of the parenthesis:
import Howdy from ('./app/Howdy');
should be:
import Howdy from './app/Howdy';
Check out the MDN docs on import, they are pretty comprehensive:
MDN IMPORT