Cannot find module 'webpack' in Node and React tutorial

Solved
cdmon
New Member
3 0 0

I've started the tutorial "Build a Shopify App with Node and React" from the first step.

I am facing an error that webpack can not be found in Build your user interface with Polaris step. This happened before "Test your Polaris import" step. Created files ( next.config.js pages/_app.js ..etc) are completely same as tutorial's one.

% npm run dev

> sample-embedded-app@1.0.0 dev /Users/cdmon/Desktop/sample-embedded-app
> node server.js

Loaded env from /Users/cdmon/Desktop/sample-embedded-app/.env
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack'
Require stack:
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/index.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/cjs.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/@zeit/next-css/css-loader-config.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/@zeit/next-css/index.js
- /Users/cdmon/Desktop/sample-embedded-app/next.config.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/next-server/server/config.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/server/next.js
- /Users/cdmon/Desktop/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 Object.<anonymous> (/Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/index.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/mini-css-extract-plugin/dist/cjs.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/@zeit/next-css/css-loader-config.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/@zeit/next-css/index.js',
    '/Users/cdmon/Desktop/sample-embedded-app/next.config.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/next-server/server/config.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/cdmon/Desktop/sample-embedded-app/node_modules/next/dist/server/next.js',
    '/Users/cdmon/Desktop/sample-embedded-app/server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-embedded-app@1.0.0 dev: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-embedded-app@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/cdmon/.npm/_logs/2021-02-06T06_50_47_428Z-debug.log

The tutorial does not show "npm install webpack" but should I do this?

My environment is below.

macOS Big Sur 11.1

% nodebrew -v
nodebrew 1.0.1

% node -v
v14.15.4

 

0 Likes
Mircea_Piturca
Shopify Partner
1462 39 285

This is an accepted solution.

Hey,

Try to downgrade your Next.js to 10.0.5 => "next": "10.0.5"

Had the same issue yesterday caused by next 10.0.6 version. This will probably get patched soon but until then 10.0.5 should work.

Finally—Add variant descriptions to your products
cdmon
New Member
3 0 0

Thank you for the perfect answer. It works!

0 Likes
PapaTango
New Member
3 0 0

Hi, I'm brand new to javascript and node and next and all that, can you provide the correct powershell command to do the downgrade?

0 Likes
cdmon
New Member
3 0 0

Hi, here is what I did to downgrade next.

npm install next@10.0.5

 

0 Likes