My build was working fine yesterday, now when I run a build and run npm start, I get a client side error that crashes the app.
The only way to fix it is to remove next/head.
I have stripped down my app to one index.jsx file with only the following:
import Head from "next/head";
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
);
}
export default IndexPage;
_document.js
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
import Header from "../components/Header";
export default function Document() {
return (
<Html lang="en">
<body class="onepage">
{/* <Header /> */}
<Head />
<Main />
<NextScript />
{/* <script src="/scripts/plugins.js"></script>
<script src="/scripts/theme.js"></script> */}
</body>
</Html>
);
}
app.js
import "../styles/style.css";
import "../styles/plugins.css";
import Script from "next/script";
import Layout from "#/components/Layout/Layout";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
<Script src="/scripts/plugins.js" />
<Script strategy="lazyOnload" src="/scripts/theme.js" />
</Layout>
);
}
When I open localhost:3000 on the build, it is infinitely spamming the same console error:
TypeError: Cannot read properties of null (reading 'content')
What could possibly be going on?
Also, I tried deleting my .nuxt,node_modules folders and package-lock.json, still nothing.
Related
I am pretty new to React and I am trying to understand why I have a blank browser
my App.js is:
import React from 'react';
import TodoList from './TodoList'
function App() {
return (
<TodoList />
)
}
my Index.js is:
ReactDOM.render(<App />, document.getElementById('root'));
My Todolist (Project name)
import React from 'react'
export default function TodoList() {
return (
<div>
Hello World!
</div>
)
}
On my other project, I have Index.css as `
html, body {
margin: 0;
padding: 0;
}
Index.html as
<html>
<head>
<link rel="stylesheet" href="index.css">
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
and index.js as ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"))
all of these show a blank screen when ran.blank screen
I have tried to do some research, added "homepage": ".", to Package.json file and even tried to downgrade react script from 5.0 to 4.0 nothing worked.
export default App;
Add this at the end of app.js file
ohter than that i am not seeing any problem
I am trying to integrate Paypal Payouts to my React app. However, I am stuck at the AAC part where I generate a component to let the user connect.
I tried to either load the script in index.html or to load it using the paypal-checkout package.
In the first case, I get told that paypal isn't defined and in the second case, I get told that I can't get the property driver from undefined.
Here is my code and my index.html.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const AACComponent = paypal.PayoutsAAC.driver('react', {
React,
ReactDOM
});
export class Affiliation extends Component {
render () {
const { t } = this.props;
const { data, candidates, hirees } = this.state;
return (
<Screen type="background-white" loading={this.state.loading} title={this.props.t('pages:affiliation')}>
<div className="container tw-space-y-3">
<div className="row">
<div className="col-lg-6 tw-mx-auto">
<div className="tw-card">
<h2 className="tw-text-xl tw-font-bold">{t('affiliationHired')}</h2>
<AACComponent
clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
merchantId={process.env.REACT_APP_PAYPAL_MERCHANT_ID}
env={process.env.REACT_APP_PAYPAL_ENV}
pageType="login"
onLogin={() => {}} />
</div>
</div>
</div>
</div>
</Screen>
);
}
}
Affiliation.propTypes = {
t: PropTypes.func.isRequired
};
export default withRouter(withTranslation('common')(Affiliation));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<script src="https://www.paypalobjects.com/payouts/js/payouts_aac.js"></script>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I removed the unecessary code to not clutter my code.
Any idea?
I have a component Layout which I used to style the layout of my app and that's where I introduced react-helmet
The component is like this
import React from 'react';
import { Global, css } from '#emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';
const Layout = ({ children }) => (
<>
<Global
styles={css`
// some CSS style
/>
<Helmet>
<html lang="en" />
<title>title</title>
<meta name="description" content="site description" />
</Helmet>
<Header />
<main
css={css`
// some css
`}
>
{children}
</main>
</>
);
export default Layout;
After I added <Helmet />, I have this error poppin up. And if I removed <Helmet /> from my component, the error would be gone. apparently I didn't forgot to export my Layout component so I really have no idea where this came from.
You need to use named import with react-helmet.
import {Helmet} from "react-helmet";
Docs: https://github.com/nfl/react-helmet#example
I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
from script, it runs successfully, but with above code, it's only loading the page.
Header.js
import React, { Component } from 'react';
import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';
export default class header extends Component {
render() {
return (
<Router>
<div>
<Link to ="/">Home</Link>
<Link to ="/about">About Us</Link>
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
</div>
</Router>
);
}
}
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Index extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
Welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" />
<title>Laravel</title>
</head>
<body>
<div id="app">
<h1>Hello... This is example</h1>
</div>
<script src="js/app.js"></script>
</body>
</html>
If my understanding is correct then I guess you can't call Index.js from Index.js.
What I mean to say is that you are trying to render the Index.js infintely.
Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.
What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Home extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Home />, document.getElementById('app'));
}
You have an infinite recursive loop:
Index renders the component Header.
Header renders the component <Route exact path ="/" component={Index} />
This Route renders Index when you are on /
<Route/> works by rendering the component prop when you are on the path prop.
I was wondering if its possible to render an entire react app in a non react web page. I tried many links where it suggested code snippets as follows which shows to render just a component,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
<h1>POC</h1>
</body>
<script type="text/babel">
class Application extends React.Component {
render() {
//debugger
console.log('hi there')
return (
<div>
<h1>hello world</h1>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('root'));
</script>
</html>
But i want to know is its possible to have my react app in the same path like,
- htdocs
- plainhtmljswebapp.html
- react-app-folder
- index.html
- main.js
- src
- components
- actions
- reducers
- package.json
- webpack.config.js
as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.
Thanks alot
See comments on question for more context on this answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="/bundle.js"></script>
</head>
<body>
<div id="content1">
</div>
<script type="text/javascript">
mount("content1", "testing")
</script>
<div id="content2">
</div>
<script type="text/javascript">
mount("content2", "more testing")
</script>
</body>
</html>
index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { App } from './app'
window.mount = function(id, customText) {
const store = createStore((state = {}) => state)
render(
<Provider store={store}>
<App text={customText} />
</Provider>,
document.getElementById(id)
)
}
app.js
import React from 'react'
export const App = ({ text }) => {
return (
<div>{text}</div>
)
}
This only has redux integration in so far as it creates a store and wraps the app in a Provider, but I can't see any reason why it wont work like normal from there.
I tested this using webpack to bundle and webpack-dev-server to serve.