React is not defined in _app.js

Bug report

I get “React is not defined” error in _app.js

Describe the bug

I have been following the example: to add context api to my next.js app, then when running the project in the development env, it gives that error

To Reproduce

dependencies:

    "next": "latest",
    "next-routes": "^1.4.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",

also tried next: “^8.1.0”

_app.js

import App, { Container } from "next/app";
/* First we import our provider */
import GProvider from "../context/GContext";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        {/* Then we wrap our components with the provider */}
        <GProvider>
          <Component {...pageProps} />
        </GProvider>
      </Container>
    );
  }
}

export default MyApp;

error message:

ReferenceError: React is not defined
    at MyApp.render (/home/hassan/Documents/killTime/.next/server/static/development/pages/_app.js:1437:7)
    at processChild (/home/hassan/Documents/killTime/node_modules/react-dom/cjs/react-dom-server.node.development.js:2959:18)
    at resolve (/home/hassan/Documents/killTime/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (/home/hassan/Documents/killTime/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (/home/hassan/Documents/killTime/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/home/hassan/Documents/killTime/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at render (/home/hassan/Documents/killTime/node_modules/next-server/dist/server/render.js:81:16)
    at renderPage (/home/hassan/Documents/killTime/node_modules/next-server/dist/server/render.js:230:20)
    at _callee2$ (/home/hassan/Documents/killTime/.next/server/static/development/pages/_document.js:795:24)
    at tryCatch (/home/hassan/Documents/killTime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/hassan/Documents/killTime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/home/hassan/Documents/killTime/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/home/hassan/Documents/killTime/.next/server/static/development/pages/_document.js:272:24)
    at _next (/home/hassan/Documents/killTime/.next/server/static/development/pages/_document.js:294:9)
    at /home/hassan/Documents/killTime/.next/server/static/development/pages/_document.js:301:7
    at new Promise (<anonymous>)

next.config.js

const path = require("path");
const glob = require("glob");

module.exports = {
  // excludeFile: str => /\*.{spec,test}.js/.test(str)
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /(\.test.js$)|\/__tests__\/|__mocks__/,
        loader: "ignore-loader"
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    );
    return config;
  }
};

Expected behavior

To run the app without any errors, and to share the context among app components.

System information

• OS: Ubuntu 18
• Browser: chrome
• Version of Next.js: latest

[Timer]

@HassanNemir the provided babel config is not valid, or required. Simply delete the file and it should start working.

[HassanNemir]

@kachkaev @timneutkens I have finally found out why, when I tried my babel config with another project, it has caused the same error, here’s my babel config

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime",
      "@babel/plugin-syntax-dynamic-import"
    ]
  },