Hi,
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
fly.toml app configuration file generated for martinfly on 2023-09-19T16:24:44+05:00
app = “martinfly”
primary_region = “syd”
[build]
[env]
PORT = “8081”
SHOPIFY_APP_URL = “https://martinfly.fly.dev”
SHOPIFY_API_KEY = “”
SCOPES = “write_products”
[http_service]
internal_port = 8081
force_https = true
auto_stop_machines = true
auto_start_machines = true
min_machines_running = 0
processes = [“app”]
.env
APP_NAME=“Shopify PHP App”
APP_ENV=production
APP_KEY=base64:x1ImHohD4tIyDDBQIkA76dfheOcm+X2YerZ6GJjsckU=
APP_DEBUG=true
LOG_CHANNEL=stack
LOG_LEVEL=debug
DB_CONNECTION=sqlite
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=/app/database/db.sqlite
DB_USERNAME=root
DB_PASSWORD=123
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 fly.io 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”)
Dockerfile:
FROM php:8.1-fpm-alpine
ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
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
WORKDIR /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/entrypoint.sh” ]
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 Fly.io 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 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
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
