ReferenceError: require is not defined


I am working with Shopify PHP template and I have just created a sample app however, I’m facing this issue where it says “Uncaught ReferenceError: require is not defined” in the browser console. Please see the following fly.toml files and my .env file:


fly.toml app configuration file generated for martinfly on 2023-09-19T16:24:44+05:00

See Fly Launch configuration (fly.toml) · Fly Docs for information about how to use this file.

app = “martinfly”
primary_region = “syd”


PORT = “8081”
SCOPES = “write_products”

internal_port = 8081
force_https = true
auto_stop_machines = true
auto_start_machines = true
min_machines_running = 0
processes = [“app”]

APP_NAME=“Shopify PHP App”



Any help would be deeply appreciated as I am facing the same issue with my other application which has all the code. I thought maybe the issue is somewhere with my code logic but I have just created this shopify PHP template app and just created the app on as well. The issue is somewhere in the configurations I believe.

Could you link to the template you are using
and maybe add a stack trace related to the error?

Thanks for the response redjonzaci. I really appreciate it. I basically use the following command to initialize the app: npm init @shopify/app@3.48.4 – --template php

What should I share related to the stack trace? I mean the error is showing on the browser console so let me share something related to that:

Uncaught ReferenceError: require is not defined
at index-9b5a3eff.js:69:180779
(anonymous) @ index-9b5a3eff.js:69

index-9b5a3eff.js:69 is:
var wb = require(“react”)

FROM php:8.1-fpm-alpine


RUN apk update && apk add --update nodejs npm
composer php-pdo_sqlite php-pdo_mysql php-pdo_pgsql php-simplexml php-fileinfo php-dom php-tokenizer php-xml php-xmlwriter php-session
openrc bash nginx

RUN docker-php-ext-install pdo

COPY --chown=www-data:www-data web /app

Overwrite default nginx config

COPY web/nginx.conf /etc/nginx/nginx.conf

Use the default production configuration

RUN mv “$PHP_INI_DIR/php.ini-production” “$PHP_INI_DIR/php.ini”

RUN composer install
RUN touch /app/storage/db.sqlite
RUN chown www-data:www-data /app/storage/db.sqlite

RUN cd frontend && npm install && npm run build
RUN composer build

ENTRYPOINT [ “/app/” ]

I am trying to deploy this, but I can’t get past the “missing Shopify API key” error,
how did you set it?

You need to pass add —build-arg SHOPIFY_API_KEY=<client_id> in the deploy command

Thanks, I got past that, but I am sorry, deployment had issues and I am not able to access the app.

I couldn’t get past these in deployment:

Let’s wait for a team member to get to this.

In my case, I don’t see any error in these logs. When I open the app from shopify admin it even reaches the index.jsx that is being called from index.html of the public folder. But then from there it starts throwing the “require is not defined” error even though there is no require used anywhere.

1 Like

I think the issue is with vite build command that basically generates build files as the “require” exists in the build files created afterwards

Hello @saqibrashidRT, welcome to! 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!


Thanks a lot for your feedback @kathrynannetan. Let me try this and get back to you in any case. Thanks again.

1 Like

Thanks a lot @kathrynannetan and @redjonzaci for the input. I can confirm this resolved my issue. Really grateful for the help Kath.

1 Like