Error: Cannot find module 'ajv/dist/core'

[JonEOffice]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version
• 1.20
• Node.js version
• 18.20.6

package.json

{
  "name": "hello-world",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-component-base": "1.20.0",
    "@microsoft/sp-core-library": "1.20.0",
    "@microsoft/sp-lodash-subset": "1.20.0",
    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
    "@microsoft/sp-property-pane": "1.20.0",
    "@microsoft/sp-webpart-base": "1.20.0",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/eslint-config-spfx": "1.20.2",
    "@microsoft/eslint-plugin-spfx": "1.20.2",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.2",
    "@microsoft/sp-module-interfaces": "1.20.2",
    "@rushstack/eslint-config": "4.0.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.6",
    "eslint": "8.57.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

npm list -g --depth=0 --json

{
  "resolved": "file:../AppData/Roaming/nvm/v18.20.6",
  "dependencies": {
    "@microsoft/generator-sharepoint": {
      "version": "1.20.0",
      "overridden": false
    },
    "corepack": {
      "version": "0.29.4",
      "overridden": false
    },
    "gulp-cli": {
      "version": "3.0.0",
      "overridden": false
    },
    "npm": {
      "version": "10.8.2",
      "overridden": false
    },
    "yo": {
      "version": "5.1.0",
      "overridden": false
    }
  }
}

Describe the bug / error

I do yo @microsoft/sharepoint and create a new project. Tried with minimal and with react framework. Both result in the error:
Error: Cannot find module 'ajv/dist/core'

I tried to google it and copilot it, but there seems to be something wrong with the package-lock.json that I create. related with ajv-draft-04

I found a package-json at the training spfx web part.
https://github.com/SharePoint/sp-dev-training-spfx-web-parts/tree/master/Demos/01-webpart
did an npm i on that one and that works, I would like to have one with react loaded or with a working envoirment. How to get this to work?

tried npm install --save-dev ajv, didn't work

Steps to reproduce

1. Install NVM to install lastest version node 18.20.6
2. npm install gulp-cli yo @microsoft/generator-sharepoint --global
3. Run yo @micrsoft/sharepoint
4. helloworld, Hello World, Webpart, React (or minimal)
5. Gulp build --ship

Expected behavior

To build succesfull

[JonEOffice]

npm install ajv@latest --save-dev

found the solution in another issue in here. The @latest is the key in this

[JonEOffice]

I also had another issue with Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Solution for that is:
npm i postcss

[andrewconnell]

Usually, when this happens, you had a glitch when downloading all the dependencies (ie: when npm install ran). Easy fix to try first:

Delete node_modules & package-lock.json, then run npm install and try again. You shouldn't have to do anything you did.

Try that & see if the issue persists. If so, push your project to a public repo in your GitHub account and share the link in this thread so others can repro.

BTW, ideally your OP uses a fenced code block for the contents of your package.json & the response from the console, making it a lot easier to read the two.

[Ashlesha-MSFT]

Hello @JonEOffice,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@JonEOffice,
Looks like npm install ajv@latest --save-dev resolved the issue.

[stefan-at-ilionx]

I ran into the same issues. The package.json that comes with Yeoman contains ajv version 6.x (not 8.x) and doesn't include postcss.

After running npm i --save-dev ajv@latest postcss, the build (and serve) succeed.