Error: Cannot find module '@babel/preset-react'

[khandakershahi]

Hi I got this error. I stated to follow the project yesterday. It was working fine but today when I start the project - it shows this error. I after searching in the net I got this solution on another project that I need to change the text in .babelrc.

sanity-io/sanity#3320 (comment)

So what went wrong I can't figure out.

commerce@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /data/node/ecommerce/ecommerce/.env
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /data/node/ecommerce/ecommerce/.babelrc
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module '@babel/preset-react
Require stack:
- /data/node/ecommerce/ecommerce/node_modules/next/dist/compiled/babel/bundle.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/compiled/babel/code-frame.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseScss.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/build/webpack-config.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/dev/hot-reloader.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/dev/next-dev-server.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/next.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/server/lib/start-server.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/cli/next-dev.js
- /data/node/ecommerce/ecommerce/node_modules/next/dist/bin/next
    at loadPreset.next (<anonymous>)
    at createDescriptor.next (<anonymous>)

package.json

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/core": "^7.17.9",
    "@sanity/client": "^3.2.0",
    "@sanity/image-url": "^1.0.1",
    "@stripe/stripe-js": "^1.25.0",
    "canvas-confetti": "^1.5.1",
    "next": "12.1.0",
    "next-sanity-image": "^3.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0",
    "react-icons": "^4.3.1",
    "stripe": "^8.209.0"
  }
}

.babelrc

{
    "presets": ["@babel/preset-react"]
  }

.eslintrc.json

{
  "extends": [ "next/babel", "next/core-web-vitals"]
}

[vaneela]

I also got the same error in sanity package. How can I resolve it?

[khandakershahi]

@vaneela I changed code in .babelrc

From

{
    "presets": ["@babel/preset-react"]
  }

To

{
    "presets": ["next/babel"]
  }

[vaneela]

actually I got this error
error - ./lib/client.js:2:0
Module not found: Can't resolve '@sanity'
1 | import sanityClient from '@sanity/cli';

2 | import imageUrlBuilder from '@sanity';
3 |
4 | export const client = sanityClient({
5 | projectID: 'ajqd8ggi',

Import trace for requested module:
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

[marvelous-007]

i installed babel manually with npm @babel/preset-react