I am getting an error (below) when trying to provide the "is" attribute inside an object in v-bind on a dynamic component. I am using Nuxt3.
Error: [Vue warn]: Failed to resolve component: component
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
{ is: 'AppLink', to: 'myRoute' }
Invalid value used as weak map key
Example when used in a component:
<component v-bind="{ is: 'AppLink', to: 'myRoute' }">
<slot></slot>
</component>
This is what AppLink component looks like:
<template>
<nuxt-link>
<slot></slot>
</nuxt-link>
</template>
<script>
export default {
name: 'AppLink'
};
If I do it like this, it all works as expected wtih no errors:
<component is="AppLink" to="myRoute" }">
<slot></slot>
</component>
Any thoughts interpreting the error would be great. Thanks.
This can happen if you don't set your components to global (not recommended).
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
components: {
global: true,
dirs: ['~/components']
},
})
See the docs on dynamic components about this.
Related
I'm building a UI component library using React 18 and exporting a Button.tsx component in it.
Then, to test that I can use that Button component, i'm importing it into a different component, Test.tsx, within that same UI component library code package (using npm link) and creating a story for that component.
So Test.tsx looks like this:
import Button from 'my-component-library'
const Test = (): JSX.Element => {
return (
<>
<Button title='test' body='test' />
</>
)
}
export default Test
And this is the Story for Test.tsx:
import { Meta, Story } from '#storybook/react'
import React from 'react'
import Test from './Test'
export default {
title: 'Test',
component: Test,
} as Meta
export const Default: Story<any> = () => <Test />
But if I want to view this story, I'm getting the following error in the Storybook UI:
Couldn't find story matching 'test--default'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.
And the following error in the browser console:
Unexpected error while loading ./components/Test/Test.stories.tsx: react is not defined
ReferenceError: react is not defined
How can I fix this?
I have a component that uses windows so I rendered it with client-only like:
<template>
<h2>Testing Component2</h2>
<client-only>
<Component2></Component2>
</client-only>
</template>
<script lang="ts">
import Component2 from './component-2'
export default defineComponent({
components: {
Component2
},
setup() {}
})
</script>
this works locally, the problem is that when I try to build to deploy, it always returns the error:
Multiple conflicting contents for sourcemap source error ./src/pages/index.vue
Is there a way to fix this or am I doing something wrong?
I used
LazyClientOnly
and there add a lazy import for the component like: Component2: () => import('./component-2') and works perfectly
The main problem is under the after tag. You can ignore the other parts above.
origin
I want to insert a chart (linechart) into my vuepress page.
first
I chose echart, use <script src="echarts.js"></script> to include it in my .md file, But failed.
[vite] Internal server error: Tags with side effect (<script> and <style>) are ignored in client component templates.
It seems that I can't use <script> in it? But I looked up Markdown and Vue SFC , It just says that you should avoid using more than one <script> in VuePress markdown. Does it mean I can use just a single <script> in .md file?
after
I tried to use echart vue component. Followed the tutorial, I just use register-components plugin to register it. These are my config:
.vuepress/config.ts
const { registerComponentsPlugin } = require('#vuepress/plugin-register-components')
const { path } = require('#vuepress/utils')
export default defineUserConfig({
...
plugins: [
...
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
]
})
.vuepress/components/TestMe.vue
<template>
<h1>Test my component</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Isn't it a simplest component for test?
Then I add <TestMe /> to my .md file. But it failed again. The h1 title couldn't show and my web gave out a warning:
to see the warning information
I have no idea about that.
I am trying to create a web component in Vue3. For this I use the Vue cli with the target library. Everything works as expected.
The problem is that I can't get any values from the props parameter of the setup function.
If I use the component as a Vue component the props work. As a web component i cant get any value from the props parameter
Its seams that the property wc-Test is not forwarded properly.
Does anyone have any ideas?
The Component Code
<template>
<a class="btn">
<slot></slot>
</a>
</template>
<script>
import {version } from "vue";
export default {
name: 'xn-button',
props: {
variant: {
default: 'normal',
type: String
}
},
setup(props, context) {
console.log(`Vue: ${version}`)
console.log(props)
console.log(props.variant)
},
}
</script>
<style></style>
Usage as Part of Vue Library:
<xn-button variant="Vue-Test">Test1</xn-button>
Usage as WebComponent:
<xn-button variant="wc-Test">Test2</xn-button>
Console output:
image
When I run npm run build and npm start on my local machine it deploys perfectly to localhost but when I try to deploy the very same code to Vercel I get the following error:
08:28:16 Failed to compile.
08:28:16 ./pages/index.tsx:5:20
08:28:16 Type error: Cannot find module '../components/layout' or its corresponding type declarations.
It definitely seems like an issue with the Layout component, I switched around the order of the important and it always fails when trying to load the Layout component. Here's the code for the component:
import Alert from "./alert";
import Footer from "./footer";
import Meta from "./meta";
type Props = {
preview?: boolean;
children: React.ReactNode;
};
const Layout = ({ preview, children }: Props) => {
return (
<>
<Meta />
<div className="min-h-screen">
<Alert preview={preview} />
<main>{children}</main>
</div>
<Footer />
</>
);
};
export default Layout;
index.tsx line 5 looks like this import Layout from "../components/layout"; and I've confirmed that that is the correct path for the Layout component.
are you sure the file name is layout.tsx not Layout.tsx :-)
I went through the same thing.
Fix layout.tsx to Layout.tsx
The file name and component name must be the same.