When attempting to use Lottie Player within a Shopify application... ReferenceError: window is not defined at Object.parcelRequire.eBH8../dom.js (.../node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:26:609

[dnk8n]

I followed Shopify tutorial, for links to full tutorial see https://github.com/Shopify/shopify-demo-app-node-react

I amended to use heroku (also free, instead of ngrok... see instructions below) so that the application could always be up even when I am away with laptop shutdown.

Instructions on what I did:

• git clone git@gitlab.com:Shopify/shopify-demo-app-node-react.git

• cd shopify-demo-app-node-react

• Install Heroku CLI

• heroku login

• heroku create **lottie-player** (might have to substitute 'lottie-player' for a unique name, also sub going forward with these instructions)

• heroku git:remote -a **lottie-player**

• See https://dashboard.heroku.com/apps/**lottie-player**/settings (app URL can be found on this page, e.g. "Your app can be found at https://**lottie-player**.herokuapp.com/", remember to potentially sub in your app name for lottie-player)

The rest of the instructions are based on the official Shopify tutorial. No need to read the entire tutorial but it is recommended. What follows is a shortcut to get things up.

• Get API keys from Shopify and add url above to Shopify, see https://github.com/Shopify/shopify-demo-app-node-react for Sopify tutorial links

• As guided here, https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/charge-a-fee-using-the-billing-api#set-up, add these environment variables

• git push heroku master

• Through Shopify, go to 'Test your app' (on first test you will get an opportunity to create a dev store)

• You might have to make a test payment (don't worry, it doesn't bill you for real)

• Validate the app is functional.

• Make an edit to include lottie-web player, see commit - https://gitlab.com/dnk8n/shopify-demo-app-node-react/-/commit/ebb2904eaf5a73210806f63ad3edb68d939ac23e

• First git add/commit then git push heroku master

• Again validate you can see your lottie-player based change (Currently this is not working)

• An alternate that does work and is successfully deployed is - https://gitlab.com/dnk8n/shopify-demo-app-node-react/-/commit/85e436c7bcb3bac02242bc44ece50f3e2910ee81

• This uses the react-lottie package

Question is, why would this work while the lottie-player implementation does not?

The debug log of failed deployment:

remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 12.x...
remote:        Downloading and installing node 12.16.2...
remote:        Using default npm version: 6.14.4
remote:        
remote: -----> Restoring cache
remote:        - node_modules
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        added 7 packages from 12 contributors and audited 7837 packages in 11.85s
remote:        
remote:        19 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 157 vulnerabilities (156 low, 1 moderate)
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote: -----> Build
remote:        Running build
remote:        
remote:        > shopify-demo-app-node-react@1.0.0 build /tmp/build_d28b5bfecc417c7b58461cc77ef94a6f
remote:        > next build
remote:        
remote:        Creating an optimized production build ...
remote:        
remote: Browserslist: caniuse-lite is outdated. Please run next command `npm update`
remote: > Build error occurred
remote: ReferenceError: window is not defined
remote:     at Object.parcelRequire.eBH8../dom.js (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:26:609)
remote:     at f (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:468)
remote:     at p (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:544)
remote:     at Object.parcelRequire.bhxD.lit-html/lib/shady-render.js (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:34:557)
remote:     at f (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:468)
remote:     at p (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:544)
remote:     at Object.parcelRequire.M8c7.lit-element (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:42:180)
remote:     at f (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:468)
remote:     at parcelRequire.ytxR (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:771)
remote:     at Object.<anonymous> (/tmp/build_d28b5bfecc417c7b58461cc77ef94a6f/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js:1:1023)
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! shopify-demo-app-node-react@1.0.0 build: `next build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the shopify-demo-app-node-react@1.0.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.s7Mom/_logs/2020-04-23T08_29_00_209Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        Some possible problems:
remote:        
remote:        - Node version not specified in package.json
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to lottie-player.
remote: 

[ThomasCybulski]

@dnk8n Is it working right now? I got the same message

[dnk8n]

@ThomasCybulski I think the bug I reported is still a problem.

[yashwp]

I'm also having same issue.

[cgousley]

Same issue here, but not with Shopify.

[b-insh]

Same issue, with NextJS app. update: swapped to https://github.com/LottieFiles/lottie-react easily - all fine

[karamalie]

Please use the https://github.com/LottieFiles/lottie-react player on react apps @dnk8n @yashwp @cgousley . The issue with shopify is because the player is a web component and must be imported as a client-side module that runs only on the browser. I've updated the readme in the development branch with an example of implementing this in nextJS as well @b-insh .

[karamalie]

Closing due to inactivity.