create-react-app项目中编译报错 Syntax error

前言

本地项目玩玩装饰器用法，但是项目编译始终报错。

正文

从有限的报错信息并不能查到具体什么原因 

考虑如下

1、react-router 4.0路由BrowserRouter使用错误

2、<App/>文件内部元素问题

3、webpack配置问题

4、页面标点符号单词拼写有误（丧心病狂到这种地步了）

等等。。。。。。

逐个测试

1、删除BrowserRouter，报错同样是

2、<App/>文件内部元素全部删除只留div

import React, {Component} from 'react';
export default class App extends Component {    
    render() {        
        return (            
             <div>1</div>        
         )    
    }
}复制代码

还是同样错误

3、.babelrc文件里面就只有装饰器配置

{    
    "plugins": [       
         "transform-decorators-legacy"    
    ]
}

复制代码

那也删除，同样报错。

4、当然写的没问题，所以不是写的问题。

经过一番挣扎，找到问题所在了。

删除.babelrc文件，将babel配置写回webpack.config.dev文件中

{            
    test: /\.(js|jsx|mjs)$/,           
    include: paths.appSrc,            
    loader: require.resolve('babel-loader'),            
    options: {              
    cacheDirectory: true,              
    "plugins":[                
    "transform-decorators-legacy"              
       ]            
     },          
}复制代码

问题解决！！！！！！！不报错了，这是怎么回事。将babel配置提取出.babelrc文件没问题啊，很好的选择啊。

结论

       提取.babelrc文件后，react项目引用的是文件里的配置，导致丢失脚手架里引用的babel配 置。如果想提取出来配置，应该将所有create-react-app引用的babel配置提取出来。

create-react-app维护者Joe Haddad在一个问题回答中也印证了。

以上就是全部，分享给大家，希望能有所帮助。

转载于:https://juejin.im/post/5b05313d518825673e35fe2d