Cannot resolve the error while building Shopify Tutorial App

Retired Boards Appdev Store Design

AI-generated summary

Build failures started after adding Shopify Polaris (the UI component library) to a Node/React tutorial app. The main errors were CSS/build issues such as tapAsync being undefined, parser errors, and missing .next manifest files like build-manifest.json and pages-manifest.json.

Key findings:

  • A likely cause was dependency incompatibility, especially with newer Node versions and tutorial packages.
  • One reply pointed to known issues with the @zeit/next-css setup when using Node versions above v14.15.1, plus a GitHub PR with fixes.
  • Another workaround was to downgrade Webpack (the JavaScript bundler) from 5.x to 4.x.

Concrete fix that worked:

  • Set webpack in devDependencies to ^4.46.0.
  • Delete package-lock.json and the existing node_modules folder.
  • Run npm install again.

Outcome:

  • The original poster confirmed the issue was resolved after changing dependency versions and reinstalling packages.
  • A remaining broader concern was that the tutorial should specify exact package versions to avoid these dependency conflicts.
1

I am in fixed position, was trying all the steps mentioned in the tutorial page for building the shopify app. https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris

My application was successful till the step 3 or till Polaris was introduced. The app had already got connected or you can say embedded with Shopify’s development store. But when I moved forward to follow steps on Step 4 Using Polaris for building the UI. I am fixing the below error.

npm run dev
Debugger attached.

> sample-embedded-app@1.0.0 dev /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app
> node server.js

Debugger attached.
Loaded env from /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/.env
Debugger attached.
Debugger attached.
Debugger attached.
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

error - ./node_modules/@shopify/polaris/dist/styles.css
TypeError: Cannot read property 'tapAsync' of undefined
> Ready on http://localhost:3010
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/@shopify/polaris/dist/styles.css
TypeError: Cannot read property 'tapAsync' of undefined
Error: Cannot find module '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/.next/build-manifest.json'
Require stack:
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/load-components.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/api-utils.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/server/next.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadComponents (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/load-components.js:1:1035)
    at runMicrotasks (

I am unclear about which module it is not able to get. The Error says ./next/build-manifest.json file but such file doesn't exist. I have already ran the below packages install on npm.

```css
npm install --save @zeit/next-css /polaris
2

Hey there, Sahil! It looks like there are some issues relating to that zeit dependency when using node -v > v14.15.1. Could you check your node version and see if that could be part of the problem?

If you’re running a later version of node, someone has put up a PR to the demo app repo on GitHub to fix this issue, which we’ll take a look at. But for now, you should be able to reference their code changes to hopefully resolve this. Here’s the link to the PR. Hope it helps!

3

Going further down the tutorial on Shopify-App-Bridge configuration I am again struck with dependencies errors.

Module parse failed: parser.isAsiPosition is not a function
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.isAsiPosition is not a function
Error: Cannot find module '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/.next/server/pages-manifest.json'
Require stack:
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/require.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/load-components.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/api-utils.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/server/next.js
- /Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at getPagePath (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/load-components.js:1:807)
    at DevServer.findPageComponents (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:74:296)
    at DevServer.renderErrorToHTML (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:134:120)
    at DevServer.renderErrorToHTML (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/server/next-dev-server.js:34:974)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.render (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:56:580)
    at async Router.execute (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js:34:504) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/require.js',
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/node_modules/next/dist/server/next.js',
    '/Users/sahil/Documents/Programming/nodecourse/sample-embedded-app/server.js'
  ]
}

Rather than getting all latest dependencies in tutorials can be specify the exact versions which helps runs the entire tutorial smoothly.

4

I was also troubled by this phenomenon, but I solved it by the following method.

Check the version of webpack you are using.

If the version you are using is 5.x, try changing to use 4.x.

I’ve fixed both of the two reported bugs this way.

Please check once and try if applicable.

5

@Y-Suzuki Thanks for the suggestion, can you help me with which exact version to downgrade to and how to do that.
do I have to run npm install --save ‘webpack^4.19.0’

Sorry! if I am being naive, kindly help me this initial steps. I am still learning Node.

6

@SahilS

I took the following steps.

step1.

I rewrote the webpack part of packaged.json as follows


"devDependencies": {
"webpack": "^4.46.0"
}

step2.

Removed packaged-lock.json

step3.

In the terminal, I typed the “npm install” command

I’m also a beginner, so I’m not sure it fits, but I hope it helps.

7

Done it. How silly of me!!

it was just change the dependencies version and remove nam package folder and re run the command npm install

8

Yeah!! I figured same @Y-Suzuki Thanks for your reply too.