Next.js无法通过自定义.babelrc配置加载JSX文件

Next.js 是一个基于 React 的轻量级框架，用于构建服务器渲染的 React 应用程序。它提供了一种简单且灵活的方式来创建具有优化性能的现代 Web 应用程序。

对于 Next.js，它默认使用了 Babel 来进行代码转换和编译。在 Next.js 中，可以通过自定义 .babelrc 文件来配置 Babel 的转换规则，以满足特定的需求。然而，Next.js 不支持通过自定义 .babelrc 配置来加载 JSX 文件。

这是因为 Next.js 使用了自己的 Babel 配置，它内部集成了一些预设和插件，用于处理 JSX 文件的转换。这种内置的配置使得 Next.js 可以更好地优化和控制代码转换过程，以提供更好的性能和开发体验。

在 Next.js 中，可以通过使用内置的 next/babel preset 来自定义 JSX 文件的转换规则。这个 preset 包含了一些常用的 Babel 插件和预设，可以满足大部分的需求。同时，Next.js 还提供了一些其他的配置选项，如自定义插件、自定义预设等，以满足更复杂的转换需求。

总结起来，Next.js 不支持通过自定义 .babelrc 配置加载 JSX 文件，但可以通过使用内置的 next/babel preset 和其他配置选项来满足自定义转换规则的需求。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

腾讯云云服务器（CVM）：提供了灵活可扩展的云服务器实例，可满足各种规模和需求的应用程序部署。详情请参考：腾讯云云服务器
腾讯云云函数（SCF）：提供了无服务器的函数计算服务，可实现按需运行代码，无需关心服务器管理和维护。详情请参考：腾讯云云函数

Next.js无法通过自定义.babelrc配置加载JSX文件

reactjs、jsx、next.js

我正在尝试使用.jsx文件类型，并且已经按照Next.js文档创建了一个自定义.babelrc文件(见下文)。{ ["transform-react-jsx", { }] "presets":[ "next/b

浏览 12提问于2018-01-21得票数 0

1回答

巴贝尔化转换不运行

node.js、browserify、babeljs、tsify

我有两个打字记录文件：import Greeter from '.} return `<h1>${this.greeting}</h1>`;} .babelrc/app.js -p tsify -t babelify 这些文件被编译和打包，但是它从不在代码上运行babelify，我最终得到的输出中仍然包含类和模板字符串。

浏览 4提问于2017-03-23得票数 0

回答已采纳

4回答

/node_node/babel-加载程序/lib/index.js)：

javascript、node.js、reactjs、babeljs、babel-loader

filename: 'bundle.js' module:{ { exclude: '/node_modules/', { loader

浏览 1提问于2019-03-10得票数 0

回答已采纳

1回答

如何避免使用NextJS在页面目录中呈现文件？

next.js

假设我有pages/foo/index.tsx，我想要使用pages/foo/helper.tsx作为助手。接下来将呈现pages/foo/helper.tsx，以响应GET /foo/helper请求而不是404。我不希望这种事发生。做_helper.tsx并不能解决问题。

浏览 9提问于2022-10-25得票数 0

2回答

Babel不能转换父目录中的文件

reactjs、mocha.js、babeljs、es6-modules

我如何告诉babel转译不在当前(根)目录中的文件？"src“中，测试文件在" test”中。我使用babel动态转换我的src文件(ES6，React)。/test/**/*Test.js'"和.babelrc： "presets": [ "@babel/preset-react，但都不起作用

浏览 14提问于2019-11-15得票数 0

回答已采纳

2回答

Webpack构建失败，抛出意外的令牌错误JSX语法

javascript、webpack

/client/index.js模块构建失败: SyntaxError:意外令牌中的错误(31:4) const path =(eot|svg|ttf|woff|woff2)$/, }loaders: []

浏览 1提问于2018-01-03得票数 2

1回答

js错误:您可能需要一个适当的加载程序

javascript、reactjs

containerWidth }}>| <input 那不是一个javascript文件吗

浏览 0提问于2018-03-29得票数 1

回答已采纳

2回答

Next.js - webpack混叠组件文件夹不工作

javascript、reactjs、webpack、next.js

我正在按照docs中的建议扩展next.js webpack配置。}我想让我的进口产品像这样工作：import Input from 'Components/Input' 我在配置方面做错了什么

浏览 6提问于2017-05-24得票数 1

回答已采纳

2回答

导入SVG作为不使用Next.js的React组件

javascript、reactjs、typescript、webpack、next.js

我使用类型记录创建了一个使用create应用程序的项目，后者要求我向其添加next.js，结果是它在整个应用程序中插入了一些svg。({ return config}) 使用此配置，我现在可以看到整个应用程序的映像，但只看到公共的映像，如果我尝试按照以下方法添加svg您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。我试图添加react-svg-inline，就像我在其他一些帖子中看到的那样，因此我最后为Next.js添加了.

浏览 12提问于2020-09-18得票数 7

1回答

是否可以将测试文件放在Next.js中的pages目录下？

javascript、testing、jestjs、next.js

我正在为Next.js应用程序中的API路由编写集成测试，我想知道将index.test.ts文件放在/pages目录下是否有问题。我希望测试尽可能接近文件，而不是必须在__test__目录中映射项目结构。 .

浏览 3提问于2022-01-24得票数 8

回答已采纳

5回答

Webpack抛出JSX的语法错误

javascript、reactjs、webpack、babeljs

/client/index.js 1:0-20{}// Webpack/index.js", resolve: { }, &

浏览 4提问于2016-05-25得票数 2

回答已采纳

2回答

在package.json中配置webpack babel加载程序与配置它有什么不同？

webpack、babeljs、package.json、babel-loader

嗨，请帮助我理解在.babelrc内部设置babel配置与webpack加载器选项之间的区别，以及在package.json中插入它的区别。例如，如果我把预置设置在webpack babel-loader选项与package.json或一个单独的.babelrc配置文件中，会有什么区别吗？在webpack配置中： test: /\.(js|jsx|mjs)$/,

浏览 2提问于2018-01-27得票数 15

回答已采纳

1回答

理解.babelrc

webpack、babeljs

我一直在寻找与.babelrc中的预设键相关的答案。有人能给我解释一下'env'，'stage-0'，'es2015‘等是什么意思吗？如果我能知道设置预设的更好的方法，那就太好了。

浏览 0提问于2018-04-14得票数 1

4回答

无法找到与新项目目录相关的预设"es2015“

reactjs、webpack、babeljs

react/examples/MyApp/node_modules' ] module: { test: /\.jsx"presets": ["es2015", "stage-0", "react"] } 如果我将entry es2015改为esXX2015 in webpack.config.js或.babelrc

浏览 3提问于2016-07-26得票数 1

回答已采纳

2回答

如何忽略Next.js组件中导致单元测试中的解析错误的CSS模块导入

reactjs、unit-testing、next.js、css-modules

我在我的Next.js项目(我是Next.js新手)中使用CSS，并使用进行测试。当我为运行单元测试时，任何导入CSS的组件都会在SyntaxError中失败，因为它不能解析正在导入的CSS文件。我已经创建了一个.babelrc文件来处理测试中的JSX解析，这样它就可以复制Next.js配置({ "presets": ["next/babel"], "plugins": [] })并

浏览 2提问于2020-06-30得票数 0

1回答