I am looking at LevelUpTuts Meteor+React for everybody series.
I am having " Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. " error but I don't know where the problem is.
client/Main.html
<head>
<title>myResolutions</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="target-render"></div>
<script src="./App.js"></script
</body>
In my App.jsx
client/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render() {
return (
<h1> Hello World </h1>
)
}
}
if(Meteor.isClient){
Meteor.startup(function(){
ReactDOM.render(<App />,document.getElementById("render-target"));
});
}
It looks like in the html you have the id as "target-render", and in the javascript you have the id as "render-target". They need to match.
I guess the problem is coming from this line:
It shouldn't be here.
and I highly recommend you to use official Meteor tutorials instead of anything else:
https://www.meteor.com/tutorials/react/creating-an-app
First of, you need to import Meteor, import { Meteor } from 'meteor/meteor'; and then you don't need to include <script src="./App.js"></script> in your html. Note you have a typo on that line, you didn't properly close the script tag
Related
Has anyone tried to integrate ShareThis with Next.js?
I'm getting "Hydration failed because the initial UI does not match what was rendered on the server." and this, I have ascertained, is down to the inclusion of the ShareThis script tag.
I'm not sure what I need to do in order to resolve this error.
This is my _document.tsx file, containing the offending script tag:
import { Html, Head, Main, NextScript } from "next/document";
const Document = () => (
<Html>
<Head>
<script
type="text/javascript"
src={`https://platform-api.sharethis.com/js/sharethis.js#property=${process.env.NEXT_PUBLIC_SHARETHIS_PROPERTY_ID}&product=sop`}
async
defer
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
export default Document;
Of course, the NEXT_PUBLIC_SHARETHIS_PROPERTY_ID variable from my .env file is being correctly populated.
You should be using next/script to load 3rd party scripts like ShareThis. Here's their documentation https://nextjs.org/docs/basic-features/script
Make sure to apply the <Script src="" /> component OUTSIDE of the next/head component, either above of below it.
Hope this helps.
I have a Vue 3 custom Element in which I want to use PrimeVue & PrimeFlex etc.
So I first create a Component, use the .ce.vue extension for the sfc mode and use the combination of defineCustomElement and customElements.define to compile it to a web component. Finally I use it in the index.html to see if it works in the Browser.
It works to some extent but not completely. For example, I am unsure about how to translate app.use(PrimeVue) for my case.
//customElement.ce.vue
<template>
<div>Test</div>
<AutoComplete field="name" />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import AutoComplete from "primevue/autocomplete";
export default defineComponent({
name: "customElement",
props: {
msg: String,
},
components: { AutoComplete },
setup: () => {
console.log(JSON.stringify(theme));
return { PrimeVue };
},
styles: [],
});
</script>
<style scoped lang="scss"></style>
//main.ts
import { createApp, defineCustomElement } from "vue";
import App from "./App.vue";
//PrimeVue
import PrimeVue from "primevue/config";
import "/node_modules/primeflex/primeflex.css";
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/saga-blue/theme.css";
//CustomElement
import customElement from "#/components/customElement.ce.vue";
const customElementWC = defineCustomElement(customElement);
customElements.define("custom-element", customElementWC);
//Setup VueApplication for testing/reference, this works as expected.
const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");
//index.html (for testing)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div> //test app
<custom-element /> //the custom Web Component
<!-- built files will be auto injected -->
</body>
</html>
So I can see that the PrimeVue-Autocomplete is being shown, but the styles are not working.
So the question is:
How can I use all of PrimeVue in a custom Component?
Or in other words: How do I setup a Vue 3 CustomElement with PrimeVue?
So I have found a workaround (not a proper solution).
The way to make most of it work is to import the styles and js/ts modules in the component(s) itself.
The main styles make the most sense to import in the root component of the web component.
The reason why it has to be there is, due to:
https://github.com/vuejs/vue-cli/issues/6033 and
https://github.com/vuejs/core/issues/4662
that web components can't use plugins, or at least I don't know how. In other words there is no app.use() method.
I still couldn't properly import primeflex so I had to use the cdn link. I think it is possible to use an internal import, and I will update the answer when I find out how.
To use a specific PrimeVue component, simply import and register it as the documentation describes.
<template>
<Button />
</template>
<script lang="ts">
import Button from "primevue/button";
import { defineComponent } from "vue";
export default defineComponent({
components: { Button },
});
</script>
<style>
#import url("https://unpkg.com/primeflex#3.1.0/primeflex.css");
</style>
<style lang="scss" src="#/assets/scss/globals.scss"></style>
<style src="primevue/resources/primevue.min.css"></style>
<style src="primevue/resources/themes/tailwind-light/theme.css"></style>
//main.ts
import { defineCustomElement } from "vue";
import App from "./App.ce.vue";
customElements.define("custom-element", defineCustomElement(App));
Limitation:
Due to the missing plugin support (or my lack of knowledge of it) the lines:
import PrimeVue from 'primevue/config';
app.use(PrimeVue);
are not possible. Unfortunately, I can't fully grasp the impact that might have.
I am using Next.js App and trying to add jquery in the application but the issue is sometimes it work sometimes not, I already added it to top of the script.
import React from 'react';
import Head from 'next/head'
import Script from 'next/script';
const LoadCss = () => {
return ( <>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
</Head>
</>
);
}
export default LoadCss;
import React from 'react';
import Script from 'next/script';
const LoadJs = () => {
return ( <>
<Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></Script>
<Script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></Script>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></Script>
</> );
}
export default LoadJs ;
and rest are loaded after this but still facing the issue.
I also try to load it via local folder but still no success.
Kinldy help
I have a small problem with next.js _document.js. I want to support Arabic, so, I add lang="ar" to Html component. But, in the page rendered there is no lang attribute in HTML. Hope somebody help me.
In order for Next.js to show updates made in _document you must stop and restart Next.js.
You must restart Next.js after making changes in _document, *.env, or any Next.js config files.
pages/_document.{ jsx | tsx }
import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
class Document extends NextDocument {
render = () => (
<Html lang="ar" dir="rtl">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
export default Document;
I am getting the following error when I navigate to Gallery and Contact Link, except when I click on home link ('/').
head-manager.js:2
Uncaught (in promise) TypeError: Cannot read property 'join' of undefined
at head-manager.js:2
Below is my header.js component:
import Link from 'next/link'
import { COLORS, FONT_SIZE } from '../theme/constants'
const Header = () => {
return (
<header>
<Link href='/'>
<a className='site-name'>Name</a>
</Link>
<nav>
<Link href='/'>
<a>Home</a>
</Link>
<Link href='/gallery'>
<a>Gallery</a>
</Link>
<Link href='/contact'>
<a>Contact</a>
</Link>
</nav>
</header>
)
}
export default Header
I don't think the issue is in the above component, but possibly in your _document.js, _app.js, or relevant page that is trying to update title, or other Head properties. You will see this error if the property you are using to set the value does not exist:
if props.myUndefinedProperty does not exist below, you will see the:
head-manager.js:2 Uncaught (in promise) TypeError: Cannot read property 'join' of undefined
import Head from 'next/head';
...
return (
...
<Head>
<title>{props.myUndefinedProperty}</title>
</Head>
I found the issue. I am using getStaticProps to fetch data from sitedata.json in index.js file and passing contents of file as props through Layout component. Thats how my header and Head components receive site title and description info. But I am not passing them through the Gallery and About page files. I figured if I get them once from index file it would be able to use them globally, but that is not the case. I have to fetch that data using getStaticProps on every page file, which got rid of error.