I created a very simple Next.js project, that contains only one page, index.js, that looks like:
import React, { useState } from 'react';
const MyComponent = () => {
const [instance, setInstance] = useState()
return (
<></>
);
};
const Home = () => <>
<MyComponent />
</>;
export default Home;
When I run it in development mode, there is no error and everything is working fine.
But when I run next build, I get:
Error occurred prerendering page "/": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
> Build error occurred
It looks like a problem with hooks, but I don't get what is wrong with my implementation. If I remove the line const [instance, setInstance] = useState(), the build is successful.
I am using next ^9.1.4, react ^16.12.0 and react-dom ^16.12.0.
Could you help me with this please? :)
I just copy your code to pages/index.js and run npm run build (it has next build in it, and it works.
next 9.1.4
react, react-dom 16.12.0
My best guess... you have another next install globally? and next build use that next instead?
Or it could be the lib you installed, what package you have in your package.json?
Related
Yesterday I developed a react custom hook for making our react application's title as dynamic and published in npm. It is my first attempt in npm contribution. So I faced so many errors. And one error not fixed after my well effort. The problem is as below:
The hook using useRef, and useEffect.
The version of react used by the hook is 18.2.0
dependencies in this format:
"dependencies": {
"react": "^18.2.0"
}
I used the hook like this:
import React from "react";
import useTitle from "./hook/react-title-hook";
// import useTitle from "./title";
// import useTitle from "react-dynamic-title";
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
useTitle("Home");
return (
<div className="App">
<header className="App-header">
app
</header>
<h1
onClick={() => {
navigate("/somting");
}}
>
somithing
</h1>
</div>
);
}
export default App;
There are 4 scenarios:
The hook has not a special package.json nor node_modules and it is using what the whole project uses in common. Then, there is no problem. it works smoothly. (It is like second useTitle of the above code)
The hook installed from npm and the version of react in main project is same as the version of hook 18.2.0 , so it would not install the dependencies specially. Then, there is no problem. It works smoothly. (It is like third useTitle of the above code)
The hook has special package.json and node_modules (because, we want to initialise and mention the dependencies when we publish our package). (It is like first useTitle of the above code) Then, the app not render and throw these two errors:
Invalid hook call. Hooks can only be called inside of the body of a function component. (actually the hook is inside of the component)
Uncaught TypeError: Cannot read properties of null (reading 'useRef'). (the first line of hook is useRef, so the error is like this. When I changed and make the useEffect the error is like cannot read properties of null (reading 'useEffect'))
The hook installed into a project that the version of react used by that project is not matching of the version of the hook. Then, the app throw the error as above.
So, this is the problem. The link of the hook is this: react-dynamic-title
How to fix it, Thank you in advance.
I'm using NextJS version 12.0.3 with framer motion for animations. Putting the functionality of the framer-motion library aside, when I tag any html element in my component, I get an error
error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { createContext } = pkg;
The file (Login.jsx) causing the error:
import { motion } from "framer-motion";
const Login: React.FC = () => {
return (
<motion.div
className=""
>
</motion.div>
);
};
export default Login;
Oddly enough, when I am routed TO the logo page from a different page, the page loads fine. But when I REFRESH the page, I'm faced with this error.
When I keep the import statement for framer-motion, BUT remove the motion. tags on my div element, the error does not persist when I refresh.
Is this a common issue with Next JS 12.0.3?
Should I just roll back to previous versions?
Thanks for your time!!
I had the same errors by importing framer-motion.
I solved this problem change import by require:
const { motion } = require("framer-motion");
I think the problem is from the latest update.
This works for me yarn add framer-motion#6.5.1
I was also facing the same issue and looking at the upgrade guide
of next js I found that the I was using nodejs version < 12.22.0 which caused this issue. Upgrading it to nodejs 12.22.0 fixed the issue for me.
I try to use hooks from an self developed package that uses useQuery within a create-react-app application.
This is my scenario: I am developing two npm projects: 'Core' and 'Demo'.
Core contains functions, hooks and components that I'd like to use in other applications (like Demo which is a CRA). Some hooks contain useQuery (react-query). Unfortunately, when using this hooks in other applications like Demo, I always get the error message "No QueryClient set, use QueryClientProvider to set one" even though I set a QueryClientProvider.
Is there any configuration I have to set within Core to make the desired behaviour work (e.g. that the used hook is placed within the application context)? Do I have to build the package as a specific module? Or is it possible to pass the application's QueryClient to the custom hooks of Core?
Here's some code to show my attempt:
Core/hooks/useHookWithUseQuery.js
export function useHookWithUseQuery() {
const queryClient = useQueryClient();
const { data } = useQuery(
"QUERY_KEY",
getDataFn
);
const invalidateData = () => {
queryClient.invalidateQueries("QUERY_KEY");
};
return { data, invalidateData };
}
Demo/index.js:
ReactDOM.render(
<React.StrictMode>
<QueryClientProvider client={queryClient} contextSharing={false}>
<App />
</QueryClientProvider>
</React.StrictMode>,
document.getElementById("root")
);
Demo/App.js
import { useHookWithUseQuery } from "core/dist/hooks"; // also tried core/src/hooks
...
function App() {
const { data } = useHookWithUseQuery();
const { someFetchedText } = data;
return (
<div>{ someFetchedText }</div>
);
}
And here is how I install Core into Demo
in Core (build + publish locally on Verdaccio)
rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files
npm publish --registry http://localhost:4873/
in Demo
NPM_CONFIG_REGISTRY=http://localhost:4873 npm i core
If anyone is still interested, I had the same issue described above.
The problem for me was that I was installing my 'Core' package from a local folder. As a consequence react-query was not correctly deduplicated.
Installing it directly from git (or from the npm registry) allowed npm to correctly dedupe it and fixed the issue for me.
I had the same problem and deduplicating your react-query dependency in your yarn lock or NPM package lock is the solution:
For yarn.lock you can run
npx yarn-deduplicate --strategy fewer
Or for package-lock.json:
npm dedupe
This will solve your issue like solved mine.
I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Did you install styletron toolkit?
According to their docs it's a dependency and looking at their package.json it's defined under peerDependencies which means it won't get installed along with atomize.
Styletron's docs sugggets using gatsby-plugin-styletron for Gatsby.
Hope that helps.
I'm trying to use lazy loading for my create-react-app with react#16.5.2 and I did this :
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Header />
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeFile;
Do you know why this error occurs ? is it because of my react version ? based on this everything seems fine!
Edit
What does this mean? based on reactjs.org :
Note:
React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
React.lazy is only available from v16.6.0 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In your comand line interface, try updating React using the following command:
npm i react#latest
Restart Development Server, if you still face issue try the above steps:
Search for REACT_EDITOR on the Readme.md file, and insert =atom in front of it, like as follow:
REACT_EDITOR=atom
Then, save, restart the development server. It should work now