描述问题
当我将代码更改为使用"es"版本的库时，Webpack会抛出错误。
环境
重现步骤
- 将
@material-ui/core添加到你的项目中。 - 使用该库中的任何"es"变体代码。这段特定的代码在es版本的代码中使用了可选链。
import TextField from "@material-ui/core/es/TextField";- Webpack开发
yarn start或Webpack构建yarn build都会出现以下错误。
解决方法
- 经过深入研究，我发现这个问题是由于JS解析器不支持Optional Chaining和Nullish Coalescing(这也是Webpack 4使用的)导致的。
acorn v6.x.x - 在我的电脑上，我在node_modules中的webpack配置文件中添加了两个预设到最后一个模块
rules,该模块处理src之外的JS。
- 这解决了问题。
如果这个用例足够通用，我可以为此提出拉取请求吗？?
如果不是，我可以使用类似react-app-rewired的东西来为我们的需求进行编辑。此外，这种更改将是临时的，直到我们迁移到Webpack 5。
5条答案
按热度按时间o3imoua41#
我也遇到了这个问题。看起来Babel只用于React项目本身的代码，而不用于导入的库中的代码。这些库似乎原封不动地包含在内，没有进行转译，所以如果它们有原始的ES2020代码，那么整个React构建过程就会失败。
w9apscun2#
实际上，Babel也用于运行node模块代码，使用
preset-env,它使用浏览器列表进行转译。我认为对库代码的支持也很好。但是acorn问题阻止我们从库代码中使用可选链和空值合并。r6hnlfcb3#
关于这个问题或从库代码中使用可选链和空值合并的解决方法有任何更新吗？我仍然在4.0.3版本中看到这个问题。
zengzsys4#
有人知道这个问题的简单解决方法吗？不需要像react-app-rewired或CRA eject这样的额外模块。对于一个配置更改来说，这些感觉像是过度杀伤力。
6yjfywim5#
这是在Create React App v5中修复的，我之前遇到问题的模块。