ReferenceError: React is not defined in nextjs / blitzjs

[rizrmd]

When using nextjs using this next.config.js:

const { ESBuildPlugin } = require('esbuild-loader')
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(new ESBuildPlugin())
    const convertToESBuild = (obj) => {
      if (obj.loader === "next-babel-loader") {
        return {
          loader: 'esbuild-loader',
          options: {
            loader: 'tsx',
            target: 'es2015'
          }
        }
      }
      return obj;
    }

    const rule = config.module.rules[1];
    if (rule) {
      if (Array.isArray(rule.use)) {
        rule.use = rule.use.map(e => {
          if (typeof e === "object") {
            return convertToESBuild(e);
          }
          return e;
        })
      } else {
        rule.use = convertToESBuild(rule.use);
      }
    }
    return config
  },
}

and using webpack@5.5.1 with this added on my package.json:

  "resolutions": {
    "webpack": "^5.5.1"
  },

This is the full error message:

ReferenceError: React is not defined
    at Object../app/styles/index.tsx (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\pages\_app.js:526:38)
    at __webpack_require__ (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\webpack-runtime.js:24:42)
    at Object../pages/_app.tsx (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\pages\_app.js:592:68)
    at __webpack_require__ (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\webpack-runtime.js:24:42)
    at Function.__webpack_require__.X (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\webpack-runtime.js:104:20)
    at C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\pages\_app.js:902:28
    at Object.<anonymous> (C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\server\pages\_app.js:903:3)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Object.newLoader [as .js] (C:\Users\Riz\Desktop\parentuniv\node_modules\pirates\lib\index.js:104:7)
event - build page: /next/dist/pages/_error
event - compiled successfully
wait  - compiling...

24:03:47.813.000         ERROR  Error while processing the request

[rizrmd]

FYI, this is indeed faster than regular webpack 5 on nextjs@10.0.1. The speed improvement is noticable (I don't count it though).

[rizrmd]

OK, I just added import React from "react" to all my pages and my components manually,
error message ReferenceError: React is not defined are gone - maybe we can improve esbuild-loader by specifying what module to auto import in jsx/tsx file ?

And another error sprouted, I am using blitzjs though, so maybe following error message are not applicable to regular nextjs project:

Error  Cannot find module '../webpack-runtime.js'
Require stack:
- C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\__db.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\dist\server.cjs.development.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\dist\index.js
- C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\next.config.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\next-server\server\config.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\server\next.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\cli\next-dev.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\bin\next
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\bin\next-patched

[privatenumber]

Thanks for the issue @rizkyramadhan

maybe we can improve esbuild-loader by specifying what module to auto import in jsx/tsx file ?

esbuild-loader deals with interfacing esbuild from Webpack to apply transformations and doesn't concern itself with dependency resolution.

To implicitly resolve dependencies in your build, you can use the ProvidePlugin built-in to Webpack.

The second error doesn't seem relevant to esbuild-loader either.