标签: babel-loader

我正在开发一个使用 create-react-app 构建的 React 项目，后来我们弹出并修改了很多 webpack 配置。现在我很难const enums从外部库导入。我无法控制该外部包。它在其文件中定义了常量枚举d.ts。

我尝试过babel-plugin-use-const-enumbabel 插件和预设。这对我也没有帮助。

我的网络包配置：

.....
.....
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc],
  loader: require.resolve("babel-loader"),
  options: {
    customize: require.resolve("babel-preset-react-app/webpack-overrides"),
    plugins: [
        [require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
        [require.resolve("@babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
        [require.resolve("@babel/plugin-transform-react-jsx")],
        [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
        [require.resolve("@babel/plugin-proposal-nullish-coalescing-operator")],
        [require.resolve("@babel/plugin-proposal-optional-chaining"), { isTSX: true }],
        [require.resolve("@babel/plugin-transform-arrow-functions")],
        [require.resolve("@babel/plugin-proposal-private-methods"), { loose: true }],
        [
          require.resolve("babel-plugin-named-asset-import"),
          {
            loaderMap: {
              svg: {
                ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
              },
            },
          },
        ],
    ],
    presets: ["@babel/preset-env"],
  },
}, …

我有一个在 React、Node、express 上运行的全栈 JavaScript 应用程序。问题是export没有default在节点中工作，但是，它在反应中工作正常。我的节点和 react 共享相同的 babel 配置和包。

我已经尝试@babel/plugin-proposal-export-default-from在我的中添加包，babel.config.js但这样做后，它会产生另一个错误

意外令牌 (25:16) 导出 getMember；

我什至尝试删除半柱

这是我的 babel.config.js

    module.exports = {
      "presets": ['@babel/preset-env', '@babel/preset-react'],
      "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ]
      ]

};

这是我的 package.json

{
  "name": "dpapi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node server.js --ignore dist/",
    "dev": "webpack -wd"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-preset-es2015": "^6.24.1",
    "eslint": "^5.16.0", …

项目依赖树可能有问题。这可能不是 Create React App 中的错误，而是您需要在本地修复的问题。

Create React App 提供的 react-scripts 包需要一个依赖：

"babel-loader": "8.1.0"

不要尝试手动安装：您的包管理器会自动安装。但是，在树的更高位置检测到了不同版本的 babel-loader：

D:\Reactjs\node_modules\babel-loader（版本：8.0.6）

众所周知，手动安装不兼容的版本会导致难以调试的问题。

如果您希望忽略此检查，请将 SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .e nv 文件中。这将永久禁用此消息，但您可能会遇到其他问题。

要修复依赖树，请尝试按照以下确切顺序执行以下步骤：

1. 删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。
2. 删除项目文件夹中的 node_modules。
3. 从项目文件夹中的 packa ge.json 文件中的依赖项和/或 devDependencies 中删除“babel-loader”。
4. 运行 npm install 或 yarn，具体取决于您使用的包管理器。

在大多数情况下，这应该足以解决问题。如果这没有帮助，您还可以尝试其他一些方法：

5. 如果您使用 npm，请安装 yarn ( http://yarnpkg.com/ ) 并用它重复上述步骤。这可能会有所帮助，因为 npm 存在已知的包提升问题，这些问题可能会在未来版本中得到解决。

6. 检查 D:\Reactjs\node_modules\babel-loader 是否在你的项目目录之外。例如，您可能不小心在家中安装了一些较旧的东西。

7. 尝试在您的项目文件夹中运行 npm ls babel-loader。这将告诉您安装了 babel-loader 的其他包（除了预期的 react-scrip ts）。

如果没有其他帮助，请将 SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .env 文件中。如果您无论如何都想继续，这将永久禁用此预检检查。

我想Input在我的表单中使用 react-validation 组件。这就是我导入它并在表单中使用的原因：

<Input className="form-control"
       type="text"
       placeholder="name"
       value={props.data.creatingUser.createName}
       name="createName"
       id="createName"
       onChange={props.handleAddChange}
required/>

当我尝试使用 运行应用程序时npm start，我在控制台中收到以下错误：

SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: 目前未启用对实验语法“jsx”的支持 (6:3)：

const Input = ({ error, isChanged, isUsed, ...props }) => (

|   ^        <input {...props} {...( isChanged && isUsed && error ? {        className: `is-invalid-input ${props.className}`
 } : { className: props.className } )} /> 

Run Code Online (Sandbox Code Playgroud)

我没有明确地做任何 babel 配置，我的package.json文件有以下内容：

{
  "name": "rental-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "jquery": "^3.5.1", …

我有一个基本的create-react-appTypeScript 项目 ( client)。只是目录，我有一个server和一个shared文件夹。在shared文件夹内，我有许多在和之间共享的interfaces 和s 。enumserverclient

我希望将此shared文件夹链接到client和server包。

首先，我转到shared并运行$ yarn link，然后$ yarn link shared从client和server文件夹中运行。

服务器非常高兴，而且大多数情况下客户端也是如此。但是，一旦我使用中目录中enum的其中一个，就会收到错误：sharedclient

../shared/src/models/Roles.ts 4:0
Module parse failed: The keyword 'enum' is reserved (4:0)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders. …