Unexpected token: File was processed with these loaders: ./node_modules/source-map-loader/dist/cjs.js

Question

I've created a simple project using create-react-app . Then I added another react project named dashboard (using npm pack and install in target project). Everything was ok until I imoported one component of dashboard project(AdminLayout from Admin.js) to my index.js file(entry point), Now when I try to run project I see this error:

SyntaxError: E:\crud-users-react\node_modules\light-bootstrap-dashboard-react\src\layouts\Admin.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:11):

So I convert Admin.js to Admin.jsx and now I see this error:

ERROR in ./node_modules/light-bootstrap-dashboard-react/src/layouts/Admin.jsx 40:10 Module parse failed: Unexpected token (40:10) File was processed with these loaders: ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders

It seems my porject doesn't support jsx format! Here is my index.js

import AdminLayout from "../node_modules/light-bootstrap-dashboard-react/src/layouts/Admin.jsx";

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/admin" element={<AdminLayout/>} />
      <Route path="/" element={<Navigate to="/admin/dashboard"/>}/>
     
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Here is Admin.jsx

function Admin() {
  const [image, setImage] = React.useState(sidebarImage);
  const [color, setColor] = React.useState("black");
  const [hasImage, setHasImage] = React.useState(true);
  const location = useLocation();
  const mainPanel = React.useRef(null);
  const getRoutes = (routes) => {
    return routes.map((prop, key) => {
      if (prop.layout === "/admin") {
        return (
          <Route
            path={prop.layout + prop.path}
            render={(props) => <prop.component {...props} />}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };
  React.useEffect(() => {
    document.documentElement.scrollTop = 0;
    document.scrollingElement.scrollTop = 0;
    mainPanel.current.scrollTop = 0;
    if (
      window.innerWidth < 993 &&
      document.documentElement.className.indexOf("nav-open") !== -1
    ) {
      document.documentElement.classList.toggle("nav-open");
      var element = document.getElementById("bodyClick");
      element.parentNode.removeChild(element);
    }
  }, [location]);
  return (
    <>
      <div className="wrapper">
        <Sidebar color={color} image={hasImage ? image : ""} routes={routes} />
        <div className="main-panel" ref={mainPanel}>
          <AdminNavbar />
          <div className="content">
            <Switch>{getRoutes(routes)}</Switch>
          </div>
          <Footer />
        </div>
      </div>
      <FixedPlugin
        hasImage={hasImage}
        setHasImage={() => setHasImage(!hasImage)}
        color={color}
        setColor={(color) => setColor(color)}
        image={image}
        setImage={(image) => setImage(image)}
      />
    </>
  );
}

package.json:

{
  "name": "crud-users-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^4.1.0",
    "@coreui/react": "^4.1.2",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fontsource/roboto": "^4.5.1",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@material-ui/core": "^4.12.3",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@mui/icons-material": "^5.4.2",
    "@mui/material": "^5.4.2",
    "@mui/styled-engine": "^5.4.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "chart.js": "^3.7.1",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.0",
    "light-bootstrap-dashboard-react": "^2.0.0",
    "next": "^12.0.10",
    "nuka-carousel": "^4.8.4",
    "popper": "^1.0.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-paginate": "^8.1.0",
    "react-redux": "^7.2.6",
    "react-responsive-carousel": "^3.2.22",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-simple-image-slider": "^2.3.0",
    "react-slider": "^1.3.1",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "source-map-loader": "^3.0.1",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.2",
    "webpack": "^5.69.1",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "gh-pages": "^3.2.3",
    "sass": "^1.49.7"
  }
}

I've searched these errors many times and most of the answers say I should install babel and create .babelrc file in the src folder and add the code below so here is my .babelrc:

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

But It didn't work for me yet. So I found another solution in stackoverflow: adding babel.config.json in the src folder and add the code below :

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

But I still see the same error! On the other hand I've used create-react-app approach, so I didn't have wabpack.config.js help me please!