I'm trying to run tests using Vitest on a Vue.js app that uses Element Plus registered as a plugin.
If I use mount on a component that contains an Element Plus component, I get the following error:
TypeError: Unknown file extension ".scss" for /home/projects/vitejs-vite-zcdxhn/node_modules/element-plus/theme-chalk/src/button.scss
The issue can be replicated on this StackBlitz.
My vite.config.js file looks like this:
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';
export default defineConfig({
plugins: [vue(), ElementPlus({ useSource: true })],
});
My HelloWorld.vue component looks like this:
<script setup>
import { ElButton } from 'element-plus';
</script>
<template>
<el-button type="primary">Hello</el-button>
</template>
My HelloWorld.spec.js looks like this:
import { test, expect } from 'vitest';
import HelloWorld from '../HelloWorld.vue';
import { mount } from '#vue/test-utils';
test('hello world test', async () => {
const wrapper = mount(HelloWorld);
expect(wrapper.text()).toContain('Hello');
});
The seems to be specifically related to the ElementPlus({ useSource: true })] "unplugin" in plugins in vite.config.js because when I remove that, the problem goes away.
I've reviewed the docs for the various tools (Element Plus, Vite, Vitest), but I've not been able to find how to get this working.
Is there a custom test config that needs to be applied?
Related
I'm developing app using JS and Vue.js and get error on line:
import Vue from 'vue'
I'm getting this:
Uncaught SyntaxError: The requested module
'/node_modules/.vite/vue.js?v=6dba2ea6' does not provide an export
named 'default'
I googled that might be caused by old Vue version, in my package.json vue version is 3.2.6, but
npm view vue version
returns 2.6.14, I tried to upgrade it with Vue CLI
vue upgrade
but npm command still return 2.6.14
I hope you could help me, what did I wrong or it is not even versions problem? Thanks!
The reason it didn't work is that Vue provides a named export, whereas you are trying to import it as though it had a default export.
To make a named import (which you must do with named exports), you need to wrap the name of the export you want to import in curly braces, so {} around Vue like this:
import { Vue } from 'vue';
// ^^^ name of export
It will work
The thing you want to do is import vue but it doesnot have a default export function or either the default thing to export is not set in vue module. So you have to select function named vue by adding curly braces.
If it had a default export function, then your code would have worked and in that case you could write anything in place of vue like below:
import anyname from 'vue'
anyname is name whatever you want.
This worked for me:-
import * as Vue from 'vue';
and similarly for different packages:-
import * as Vuex from 'vuex';
import * as VueRouter from 'vue-router';
As of time of writing:-
"devDependencies": {
...
"vue": "^3.2.45",
Another solution is to use the createApp() function like this:
import { createApp } from 'vue';
createApp(App).mount('#app')
I'm not experienced in Vue JS, but it looks like they no longer export a single object. Ranger a collection of things.
Usually as of Vue 2, in the src/main.js file, we’re bootstrapping the app by calling a new Vue as a constructor for creating an application instance.
import Vue from "vue";
import App from "./App.vue";
import router from './router'
const app = new Vue({
router,
render: h => h(App)
});
For Vue 3 the initialization code syntax has changed and is much cleaner and compact
import { createApp } from "vue";
createApp(App).use(store).mount('#app')
I am using this npm package to send notifications in my Vue App. After following the instructions, and adding the required usages on the main.ts, I keep getting when I try to use the features of it:
Property '$notify' does not exist on type 'Shop'
main.ts:
import Vue from 'vue'
import Notifications from 'vue-notification'
import App from './App.vue'
Vue.use(Notifications)
new Vue({
render: h => h(App)
}).$mount('#app')
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Character from "./Character.vue";
import Vendor from "./Vendor.vue";
#Component<Shop>({
components: {
Character,
Vendor
},
})
export default class Shop extends Vue {
sellItem(itemID) {
this.$notify({
title: 'Important message',
text: 'Hello user!'
});
}
}
</script>
I have tried importing the component in the .vue file, however it does not recognize the type. What am I doing wrong? I can't find any solution for this...
Thank you.
Add a shim typings file
You need a file that imports and re-exports the type of "Vue", it is named vue-file-import.d.ts, but elsewhere on the internet it is commonly called vue-shim.d.ts. Regardless of name, the content needed is the same:
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Try placing the above file in /src location. But sometimes when you move around changing things it might not work so I suggest you to place it inside /typings location
I have been trying to use vue-tel-input-vuetify in Nuxt and I have been having the issue as it is in the image below, I have also tried all the solutions in this link Github but I get the same error.
After installation, I created a plugin file plugins/vue-tel-input-vuetify.js and added the following code to it.
import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)
After that, I added this to nuxt.config.js
plugins: [
'~/plugins/vue-tel-input-vuetify',
{ src: '~/plugins/vue-google-charts', mode: 'client' }
]
Between my component's script tags, I did this:
import { VueTelInputVuetify } from 'vue-tel-input-vuetify'
export default {
components: {
VueTelInputVuetify,
},
...
And between my component's template tags I added this:
<VueTelInputVuetify
ref="phoneInput"
v-model="phoneNumber"
hint="Enter your phone number..."
:rules="phoneNumberRules"
placeholder=""
label="Phone"
:required="true"
:validate-on-blur="true"
:input-options="{showDialCode: true, tabIndex: 0}"
:valid-characters-only="true"
mode="international"
/>
Updated answer
I've tried it myself, working perfectly fine with:
Nuxt at 2.15.7
#nuxtjs/vuetify at 1.12.1 (vuetify at 2.5.7)
vue-tel-input-vuetify at 1.3.0.
Had to write this in my phone-input plugin
import Vue from 'vue';
import vuetify from "vuetify";
import VueTelInputVuetify from 'vue-tel-input-vuetify/lib';
Vue.use(VueTelInputVuetify, {
vuetify,
});
And I've imported it like this in nuxt.config.js
plugins: ['#/plugins/phone-input'],
With the following template
<template>
<vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
</template>
<script>
export default {
data() {
return {
phone: ''
}
},
}
</script>
Here is a working github repo if you want to try it out by yourself.
Alternative idea
Looking at the documentation, it says that you need to transpile it (for Vue).
In nuxt.config.js, you could try the following to replicate the same need
build: {
transpile: [
'vue-tel-input-vuetify',
// 'vuetify' // this one may also be needed, try with and without
],
}
I'm using component ElDatepicker from element-ui and I want to change it's template and event handler method.
I'm trying to do something like this in single file component:
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
extends: ['ElDatePicker']
}
But it doesn't work. How i can change it?
https://github.com/ElemeFE/element/tree/dev/packages/date-picker - component package
Your main problem is that extends should specify a single component and not an array. You should reference the component and not the name.
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
export default {
extends: ElDatePicker
}
The repo you posted is from element-ui
Do npm install element-ui
Then:
import { DatePicker } from 'element-ui'
export default {
// Use mixins for array syntax
mixins: [DatePicker]
// OR use extends without array
extends: DatePicker
}
You have to first install Element UI in your project using npm install element-ui.
Then you have to edit your main.ts/main.js file and add
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
This should solve your problem. For more help, check Element UI
I just started with React.js and I am unable to import component.
I have this structure as followed by this tutorial (YouTube link) :
-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
This is my index.js:
import React from 'react';
import { render } from 'react-dom';
import { MyCompontent } from "./components/MyCompontent";
class App extends React.Component {
render() {
return (
<div>
<h1>Foo</h1>
<MyCompontent/>
</div>
);
}
}
render(<App />, window.document.getElementById('app'));
This is MyComponent.js:
import React from "react";
export class MyCompontent extends React.Component {
render(){
return(
<div>MyCompontent</div>
);
}
}
I am using this webpack file (GitHub link).
However, when I run this, my module fails to load.
I get this error in the browser console:
Error: Cannot find module "./components/MyCompontent"
[WDS] Hot Module Replacement enabled. bundle.js:631:11
[WDS] Errors while compiling. bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
/home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
# ./src/app/index.js 11:20-56 bundle.js:669:5
Can't figure out what went wrong here.
For anyone coming here without a typo, and is using Webpack, be sure to check for a clause like this:
resolve: {
extensions: [".jsx", ".js"]
},
in your webpack.config.js.
This tells your transpiler to resolve statements like:
import Setup from './components/Setup'
to
import Setup from './components/Setup.jsx'
This way you don't need the extension.
You have a typo in your import. You're requesting MyCompontent. Change to:
import MyComponent from "./components/MyComponent";
And all typos as well.
You can try to import MyCompontent from "./components/MyCompontent.js"
like this
import MyCompontent from "./components/MyCompontent.js";
You have written that the filename is MyComponent.js.
Thus, your import should look like
import { MyCompontent } from './components/MyComponent.js'
The problem for me was that import line was not generated correctly. I have this scenario:
--src
----elements
-----myCustomText.tsx
this is myCustomText.tsx file:
export interface Props {
text: string;
}
const MyCustomText = ({ text }: Props) => (
<Text>{text}</Text>
);
export default MyCustomText
And the generated import was this:
import MyCustomText from '../../elements/MyCustomText';
and I changed it to this:
import MyCustomText from '../../elements/myCustomText'
I don't know why the generated import line was generated automatically wrong.
I found myself here without a typo and without a webpack issue.
The solution for me was to restart the typescript server via VS Code.
I just had this issue, no type or webpack config issues.
What fixed it was changing the import from relative to the app root directory to relative to the file:
import MyComponent from "src/components/MyComponent";
to
import MyComponent from "../components/MyComponent";
If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:
menu File → Preferences → Settings → User Settings,
"typescript.preferences.importModuleSpecifier": "relative"
export 'Component' (imported as 'Component') was not found in 'react'
if you find your self stuck with this error simply go to mini-create-react-context, and go to cjs, and go to index.js and add "React" example: you will find this (Component) solution (React.Component) only if you extends to React.Component in you pages
Note: I have only used this on VS Code