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.