Problem building app with Node and React

quadri
Shopify Partner
38 0 8

I'm followin the tutorial Build a Shopify app with Node.js and React

 

but when doing point n.8 of Set up a Node.js server I get this error:

> shopify-demo-app-node-react@1.0.0 dev /Users/ale/Code/app-coupon
> node server.js

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'next'
Require stack:
- /Users/ale/Code/app-coupon/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/ale/Code/app-coupon/server.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/ale/Code/app-coupon/server.js' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shopify-demo-app-node-react@1.0.0 dev: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shopify-demo-app-node-react@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ale/.npm/_logs/2019-10-17T15_55_49_551Z-debug.log

 

Please help

katiedavis
Shopify Staff (Retired)
Shopify Staff (Retired)
39 7 10

Hi @quadri 

Did you install next?

Please make sure you follow the steps here:

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/set-up-your-app#cre...

0 Likes
OTM
Shopify Expert
667 170 236

Hi, @quadri ,

This is Evita from On The Map.

 

I think you forgot to install npm package, run this code in the terminal inside your project:

npm install next

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
quadri
Shopify Partner
38 0 8

I don't exactly how but react and react-dom were installed, next was not.

 

npm install --save react react-dom next

 

I run the above command again and I've been able to go on with the tutorial till Install Polaris, when I restart the server I get this

 

[ error ] ./pages/_app.js
Module not found: Can't resolve '@shopify/app-bridge-react' in '/Users/ale/Code/app-coupon/pages'
> Ready on http://localhost:3000
[ event ] client pings, but there's no entry for page: /
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ error ] ./pages/_app.js
Module not found: Can't resolve '@shopify/app-bridge-react' in '/Users/ale/Code/app-coupon/pages'
Error: Cannot find module '/Users/ale/Code/app-coupon/.next/build-manifest.json'
Require stack:
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js
- /Users/ale/Code/app-coupon/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.loadComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js:13:9)
    at DevServer.renderToHTMLWithComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:198:48)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:228:21)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js:145:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.render (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:188:22)
    at async Object.fn (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:147:21)
    at async DevServer.run (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:157:17)
    at async /Users/ale/Code/app-coupon/server.js:38:5 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js',
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js',
    '/Users/ale/Code/app-coupon/server.js'
  ]
}
Error: Cannot find module '/Users/ale/Code/app-coupon/.next/build-manifest.json'
Require stack:
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js
- /Users/ale/Code/app-coupon/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.loadComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js:13:9)
    at DevServer.renderToHTMLWithComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:198:48)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:228:21)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js:145:26)
    at async DevServer.render (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:188:22)
    at async Object.fn (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:147:21)
    at async DevServer.run (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:157:17)
    at async /Users/ale/Code/app-coupon/server.js:38:5 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js',
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js',
    '/Users/ale/Code/app-coupon/server.js'
  ]
}
Error: Cannot find module '/Users/ale/Code/app-coupon/.next/build-manifest.json'
Require stack:
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js
- /Users/ale/Code/app-coupon/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.loadComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js:13:9)
    at DevServer.renderToHTMLWithComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:198:48)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:228:21)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js:145:26)
    at async DevServer.render (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:188:22)
    at async Object.fn (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:147:21)
    at async DevServer.run (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:157:17)
    at async /Users/ale/Code/app-coupon/server.js:38:5 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js',
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js',
    '/Users/ale/Code/app-coupon/server.js'
  ]
}
Error: Cannot find module '/Users/ale/Code/app-coupon/.next/build-manifest.json'
Require stack:
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js
- /Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js
- /Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js
- /Users/ale/Code/app-coupon/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.loadComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js:13:9)
    at DevServer.renderToHTMLWithComponents (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:198:48)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:228:21)
    at DevServer.renderErrorToHTML (/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js:145:26)
    at async DevServer.render (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:188:22)
    at async Object.fn (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:147:21)
    at async DevServer.run (/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js:157:17)
    at async /Users/ale/Code/app-coupon/server.js:38:5 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/load-components.js',
    '/Users/ale/Code/app-coupon/node_modules/next-server/dist/server/next-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next-dev-server.js',
    '/Users/ale/Code/app-coupon/node_modules/next/dist/server/next.js',
    '/Users/ale/Code/app-coupon/server.js'
  ]
}
RagnarRainMaker
New Member
2 0 0

Please disregard my comment.  I see now that I missed a part of the tutorial. 

0 Likes