Search code examples
reactjsnext.jscreate-react-app

create-next-app has some issue with packages compared with create-react-app


I have worked with create-react-app repo before. But recently I am using create-next-app repo for server side rendering. I created a project with npx create-react-app and install a package for example npm install react-burger-menu --save from github and then use it in App.js. everything is working:

import './App.css';
import { slide as Menu } from 'react-burger-menu'

function App() {
    var styles = {
     ...
    }


    return (
    <div className="App">
      <Menu styles={styles}>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a className="menu-item--small" href="">Settings</a>
      </Menu>
    </div>
  );
}

export default App;

but I use this package in project npx create-next-app:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {slide as Menu} from "react-burger-menu";

export default function Home() {
    var styles = {
     ...
    }
    return (
        <Menu styles={ styles } >
            <a id="home" className="menu-item" href="/">Home</a>
            <a id="about" className="menu-item" href="/about">About</a>
            <a id="contact" className="menu-item" href="/contact">Contact</a>
            <a className="menu-item--small" href="">Settings</a>
        </Menu>
    );
}

but it creates following error:

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

this error apears almost with every package I install


Solution

  • When you create next app using npx create-next-app it creates your project inside a folder (default my-app). So before installing any package (or init git) you need to run cd my-app (in Git bash terminal) to be in project directory. otherwise it will create a new package.json in the wrong directory.