0

我使用 create-react-app 创建了一个简单的项目。然后我添加了另一个名为仪表板的反应项目（使用 npm pack 并安装在目标项目中）。一切都很好，直到我将仪表板项目的一个组件（来自 Admin.js 的 AdminLayout）导入我的 index.js 文件（入口点），现在当我尝试运行项目时，我看到了这个错误：

SyntaxError: E:\crud-users-react\node_modules\light-bootstrap-dashboard-react\src\layouts\Admin.js：目前未启用对实验性语法“jsx”的支持 (40:11)：

所以我将 Admin.js 转换为 Admin.jsx，现在我看到了这个错误：

./node_modules/light-bootstrap-dashboard-react/src/layouts/Admin.jsx 中的错误 40:10 模块解析失败：意外的令牌 (40:10) 使用这些加载器处理了文件：./node_modules/source-map- loader/dist/cjs.js 你可能需要一个额外的加载器来处理这些加载器的结果

看来我的项目不支持 jsx 格式！这是我的 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")
);

这是 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)}
      />
    </>
  );
}

包.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"
  }
}

我已经多次搜索这些错误，大多数答案都说我应该安装 babel 并在 src 文件夹中创建 .babelrc 文件并添加下面的代码，所以这是我的 .babelrc：

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

但它还没有为我工作。所以我在stackoverflow中找到了另一个解决方案：在src文件夹中添加babel.config.json并添加以下代码：

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

但我仍然看到同样的错误！另一方面，我使用了 create-react-app 方法，所以我没有 wabpack.config.js 帮助我！

4

0 回答 0