I'm using the modularized antdv with babel-plugin-import and when import InputSearch throws me the error described in the title.
"ant-design-vue": "^2.2.8"
"vue": "^3.0.0"
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { ConfigProvider, Button, Form, Input, InputSearch } from "ant-design-vue";
import "./styles/index.less";
const app = createApp(App);
app.use(ConfigProvider);
app.use(Button);
app.use(Form);
app.use(Input);
app.use(InputSearch);
app.mount("#app");
the error that shows:
These dependencies were not found:
* ant-design-vue/es/input-search in ./src/main.js
* ant-design-vue/es/input-search/style in ./src/main.js
// babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
] // `style: true` for less
]
};
The solution were remove InputSearch and only use Input in the use of vuejs and it works.
import {
ConfigProvider,
Button,
Form,
Input,
// InputSearch // <--- remove it
} from "ant-design-vue";
Related
I have created a component as part of my component library that I am building with Vue3 and Vite. Everything works well, except when I try to use environment variables. I want the app that consumes this component library to be able to provide the component with environment specific data.
I have played around and found that if I have a .env file as part of the component library project, I am able to access those variables, but I want to be able to provide that during runtime and not during build time.
Here is my vite.config.ts
import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "#vitejs/plugin-vue";
import dts from "vite-plugin-dts";
export default ({ mode }) => {
return defineConfig({
optimizeDeps: {
exclude: ["vue-demi"],
},
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
],
server: {
open: true,
},
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "complib",
fileName: "complib",
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
exports: "named",
},
},
},
});
};
The entry looks like:
import { App, install } from "vue-demi";
import TestComp from "./components/TestComp.vue";
import "./tailwind.css";
install();
export default {
install: (app: App) => {
app.component("TestComp", TestComp);
},
};
export { Header };
And here is a minimal component TestComp.vue:
<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
console.log(import.meta.env.VITE_TEST_VAR);
});
</script>
<template>
<span>Test Comp</span>
</template>
I get this warning in my Chrome Console:
runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `#vue/compiler-dom` in the build setup instead.
and then this warning:
[Vue warn]: Failed to resolve component: amplify-s3-image
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
But the component actually works, since it shows the image from S3 how it's supposed to.
This is what my main.js looks like:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Amplify from "aws-amplify";
import AmplifyVue from '#aws-amplify/ui-vue';
import store from './store'
import awsconfig from './aws-exports';
import aws_exports from './aws-exports';
import { applyPolyfills, defineCustomElements } from '#aws-amplify/ui-components/loader';
Amplify.configure(awsconfig);
//Amplify.configure(aws_exports);
applyPolyfills().then(() => {
defineCustomElements(window);
});
const app = createApp(App).use(router).use(store).use(AmplifyVue)
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('amplify-');
app.mount('#app');
and this is in my vue.config.js:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
},
)
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "Opensquare";
return args;
},options => {
options['compilerOptions'] = {
...options.compilerOptions || {},
isCustomElement: tag => tag.startsWith('amplify-')
}
return options;
})
}
}
What am I doing wrong? It's not blocking, since the component actually works, but reading the Console with this WARN popping up is a nightmare.
I'm developing some tests for single file components in VueJs. These components use font-awesome.
This is my App, as you can see I have fontawesome available for all child components.
import { createApp } from 'vue';
import App from './App.vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import { fas } from "#fortawesome/free-solid-svg-icons";
import { library } from '#fortawesome/fontawesome-svg-core';
library.add(fas);
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');
Here's a test
import { mount } from '#vue/test-utils'
import ListComponent from '#/components/ListComponent.vue'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
let someData = [{
name: 'Some person name',
key: '2222222',
moreInfo: [
{title: 'aa'},
{title: 'bb'},
]
},
{
name: 'Some other person name',
key: '12321123,
moreInfo: [
{title: 'cc'},
{title: 'x'},
]
},
}];
let wrapper = mount(ListComponent, {
propsData: {
someData
},
stubs: {
'font-awesome-icon': FontAwesomeIcon
}
});
describe('ListadoImputados.vue', () => {.... tests ....});
Test details are not important, I don't know how to add / include font-awesome-icon in the context so i can avoid getting the following warnings
console.warn node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:40
[Vue warn]: Failed to resolve component: font-awesome-icon
I tried adding this dependency as a mock and stub but no luck. Also importing Fontawesome at the top of the file does not work, the warning is still showing. I was thinking maybe in creating a vue app in the test file and inject the component like this
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');
but I'm copying and pasting code and I'm not sure this is the right way.
Is there a way to add this dependencies to my test context?
I'm using Vue 3, vue-test-utils + jest
In Vue Test Utils v2 (for Vue 3), the stubs mounting option is moved into global.stubs. Also note that a stub does nothing by definition, so stubbing the component only requires providing the component name.
Your mounting options should look like this:
const wrapper = mount(ListComponent, {
global: {
stubs: ['FontAwesomeIcon']
}
})
If for some reason you need the actual component, you could technically provide the component definition as a "stub", but you'd also need to initialize the icons for it as you would in the app's startup:
// assume only `faUserSecret` icon used in `ListComponent`
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
//...
const wrapper = mount(ListComponent, {
global: {
stubs: { FontAwesomeIcon }
}
})
I want to add custom theme to element-ui.
I have installed element-ui, babel-plugin-component.
Nuxt src directory
module.exports = {
srcDir: 'client/',
...
Add nuxt plugin
import Vue from 'vue';
import {
Button,
...
} from 'element-ui';
import lang from 'element-ui/lib/locale/lang/ru-RU';
import locale from 'element-ui/lib/locale';
locale.use(lang);
Vue.use(Button);
...
Add plugin to nuxt config
{ src: '#/plugins/element-ui.js' },
.babelrc file
{
"babelrc": true,
"cacheDirectory": false,
"presets": ["#nuxt/babel-preset-app"],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~client/assets/styles/element-ui/theme"
}
]
]
}
Theme don't load.
How to fix it?
I've created a new aurelia project with webpack and I want to use my custom nprogress component
import { bindable, noView } from 'aurelia-framework';
import * as nprogress from 'nprogress';
#noView(['nprogress/nprogress.css'])
export class LoadingIndicator {
#bindable public loading = false;
private loadingChanged(newValue): void {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
I get the following error at runtime: Failed loading required CSS file: nprogress/nprogress.css
webpack is not using aurelia.json.
just change it as follow:
import * as nprogress from 'nprogress';
import { bindable, noView } from 'aurelia-framework';
import 'nprogress/nprogress.css';
#noView()
export class LoadingIndicator {
#bindable loading = false;
loadingChanged(newValue) {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
or change your css loader in webpack.config.js. More info here https://github.com/aurelia/webpack-plugin/issues/120
You should have a file called aurelia_project/aurelia.json if you generated your project via Aurelia CLI. In that file, there is a block build.bundles.dependencies. You need to add the following to the block:
"dependencies": [
...,
{
"name": "nprogress",
"path": "../node_modules/nprogress",
"main": "nprogress",
"resources": [
"nprogress.css"
]
}
]