npm error | Error: Cannot find module '@emotion/styled'

Question

I am having an issue running my Node project. This issue did not exist yesterday. I can't think of anything that has changed since other than an update my OS did last night (Ubuntu 20.04).

Stack trace:

[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module '@emotion/styled'
Require stack:
- /home/jake/node_modules/@mui/styled-engine/node/index.js
- /home/jake/node_modules/@mui/system/index.js
- /home/jake/node_modules/@mui/core/node/Popper/Popper.js
- /home/jake/node_modules/@mui/core/node/Popper/index.js
- /home/jake/node_modules/@mui/core/node/index.js
- /home/jake/Documents/Dev/Stock-Informer/models/User.js
- /home/jake/Documents/Dev/Stock-Informer/middleware/passport-config.js
- /home/jake/Documents/Dev/Stock-Informer/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> (/home/jake/node_modules/@mui/styled-engine/node/index.js:45:38)
    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) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/jake/node_modules/@mui/styled-engine/node/index.js',
    '/home/jake/node_modules/@mui/system/index.js',
    '/home/jake/node_modules/@mui/core/node/Popper/Popper.js',
    '/home/jake/node_modules/@mui/core/node/Popper/index.js',
    '/home/jake/node_modules/@mui/core/node/index.js',
    '/home/jake/Documents/Dev/Stock-Informer/models/User.js',
    '/home/jake/Documents/Dev/Stock-Informer/middleware/passport-config.js',
    '/home/jake/Documents/Dev/Stock-Informer/server.js'
  ]
}
[nodemon] app crashed - waiting for file changes before starting...

It's seems to want a React module, @emotion/style, but my project is not a React project.

package.json:

{
  "name": "stock-informer",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-flash": "^0.0.2",
    "express-session": "^1.17.2",
    "mongoose": "^6.0.13",
    "passport": "^0.5.0",
    "passport-local": "^1.0.0",
    "pug": "^3.0.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

I tried deleting node_modules and package-lock.json and running npm install, but it didn't change anything. I have also npm install @emotion/styled to see if that would do anything, but it didn't.

I haven't been able find a solution anywhere; any help would be appreciated.

Answer 1

I think I have faced a similar issue before the step that I follow

1. delete /node_modules
2. delete package-lock.json
3. run this command npm cache clean --force or yarn cache clean
4. npm install or yarn

Hope this will resolve your issue

Answer 2

The build process was excluding the indirect dependencies of my dependencies:

So adding the indirect dependencies as below worked:

import styled from "@emotion/styled";

let MustHave_DummyForSlsBuild = styled.div({
  color: "hotpink",
});


<div className="App">

  ... main code here ...

  <MustHave_DummyForSlsBuild></MustHave_DummyForSlsBuild>
</div>