I'm New to nextjs and I ran into a problem I added a TawkTo and I feel like this is the reason of the error. I have imported dynamically my tawkto file in my _app.js file :
import '../styles/Home.css';
import 'bootstrap/dist/css/bootstrap.css';
import Navbar from './Navbar';
import Footer from './Footer';
import Script from 'next/script';
import Head from 'next/head';
import '#fortawesome/fontawesome-svg-core/styles.css';
import { SSRProvider } from '#react-aria/ssr';
import React from 'react';
import TawkTo from './Components/TawkTo';
import dynamic from 'next/dynamic';
function MyApp({ Component, pageProps }) {
const Countdown = dynamic(() => import("./Components/TawkTo"), {
SSR: false,
});
return (
<Head>
<link passhref="true" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossOrigin="anonymous" />
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossOrigin="anonymous"></Script>
<link passhref="true" rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
</Head>,
<SSRProvider>
<React.StrictMode>
<Navbar />
<Component {...pageProps} />
<TawkTo />
<Footer />
</React.StrictMode>
</SSRProvider>
)
}
export default MyApp
and my TawkTo.js:
import React from 'react';
import { useEffect } from 'react';
const TawkTo = () => {
useEffect(() => {
// <!--Start of Tawk.to Script-->
var Tawk_API = Tawk_API || {},
Tawk_LoadStart = new Date();
(function () {
var s1 = document.createElement("script"),
s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/5d7e91079f6b7a4457e1cadb/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
// <!--End of Tawk.to Script-->
}, [])
return (
<div>
{/* empty div */}
</div>
)
}
export default TawkTo
and these are the console errors I'm getting:
a little help will be so much thankful :-)
Related
In the following segment of code I call the Header module and React automatically adds the import to the Header module.
import Head from 'next/head'
import Header from '../components/Header'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header/>
<main className={styles.main}>
</main>
</div>
)
}
But at compile time React tells me it cannot resolve the Header module:
error - ./pages/index.tsx:3:0
Module not found: Can't resolve '../components/Header'
Header.jsx
import Image from 'next/image'
import { useEffect, useState } from 'react'
import Link from 'next/link'
const Header = () => {
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
if(window.scrollY > 0) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
}
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<header>Header</header>
)
}
export default Header
Relative paths of index.jsx and Header.jsx:
\react\netflix-tailwind\components\Header.tsx
\react\netflix-tailwind\pages\index.tsx
I've looked at similar answers, but they didn't help.
im importing my AuthProvider into my _app.js as:
import React from 'react'
import '../styles/globals.css'
import Navbar from './Navbar'
import AuthProvider from '../Firebase/AuthContext'
const MyApp = ({ Component, pageProps }) => {
return (
<AuthProvider>
<Navbar />
<Component {...pageProps} />
</AuthProvider>
)
}
export default MyApp
the error comes up when i go to my About.js page:
import React from 'react'
import {Component} from 'react'
class About extends Component {
render() {
return(
<div>
<h1>ABOUT PAGE</h1>
</div>
)
}
}
export default About
that ERROR leads me to my Index.js page:
import React from 'react';
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
//import AppBar from '#mui/material/AppBar'
//import Toolbar from '#mui/material/Toolbar'
import Typography from '#mui/material/Typography'
//import Button from '#mui/material/Button'
//import Link from 'next/link'
import { Container } from '#mui/material'
import FirebaseClient from '../FIREBASE/FirebaseClient'
FirebaseClient()
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Container>
<h1>HOME PAGE</h1>
</Container>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
but tho, when i look again, it says that i have an "anonymous function" in my
Auth.js file:
import React, { useState, useEffect, useContext, createContext } from "react";
import nookies from "nookies";
import FirebaseClient from "../FIREBASE/FirebaseClient";
import firebase from "firebase/app";
import "firebase/auth";
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
FirebaseClient();
const [user, setUser] = useState(null);
*** ERROR HERE, my console points to my useEffect ***
useEffect(() => {
return firebase.auth().onIdTokenChanged(async (user) => {
console.log("auth changed");
console.log(user ? user.id : "Nothing");
if (!user) {
setUser(null);
nookies.set(undefined, "token", "", {});
return;
}
const token = await user.getIdToken();
setUser(user);
nookies.set(undefined, "token", token, {});
});
}, []);
return (
<AuthContext.Provider value={{ user }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);
what am i doing wrong?
I'm doing exactly the same as i did in a previous Next project,
idk why its not working.
i even tried pasting what someone recommended me to paste,
still, same errors.
I've tried clearing my cache, error.
my firebase says it's init.
so, im stuck
I am using material UI in NEXTJS and on first render sometimes its applying all the custom changes sometimes it doesn't. when it applying all those and click on link its breaking again and I did all the custom changes which mentioned https://github.com/mui-org/material-ui/blob/master/examples/nextjs here like creating custom _app.js and _document.js file
_app.js
import { useEffect, Fragment } from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import CssBaseline from '#material-ui/core/CssBaseline';
import { ThemeProvider } from '#material-ui/core/styles';
import theme from '../src/theme';
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }){
useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
console.log(jssStyles);
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
const getLayout = Component.getLayout || ((page) => page)
return (<>
<Head>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
{getLayout(<Component {...pageProps} />)}
</ThemeProvider>
</>)
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};
_document.js
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import theme from '../src/theme';
import { ServerStyleSheets } from '#material-ui/core/styles'
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
const originalRenderPage = ctx.renderPage;
const sheets = new ServerStyleSheets();
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => <App {...props} />,
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
any help would appreciated
I have a material ui setup with SSR. I works fine...
My problem is that when I compile my code, material-ui generates some weird classnames like jss116 or jss19.
This is really annoying when inspecting my code in development. I want to have (In my development environment), more meaningful class names. Is this possible?
server.tsx
import * as path from 'path';
import * as express from "express";
import * as bodyParser from "body-parser";
import * as React from "react";
import * as ReactDOMServer from "react-dom/server";
import {StaticRouter} from "react-router";
import {matchPath} from "react-router-dom";
import {Helmet} from "react-helmet";
import { createStore, Action } from 'redux';
import { Provider } from 'react-redux';
import {SheetsRegistry, create} from 'jss';
import JssProvider from 'react-jss/lib/JssProvider';
import {MuiThemeProvider, jssPreset, createGenerateClassName} from '#material-ui/core/styles';
import App from "../shared/App";
import routes from '../shared/routes';
import theme from '../shared/MainTheme';
const app = express();
const PORT = process.env.PORT || 3000;
app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
app.use(express.static("build/public"));
console.log("Public path:", path.join(__dirname, "public"));
const appReducer = (prevState: any, action: Action) => ({...prevState, message: "Reducer"});
app.get('*', (req, res, next) => {
const now = new Date();
console.log(`GET ${now} - ${req.originalUrl}`);
const activeRoute = routes.find(route => !!matchPath(req.url, route)) || {
path: "/" };
// TODO: Fetch initial state according to the active route.
const preloadedState = {activeRoute};
const store = createStore(appReducer, preloadedState as any);
const sheetsRegistry = new SheetsRegistry();
const sheetsManager = new Map();
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
const context = {}
const content = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<JssProvider jss={jss} registry={sheetsRegistry} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
<Provider store={store}>
<App/>
</Provider>
</MuiThemeProvider>
</JssProvider>
</StaticRouter>
);
const helmet = Helmet.renderStatic();
const css = sheetsRegistry.toString();
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<style id="jss-server-side">${css}</style>
</head>
<body>
<div id="root" style="overflow-x: hidden; width: 100%; margin: 0;">${content}</div>
<script src="client_bundle.js" type="text/javascript"></script>
<script type="text/javascript">
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
</body>
</html>
`;
res.send(html);
});
app.listen(PORT, () => {
console.log(`App is running on port ${PORT}`)
})
client.tsx
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {BrowserRouter, Router} from "react-router-dom";
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {appReducer} from '../shared/reducers';
import App from "../shared/App";
import {create} from "jss";
import {createGenerateClassName, MuiThemeProvider, jssPreset} from '#material-ui/core/styles';
import theme from '../shared/MainTheme';
import JssProvider from 'react-jss/lib/JssProvider';
import configureStore from '../shared/store/index';
declare global {
interface Window {
__PRELOADED_STATE__ : any
}
}
const preloadedState = window.__PRELOADED_STATE__;
delete window.__PRELOADED_STATE__;
// const store = createStore(appReducer, preloadedState);
// const store = configureStore(appReducer, preloadedState);
const store = configureStore(preloadedState);
const Main = () => {
React
.useEffect(function didMount() {
const jssStyles = document.getElementById('jss-server-side');
if (jssStyles && jssStyles.parentNode) {
jssStyles
.parentNode
.removeChild(jssStyles);
}
}, []);
return <App/>
}
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
ReactDOM.hydrate(
<JssProvider jss={jss} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Provider store={store}>
<Main/>
</Provider>
</BrowserRouter>
</MuiThemeProvider>
</JssProvider>, document.querySelector('#root'),);
I finally sorted this out by running webpack like this:
webpack --mode=development ./server.ts
Turns out, for some reason, webpack doesn't listen to NODE_ENV
You should be able to get meaningful names in development by properly setting NODE_ENV in your build tool.
You could change the generateClassName props value to your custom generator based on the environment. In production, you can just use the usual createGenerateClassName.
For example:
let generateClassName = null;
if (process.env.NODE_ENV === "production") {
// use the default class name creator from mui
generateClassName = createGenerateClassName();
} else {
// make your own name generator
const createGenerateId = () => {
let counter = 0;
return (rule, sheet) => `pizza--${rule.key}-${counter++}`;
};
generateClassName = createGenerateId();
}
// ... in render
<JssProvider generateClassName={generateClassName} ...>
...
</JssProvider>
This example was taken from CSS-in-JS Docs.
I ran into this issue and fixed it by using the createGenerateClassName function and setting the disableGlobal option to true.
const generateClassName = createGenerateClassName({
disableGlobal: true,
});
const App = () => ({
<StylesProvider generateClassName={generateClassName}>...</StylesProvider>
});
I'm stuck with this codes,
index.html
<!doctype html>
<html lang="en">
<head>
<title>React Redux Starter Kit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div id="root" style="height: 100%"></div>
<div id="demo"></div>
</body>
</html>
Counter.js
import React from 'react'
import {core as Core} from 'zingchart-react'
export const Counter = React.createClass({
render () {
var myConfig = {
type: "bar",
series : [
{
values : [35,42,67,89,25,34,67,85,90.99]
}
]
};
return(
<div>Hello
<Core id="myChart" height="300" width="600" data={myConfig} />
</div>
)
}
})
export default Counter
main.js
import React from 'react'
import ReactDOM from 'react-dom'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from './store/createStore'
import AppContainer from './containers/AppContainer'
import Counter from './components/Counter/Counter'
ReactDOM.render(<Counter/>, document.querySelector('#demo'));
// ========================================================
// Browser History Setup
// ========================================================
const browserHistory = useRouterHistory(createBrowserHistory)({
basename: __BASENAME__
})
// ========================================================
// Store and History Instantiation
// ========================================================
const initialState = window.___INITIAL_STATE__
const store = createStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: (state) => state.router
})
if (__DEBUG__) {
if (window.devToolsExtension) {
window.devToolsExtension.open()
}
}
const MOUNT_NODE = document.getElementById('root')
let render = (routerKey = null) => {
const routes = require('./routes/index').default(store)
ReactDOM.render(
<AppContainer
store={store}
history={history}
routes={routes}
routerKey={routerKey}
/>,
MOUNT_NODE
)
}
if (__DEV__ && module.hot) {
const renderApp = render
const renderError = (error) => {
const RedBox = require('redbox-react')
ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}
render = () => {
try {
renderApp(Math.random())
} catch (error) {
renderError(error)
}
}
module.hot.accept(['./routes/index'], () => render())
}
render()
I am using react-redux starter kit - https://github.com/davezuko/react-redux-starter-kit, I'm getting this error, please help me out.
ERROR: Cannot read property '__reactAutoBindMap' of undefined
This is the es6 way of writing your component:
import React from 'react';
import {core as Core} from 'zingchart-react';
class Counter extends React.Component {
render () {
var myConfig = {
type: "bar",
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
return (
<div>Hello
<Core id="myChart" height="300" width="600" data={myConfig} />
</div>
)
}
}
export default Counter;
and to render it,
ReactDOM.render(<Counter />, document.getElementById('some_div'));
core is not a valid name for a React Component. React Components must start with an upper case letter, that is how React distinguish between components and HTML tags.
So your code should look like this
import React from 'react'
import {core as Core} from 'zingchart-react'
export const Counter = React.createClass({
render () {
var myConfig = {
type: "bar",
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
return (
<div>Hello
<Core id="myChart" height="300" width="600" data={myConfig} />
</div>
)
}
})
export default Counter
working example