'Next js webpack module not found in npm local package

I'm making a Next Js app that has it's mongoose models in a local npm package, so they can be shared with other parts of the backend. But I'm getting these errors:

Module not found: Can't resolve 'supports-color' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/debug/src'

../shared-stuff/node_modules/mongodb/lib/bson.js
Module not found: Can't resolve 'bson-ext' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

../shared-stuff/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'kerberos' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

../shared-stuff/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'snappy' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

../shared-stuff/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'snappy/package.json' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

../shared-stuff/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'aws4' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

../shared-stuff/node_modules/mongodb/lib/encrypter.js
Module not found: Can't resolve 'mongodb-client-encryption' in '/Users/akopyl/Projects/my-project/shared-stuff/node_modules/mongodb/lib'

My guess is that this is caused by webpack trying to find the dependencies of the shared-stuff package in the my-project/app directory, instead of the my-project/shared-stuff directory.

The project file structure:

my-project
├── app (This is the Next Js app that has errors)
│   ├── lib
│   ├── next.config.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── pages
│   ├── public
│   └── styles
├── gather
│   ├── ecosystem.config.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   └── src
└── shared-stuff
    ├── index.js
    ├── models
    ├── node_modules
    ├── package-lock.json
    └── package.json

The app/package.json file:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "mongoose": "^6.2.6",
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.49.9",
    "shared-stuff": "file:../shared-stuff"
  },
  "devDependencies": {
    "eslint": "^8.11.0",
    "eslint-config-next": "^12.1.0"
  }
}

The shared-stuff/package.json file:

{
  "name": "shared-stuff",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "mongoose": "^6.2.6"
  }
}

Also an interesting thing I noticed is that while both packages have only mongoose as a dependency, the shared-stuff/node_modules folder contains a mongodb folder, but app/node_modules doesn't.

Also another package in the gather directory also has shared-stuff as a dependency, but it runs as expected, since it doesn't use webpack.

I've ran npm ci in every one of the 3 projects, tried to disable eslint, tried to use the webpack.IgnorePlugin in next.config.js to ignore shared-stuff, but to no success.

Solution 1:^[1]

So the solution I found is to initialize the parent directory my-project as a npm project itself and define the subfolders as its workspaces.

my-project $ npm init -y
my-project $ npm install

Then add the following line to my-project/package.json:

"workspaces": ["./app", "./gather", "./shared-stuff"]

After these steps the dependencies of the local folder package are resolved properly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	akopyl

'Next js webpack module not found in npm local package

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]