Preset not found @babel/react when using browserify to bundle js code

Question

In the project that I work at the moment, we use browserify. I have done npm i into my console. Then when I wanted to generate the js with the command

browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js 

it throw an error

preset not found @babel/react 

Like every developer I went online and did a search for @babel/react but nothing came up. I have seen variations as @babel/preset-react and tried to use them but it didn't solve my problem.

At that point, my package.json locked like:

{
  ...
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react",
            "stage-1"
          ],
          "plugins": [
            "transform-object-rest-spread"
          ]
        }
      ]
    ]
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-1"
    ]
  },
  "scripts": {
    "build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
    "buildSignUp": "npm run build-js",
    ...
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ungap/url-search-params": "^0.1.2",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "braintree-web": "^3.17.0",
    "form-serialize": "^0.7.1",
    "jest-junit": "^6.3.0",
    "nock": "^10.0.6",
    "object-assign": "^4.1.1",
    "react": "^15.4.2",
    "react-accessible-dropdown": "^1.0.2",
    "react-animate-height": "^0.10.8",
    "react-dom": "^15.4.2",
    "react-dropdown": "^1.2.0",
    "react-modal": "^3.8.1",
    "react-redux": "^5.0.6",
    "react-responsive-modal": "^1.9.4",
    "react-scroll": "^1.4.7",
    "react-select": "^2.1.2",
    "react-slick": "^0.24.0",
    "react-swipeable": "^5.4.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "slick-carousel": "^1.8.1",
    "validator": "^6.2.1"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-jest": "^23.6.0",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.22.0",
    "babel-preset-stage-1": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "core-js": "^2.5.3",
    "envify": "^4.1.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-15": "^1.2.0",
    "jest": "^23.6.0",
    "react-test-renderer": "^15.6.2",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "^1.5.3",
    "redux-test-utils": "^0.3.0",
    "uglify-js": "^3.3.9",
    "uglifyify": "^4.0.5"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "build"
    ]
  },
  "jest": {
    "setupFiles": [
      "<rootDir>/test-setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "testMatch": [
      "**/tests/*.js?(x)"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/obj/"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/obj/"
    ]
  }
}

What to install or what to change in order to fix this problem?

Answer 1

The solution in my case was to extend the preset of the package.json Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.

I had deleted my node_module. Run npm i again. Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.

{
  "main": "App.jsx",
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react",
            "babel-preset-react",
            "stage-1"
          ],
          "plugins": [
            "transform-object-rest-spread"
          ]
        }
      ]
    ]
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "babel-preset-react",
      "stage-1"
    ]
  },
  "scripts": {
  ...
  }
}

This solved my problem. Please let me know if it works for you as well.