React-Bootstrap – CRA – Failed to compile


When I install react-bootstrap in my CRA react app, and try to import any component such as:

import Form from "react-bootstrap";

I get this error:

Failed to compile.

./node_modules/react-bootstrap/esm/SplitButton.js
Module parse failed: Unexpected token (101:2)
You may need an appropriate loader to handle this file type.
|   renderMenuOnMount,
|   rootCloseEvent,
|   ...props
| }, ref) => /*#__PURE__*/_jsxs(Dropdown, {
|   ref: ref,

My package.json looks like this:

{
    "name": "component-3",
    "version": "0.1.1",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.15.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.23.0",
        "bootstrap": "^5.1.3",
        "dotenv": "^10.0.0",
        "firebase": "^8.10.0",
        "firebase-admin": "^9.12.0",
        "react": "^17.0.2",
        "react-bootstrap": "^2.0.2",
        "react-color-extractor": "^1.1.2",
        "react-dom": "^17.0.2",
        "react-firebase-hooks": "^3.0.4",
        "react-google-button": "^0.7.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^1.1.5",
        "react-select": "^5.2.1",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "set NODE_ENV=dev && CHOKIDAR_USEPOLLING=true react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

I want to use components such as Form in my app. I have used react-bootstrap with CRA before with no issues.

I have seen similar posts but none with this exact issue.

Any idea what might be causing this?

Source: React – Stack Overflow

November 22, 2021
Category : News
Tags: create-react-app | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.