I have worked on Laravel & Vue js project.
This is Laravel code
The code works well but there is a warning in developer mode (inspect)
Laravel View code
#extends('layouts/app')
#section('content')
<div id="app">
</div>
#endsection
app.js code
const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');
app.js:74791 [Vue warn]: Cannot find element: #app
warn # app.js:74791
query # app.js:79817
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount # app.js:86018
./resources/js/app.js # app.js:86329
__webpack_require__ # app.js:20
0 # app.js:86576
__webpack_require__ # app.js:20
(anonymous) # app.js:84
(anonymous) # app.js:87
app.js:74791 [Vue warn]: Property or method "single" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Overlap> at resources/js/components/OutwardComponent.vue
<Root>
Your div that needs to reference the Vue should be in Layout file,
It might be possible that your div is rendering after the Vue Initialization.
Put <div id="app"></div> in layouts/app file and see if its gone or not.
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?
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 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.
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.
I'm trying to use react-springy-parallax in my NextJS project, but whenever I want to use it, I get the following error message:
Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.
Is this is a limitation to react-springy-parallax on NextJS?
Here is the example code I put in my index.js component:
<Parallax ref='parallax' pages={3}>
<Parallax.Layer offset={0} speed={0.5}>
<span>Layers can contain anything</span>
</Parallax.Layer>
</Parallax>
It seems the problem has something to do with a CORS issue and I don't know exactly how to approach a solution to this problem.
I've read that this has nothing to do with NextJS in particular. After React 16.8.0 and up, I read that I have to use the useRef function.
Solution:
import React, { useRef } from 'react'
[...]
const parallax = useRef( 'parallax' )
[...]
<Parallax ref={ parallax } pages={3}>
<Parallax.Layer offset={0} speed={0.5} onClick={ () => parallax.current.scrollTo(1) }>
<span>Layers can contain anything</span>
</Parallax.Layer>
</Parallax>
Next Js has no problem with next Js. First initialize a variable to use as useRef
const parallax = useRef(null!)
Then you can start creating the parallax component and you should use the ParallaxLayer component instead of Parallax.Layer component
<Parallax pages={3} ref={parallax}>
<ParallaxLayer offset={0} speed={0.5}>
<span>Layers can contain anything</span>
</ParallaxLayer>
</Parallax>
This will solve the problem, if you need example, check out this code,
parallax in next JS