ReferenceError: require is not defined

Laravel
10

Hello @saqibrashidRT, welcome to Fly.io! And of course, thanks for your input @redjonzaci!

Now, on to a probable solution:

Error context
The error “require is not defined” is caused when the method “require()”( used to import some dependency ) is called in a none- Node.js environment, like the browser. In the case above, “react” is being imported through the line var wb = require("react") found in one of the assets built by vite during the running of npm run build .

Probable solution
Now, there are other ways to call in dependency in JavaScript aside from the require() method. In fact, we can instruct Vite to “transform” statements like require which are not browser friendly, to browser friendly declaration during its asset building.

To do this, we can revise the vite.config.js ( in the shopify-php template’s case, found in web/frontend/vite.config.js ) to add this “build” instruction through “transformMixedEsModules”:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true
+    }
+  },

Hopefully the above removes the “require is not defined” issue, let me know if it works!

3 Likes