导入jsx组件时出现'ERR_UNKNOWN_FILE_EXTENSION'

问题描述 投票：0回答：1

我正在尝试将 jsx 组件导入 Express。

我正在尝试将此组件与坚持使用“import”语句而不是旧的“require”语句的库集成。

当我尝试导入组件时，出现错误“ERR_UNKNOWN_FILE_EXTENSION(ext, filepath)”。

以下是我尝试过的一些方法：

根据this SO post的建议，我补充道：

require("@babel/register")({
  presets: ["preset-react", "preset-env"],
  extensions: [".ts,.tsx,.js,.jsx"],
});

但是因为我需要使用“导入”，所以服务器崩溃了。所以基于this SO post我添加了：

import { createRequire } from "module";
const require = createRequire(import.meta.url);

这样我就可以使用 Babel 提供的 require hook 了。我仍然收到“ERR_UNKNOWN_FILE_EXTENSION”错误。

最后，我根据另一篇 SO 帖子制作了一个比我的 server.js 高一层的 config.js。

config.js：

require('@babel/register')({
    presets: ["preset-react", "preset-env"],
    extensions: [".ts,.tsx,.js,.jsx"],
})
// Import the rest of our application.
module.exports = require('./server.js')

我仍然收到相同的“ERR_UNKNOWN_FILE_EXTENSION”。

我不确定如何继续，似乎其他人已经能够找到解决方法，但他们的解决方案都不适用于我的情况。非常感谢任何想法或提示。

供参考：

服务器.js

import { createRequire } from "module";
const require = createRequire(import.meta.url);

require("@babel/register")({
  presets: ["preset-react", "preset-env"],
  extensions: [".ts,.tsx,.js,.jsx"],
});
import { register } from "./babelRegister.js";

import express from "express";
import * as React from "react";
import { renderAsync } from "@react-email/render";
import { Resend } from "resend";
import dotenv from "dotenv";
import cors from "cors";

import { JobMarkedComplete } from "./emails/Needer/JobMarkedComplete.jsx";

const app = express();



dotenv.config();

app.use(
  cors({
    origin: "http://localhost:3000",
    optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  })
);


app.listen(8000);

console.log("here i am");

const resend = new Resend(process.env.RESEND_API_KEY);

app.post("/sendNeederWelcomeEmail", async (req, res) => {
  console.log("nice");
  const { data, error } = await resend.emails.send({
    from: "Acme <[email protected]>",
    to: ["[email protected]"],
    subject: "hello world",
    html: "<p>changed where new resend is instantiated</p>",
  });

  if (error) {
    return res.status(400).json({ error });
  }

  res.status(200).json({ data });
});

package.json：

{
  "name": "fulfilemailapi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js",
    "newStart": "babel-node --presets preset-react server.js",
    "dev": "email dev",
    "build": "node --experimental-loader @node-loader/babel ./lib/build.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@babel/cli": "^7.24.6",
    "@babel/core": "^7.24.6",
    "@babel/plugin-transform-modules-commonjs": "^7.24.6",
    "@babel/preset-react": "^7.24.6",
    "@babel/register": "^7.24.6",
    "@node-loader/babel": "^2.1.0",
    "@react-email/components": "0.0.19",
    "@react-email/render": "0.0.15",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "esm": "^3.2.25",
    "express": "^4.19.2",
    "react": "^18.3.1",
    "react-email": "2.1.4",
    "resend": "^3.2.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.6",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "nodemon": "^3.1.1"
  }
}

babel.config.js

export default {
    sourceType: "module",
    presets: [
        ["env"],
      [
        "@babel/preset-react",
        {
          runtime: "automatic",
        },
      ],
    ],
  };
reactjs node.js express babeljs babel-register
1个回答
0
投票

修复 .jsx 文件的 Node.js

你好，

你的整个方法都很好。

您遇到的问题，即 

ERR_UNKNOWN_FILE_EXTENSION
错误，是因为 Node.js 即使使用 
@babel/register
，本身也不支持 ES (ECMAScript) 模块的 .jsx 扩展名。

要在文件中使用 JSX，您必须使用 Babel 或 Webpack 等工具将 JSX 转换为 JavaScript，然后再在 Node.js 中执行。

所以你有两个解决方案：

  • 要么将 .jsx 重命名为 .js，但我们不能总是这样做，而且我发现这不是您想要的方法。

  • 或者您想保留您的 .jsx，在这种情况下，您必须进行一些根据我所看到的已经开始做的调整。

为了确保您不会忘记任何事情，我将为您提供不同的步骤：

  1. 安装 babel 和必要的依赖项：

npm install babel @babel/core @babel/preset-react @babel/register

  1. 在项目的根目录下创建一个 
    babel.config.json
    或 
    .babelrc
    文件。

（确保它位于项目的根目录。）

  1. 将此代码复制到您刚刚创建的文件中。

⚠️ 每个扩展名必须用双引号括起来 ⚠️

{

“预设”：[“@babel/preset-react”]，

“扩展名”：[“.ts”，“.tsx”，“.js”，“.jsx”]

}

在 

package.json
中，确保您为包裹条目设置了正确的路径。

  • main ：当有人将包导入到他们的项目中时使用的主文件，

  • module ：指定导出为模块的文件。 （可选）

  • exports ：指定在其他项目中使用此包时如何导出文件（导入和不同模块所需）。 （可选）

它应该看起来像这样：

“主”：“./src/lib/DIR_NAME/YOUR_PACKAGE/YOUR_PACKAGE.jsx”，

“模块”：“./src/lib/DIR_NAME/YOUR_PACKAGE/YOUR_PACKAGE.jsx”，

“出口”：{

“.”：{

  "import": "./src/lib/DIR_NAME/YOUR_PACKAGE/YOUR_PACKAGE.jsx",

  "require": "./src/lib/DIR_NAME/YOUR_PACKAGE/YOUR_PACKAGE.jsx"

}

完成所有这些后，如果有必要，请不要忘记

build
，通常它应该按您想要的方式工作。

如果您不断收到

ERR_UNKNOWN_FILE_EXTENSION
，您可以：

  • 将文件重命名为 .js （但仍使用 JSX 语法） 但是，如上所示使用 Babel 应该可以解决问题而无需重命名。

  • 或者修改自定义loader。

在这种情况下，您需要执行以下步骤：

  1. 安装 Babel 和 Babel-loader。

npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev

  1. 配置 Babel。

使用以下配置在项目的根目录中创建一个 

.babelrc
文件以支持 JSX：

{

“预设”：[“@babel/preset-env”，“@babel/preset-react”]

}

  1. 更新 Webpack 配置。

编辑 webpack.config.js 文件，以便 Webpack 识别 .jsx 文件：

模块.导出= {

模块：{

rules: [

  {

    test: /\.(js|jsx)$/,

    exclude: /node_modules/,

    use: {

      loader: "babel-loader"

    }

  }

]

},

解决：{

extensions: [".js", ".jsx"]

}

};

此配置允许 Webpack 使用 Babel 正确处理 .jsx 文件，而无需重命名文件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.