Next.js: 解决 webpack 中的 .jsx 扩展

有趣的。 你从哪里得到.jsx是推荐扩展名的信息？ 我做了一个快速的谷歌搜索，但找不到任何官方评论。 我必须承认我的 google foo 不是最好的。

是的，我更喜欢 .jsx 只是为了在编辑器中自动选择语言。

来自airbnb 风格指南，它实际上是 JavaScript 项目

@7s4r好的，我知道 airbnb 风格指南。 我在等待的是直接来自 facebook 或 babel 的评论。 但可以肯定的是，airbnb 风格指南是一个很好的观点。 也许支持两者是正确的方法。 您已经在问题描述中提到了这一点。 所以这从我那里得到了一个 :+1: :)。

支持.jsx扩展的另一点是，只要您以 ES6/ES2015 为目标，TypeScript 就会编译为该扩展

airbnb / eslint-plugin-react抱怨react/jsx-filename-extension规则

现在可以操作 webpack 配置，这是可能的https://github.com/zeit/next.js#customizing -webpack-config

有没有关于如何使用 next.config.js 进行这项工作的示例？ 据我所知，这需要覆盖至少四个由框架生成的加载器（ babel-loader 、 hot-self-accept-loader 、 react-hot-loader/webpack和emit-file-loader ）这些文档明确指出这是一个坏主意，并且有点违背了框架的目的。

如果这是官方立场，我可以接受不支持这一点，但上述评论似乎表明确实如此。

@AlteredConstants是这样的：

module.exports = {
  webpack: (config, { dev }) => {
    config.resolve.extensions = ['', '.js', '.jsx'];
    return config;
  }
}

_然而_，刚刚尝试过这个，看起来这种方法行不通。 我必须深入研究以找出原因。

@rossipedia ，只有当扩展名从导入中排除时，Webpack 才能识别带有 .jsx 扩展名的导入模块，例如import Foo from './Foo'而不是import Foo from './Foo.jsx' 。

为了让 Webpack 正确处理这些模块，您需要（大概）将.jsx到上述加载器的test属性中。 这感觉有点笨手笨脚并且容易出错，并且它不能根据上面链接的文档处理预渲染的情况。 我也不确定自动page/导入在那种情况下甚至会起作用——这似乎发生在 Webpack 进程之外和/或可能作为单独的入口点？

可以理解，在这个框架中模块解析比简单的 Webpack 配置选项更复杂。 再说一次，除非我弄错了，这个问题的解决方案似乎“不会解决”而不是“解决方法”，我只是想明确团队的立场。 @impronunciable ，还有更多见解吗？

应该将此添加到常见问题解答中。

module.exports = {
  webpack: (config) => {
    config.resolve.extensions = ['.js', '.jsx'];
    config.module.rules.push(
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    );
    return config;
  }
}

@JF-Liu 不适合我。

我收到Error: Cannot find module '../components/Page'或Module build failed: Error: Couldn't find preset "stage-3" relative to directory "/Users/cla/Projects/with-mobx/node_modules/styled-jsx"

尝试设置 next.js 2-beta + mobx + airbnb

也许我错过了什么？ 你的.babelrc内容是什么？

似乎pages扩展名也不能是.jsx

@foxhound87是的，这不起作用，我也放弃了。

TypeScript 2.2 现在支持"jsx": "react-native" ，它会输出.js文件但也保留 JSX。 看这里

同样的问题：<，任何想法如何解决这个问题？

我在编写烘焙时遇到了这个问题，因为我们公司的标准是对包含 jsx 标记的任何文件使用.jsx 。 理解这是一个 webpack 配置并且不应该影响性能，是否有明确的原因 Next.js 不支持 jsx 导入？

_编辑：_
如上所述，使用 webpack 配置可以很好地导入组件，但/pages/必须具有 .js 扩展名才能正确路由。 尽管这个问题看起来很愚蠢，但大型团队必须遵循制定的标准/约定，因此这可能会阻止采用这个伟大的框架。

除了这个，我真的很喜欢 Next 的一切，不幸的是我们无法使用它。
我会回来查看是否有任何进展。

这个问题似乎比 Webpack 和 Babel 更深入； 它在许多地方被硬编码。 :(

到目前为止，我所做的唯一努力是在server/resolve.js:34为“jsx”添加一行。 我通过修改我项目的node_modules/next/dist/下的文件来做到这一点。

进行修改在控制台中输出以下内容。 请注意，控制台现在显示Building page: / ，而不是Client pings, but there's no entry for page: / 。

 DONE  Compiled successfully in 12156ms                                                    8:34:44 PM

> Ready on http://localhost:3000
> Building page: /


 DONE  Compiled successfully in 10983ms                                                    8:34:58 PM

SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>)
    at _callee$ (/Users/Jason/Repositories/radioapp/node_modules/next/dist/server/read-page.js:48:32)
    at tryCatch (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:64:40)
    at Generator.invoke [as _invoke] (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:116:21)
    at step (/Users/Jason/Repositories/radioapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/Jason/Repositories/radioapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

编辑：

这个问题对我来说实际上是可以忍受的，因为我只是用.eslintrc文件创建了一个server目录：

{
  "parser": "espree",
  "parserOptions": {
    "ecmaVersion": 6,
  },

  "env": {
    "node": true
  },
}

如果它对任何人有帮助，您可以为每个目录配置不同的linter和Sublime设置。 您还可以创建一个包含 Next.js 文件的public目录，并将相应的.eslintrc文件放在那里。

我正在使用 Sublime，以及babel-sublime 和 SublimeLinter-contrib-eslint 。

@jasonszhao我同意。 但我们不太可能支持.jsx支持。 使用.js扩展名。

@arunoda 真可惜。 由于这种随意的设计选择，我们中的许多人无法使用它。 猜猜我正在卸载。

让它可配置不是更有意义吗？ 使用next.config.js并有一个默认为['.js'] ，或者更好的功能可以过滤掉诸如 Jest 的.test.js或.spec.js的东西。

编辑：我正在尝试使用.tsx因为我无法在 TypeScript 示例中使用tsc方法，因为我也在尝试在 TypeScript 中运行自定义服务器。

仍然不支持.jsx吗？ 我还遇到了一个问题，我的公司会阻止使用next.js因为我们的标准是对 React 组件使用.jsx 。

我知道这个看起来微不足道，但它确实让我们的团队很难证明采用 Next 是合理的 :(

如果核心团队的某个人能够详细说明这个看似无关紧要的设计决策，那就太棒了。

+1 支持 .jsx 扩展

您可以轻松添加 .jsx 支持，但...不适用于 SSR。 你会得到一个错误，但在更改代码中的某些内容并热重载之后 - 你会看到你的页面。 F5 和繁荣，错误。

不知道如何解决这个问题。

const originalJS = "/\\.js(\\?[^?]*)?$/";

config.resolve.extensions = [".js", ".jsx", ".json"];
config.module.rules.forEach((rule) => {
    if (String(rule.test) === originalJS) {
        rule.test = /\.jsx?(\?[^?]*)?$/;
    }
});

像许多人一样，我不明白为什么这不可能发生。

许多人使用 linter 配置，上面写着使用 jsx，编辑器使用它来帮助区分常规 js 和 jsx 以及……说真的，添加它有那么大问题吗？ 如果我对代码理解得足够好，我会自己做，但是......

拜托了

只是对.jsx可以合理地预期“开箱即用”的想法提供更多支持。 一旦有人弄清楚问题是什么（并发现这个问题），解决方法就很简单了，但根据我的经验，使用.jsx扩展名是一个_广泛采用的约定_（这里故意回避“推荐”的措辞）对于主要导出 React 组件的文件。

我将简单地交换扩展并继续我的方式，但我正在努力理解为什么会有阻力。 比这是一个合理的要求更重要的是，对于许多开发人员来说，这是预期的行为，并且（略微）提高了进入门槛。 虽然我不想把它分拆成关于.jsx作为扩展的优点的辩论，但我只想说，只想要.js有效 JavaScript 并不是完全不合理的

顺便说一句，刚刚开始，但到目前为止喜欢的东西。 感谢所有出色的工作！

这可能是链接的，我不能使用.md扩展名。 我必须使用以下技巧才能使其在服务器上运行（ .md.js ）：

next.config.js

// ...
          {
            test: /\.md\.js$/,
            loader: 'raw-loader',
          },
// ...

我将 eslint 与 airbnb 一起使用，并添加了另一条规则来消除警告

{
    "extends": "airbnb",
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

有没有人有.jsx文件所在的工作示例

• 在pages目录中，
• 使用服务器端渲染，以及
• 从另一个目录作为模块导入

?

这将是对/examples目录的一个很好的补充。

+1 用于添加 jsx 支持。

我通过做一些类似于@rossipedia建议的事情来修复它。

如果它还没有，请在项目的根目录下创建
然后只需将 'jsx' 推送到 config.resolve.extensions 数组，它就可以正常工作。

module.exports = {
  webpack: function (config, { isServer }) {
    config.resolve.extensions.push('.jsx');
    return config
  }
}

编辑
请注意，此修改似乎对性能有不良影响。 打算进一步调查。

如果您使用的是 next v5，则无需更改任何内容，开箱即用地支持 .jsx 扩展名。 如果您看到任何与性能相关的内容，请尝试升级到next@canary。

我注意到了，太棒了！