Shopify App Build issue

Solved

Shopify App Build issue

SlangLabsDev
Shopify Partner
5 0 0

I am building a Shopify app using the express template. When I run `vite build`, it adds `var o2=require("react")` in the build file. This makes the app build break when loading the app in shopify in the browser with the error

Uncaught ReferenceError: require is not defined

Screenshot 2023-09-21 at 2.59.08 PM.png

I need some urgent help in resolving this as we are almost finished with all the requirements for submitting our app for review and it has stopped working all of a sudden. Same app build was working earlier when I built the app for the first time using the same dockerfile. 

Accepted Solution (1)

Liam
Community Manager
3108 341 880

This is an accepted solution.

Hi again SlangLabs,

 

The Shopify internal dev teams have investigated this issue and it appears it was related to our i18nFormat plugin for the i18next library. We've shipped a fix to the above plugin to resolve this, so to fix this issue developers should update @Shopify/i18next-shopify to 0.2.9. If anyone is still experiencing this problem after updating please let us know.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 5 (5)

SlangLabsDev
Shopify Partner
5 0 0
  • I have tried excluding dependencies that have require("react") in their code from the optimizeDeps option in the vite build configuration.
  • In our code we are not using require anywhere (double, triple checked).
  • Tried adding the commonjs plugin for vite as well. 

Liam
Community Manager
3108 341 880

Hi SlangLabsDev,

 

From looking into this, it does seem a few other developers are experiencing similar issues. A developer on stackoverflow was able to resolve this by instructing Vite to “transform” the require statement during its asset building. Would the approach linked above work for you? 

 

I've also flagged this behaviour to our internal team to see if we can improve the experience on our side. 

 

Hope this helps,

 

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

SlangLabsDev
Shopify Partner
5 0 0

We're in the middle of trying a hack to rollback to the last working version of the container image for now. I'll try the above method after this and get back with the outcome. It does seem to make sense. Thanks for the quick response though, Liam.

Liam
Community Manager
3108 341 880

This is an accepted solution.

Hi again SlangLabs,

 

The Shopify internal dev teams have investigated this issue and it appears it was related to our i18nFormat plugin for the i18next library. We've shipped a fix to the above plugin to resolve this, so to fix this issue developers should update @Shopify/i18next-shopify to 0.2.9. If anyone is still experiencing this problem after updating please let us know.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

SlangLabsDev
Shopify Partner
5 0 0

Thank you Liam for the solution. After we tried the hack we mentioned earlier, it worked but was not a feasible approach. We updated the version number afterwards for the package you mentioned and it worked like a charm.