1

I'm trying to build a Next.js project using yarn's Plug'n'Play feature. I have some pages created and I've added some packages, among them mathjs: '^10.3.0' to help me parse some user input. I'm using typescript together with eslint.

Everything works fine when I run yarn dev, but when I try to build the project with yarn build I get the following error:

# yarn build
info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'mathjs' imported from E:\Code\JavaScript\Web\next\yolcruz\.next\server\pages\calculator.js
Did you mean to import mathjs-npm-10.3.0-2f674e19b3-3fb3b66be9.zip/node_modules/mathjs/lib/cjs/index.js?
    at new NodeError (node:internal/errors:371:5)
    at packageResolve (node:internal/modules/esm/resolve:930:9)
    at moduleResolve (node:internal/modules/esm/resolve:976:18)
    at defaultResolve (node:internal/modules/esm/resolve:1078:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ESMLoader.import (node:internal/modules/esm/loader:332:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1042:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:46) {
  type: 'Error',
  code: 'ERR_MODULE_NOT_FOUND'
}
info  - Collecting page data .

Since I'm using yarn's Plug'n'Play, I dont have a node_modules folder and I dont get any other errors during development regarding that or any other package. Can someone be kind enough to tell me how I can fix this? Is it because of the package or it has to do with Plug'n'Play?

My package.json looks like this:

{
  "name": "yolcruz",
  "packageManager": "yarn@3.1.1",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest",
    "eslint-plugin-react": "latest",
    "mathjs": "^10.3.0",
    "next": "^12.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
  },
  "devDependencies": {
    "@types/eslint": "^8",
    "@types/node": "^17.0.18",
    "@types/react": "^17",
    "@types/react-dom": "^17",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.9.0",
    "eslint-config-next": "^12.1.0",
    "typescript": "^4.5.5"
  }
}

I'm also using node version 16.14.0

Yoltic Cruz Tello
  • 122
  • 1
  • 7

1 Answers1

2

It seems I've solved the problem. I just updated to latest yarn version with yarn set version latest and it updated to v3.2.0. Then I ran yarn rebuild and updated or removed some of the dependencies that gave errors. It now works perfectly

Yoltic Cruz Tello
  • 122
  • 1
  • 7
  • 1
    Thank you, the `yarn rebuild` command was key for me! In my case I was on yarn@3.2.3, I ran `yarn set version latest` and it upgraded to 3.2.4, but then yarn rebuild revealed that `@typescript-eslint/parser` apparently had to be added to my project as a dev dependency, because it was listed as a peer dependency by `@typescript-eslint/eslint-plugin` but not actually installing (as expected of a peer dependency) but also not warning me during a regular `yarn install`. Adding this peer dependency caused VSCode to properly resolve the zip pnp modules, and yarn build to work again! – Japser36 Oct 13 '22 at 00:35