更新您的.babelrc

Question

我使用material-ui 1.3.1和reactjs 16.4.1。

我将PaperSheet Component复制并粘贴到我的应用程序中。现在我的应用程序不再编译了。任何想法是什么原因？

ERROR in ./src/components/search/PaperSheet.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/Users/hatieke/Projects/brand-eins/brandeins-prototype/brandeins-prototype-ui/src/components/search/PaperSheet.jsx: Unexpected token (9:4)

   7 | const styles = theme => ({
   8 |   root: {
>  9 |     ...theme.mixins.gutters(),
     |     ^
  10 |     paddingTop: theme.spacing.unit * 2,
  11 |     paddingBottom: theme.spacing.unit * 2,
  12 |   },

 @ ./src/components/search/index.js 12:18-41

两个问题：material-ui为什么在各处都使用这种结构？为什么它不能与我的应用程序一起使用？

Answer 1

更新您的.babelrc

要使用最新的ECMAScript语法，您需要将t转换回浏览器可读的内容。

在.babelrc或package.json中找到您的反应预设的位置，然后添加

"presets": [
  "stage-2",
  "react"
]

要使用预设阶段2，您将需要通过npm / yarn安装它。另外，要知道您需要安装哪个版本，请检查package.json并确定您是否使用

babel-core或@babel/core

基于此，您应该使用babel-preset-stage-2或@babel/preset-stage-2

在此之后，重新启动构建过程，然后再次进行。我建议您牢牢掌握翻译和使用通天塔的方法。您可以在他们的文档here

中了解所有这些工作原理

Answer 2

他们使用点差，因为与例如使用点差相比，这是一种非常方便的选择Object.assign。

由于还没有使用rest / spread语言，因此您需要transform-object-rest-spread Babel插件才能使用它。您可以例如使用包含它的stage-3 preset。

.babelrc

"presets": [
  "env",
  "react",
  "stage-3"
]

如何修复`... theme.mixins`意外令牌SyntaxError？

2 个答案:

更新您的.babelrc