ReferenceError:[BABEL]未知选项:base .__ esModule

时间:2018-05-03 08:55:30

标签: reactjs lazy-loading babel

我正在尝试反应懒惰组件加载,这将分别加载组件然后我得到

//Firebase
implementation 'com.google.firebase:firebase-core:15.0.2'
implementation 'com.google.firebase:firebase-messaging:15.0.2'
implementation 'com.google.firebase:firebase-auth:15.0.0'
implementation 'com.google.firebase:firebase-database:15.0.1'

我改变了我的babel文件,现在错误是

unexpected token import 

我的babel文件是

ReferenceError: [BABEL] E:\projectSir\latestProject1\tools\startMsg.js: Unknown option: base.__esModule. Check out http://babeljs.io/docs/usage/options/ for more info
    at Logger.error (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\logger.js:43:11)
    at OptionManager.mergeOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:307:20)
    at OptionManager.init (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:506:10)
    at File.initOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:243:89)
    at new File (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:159:72)
    at Pipeline.transform (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\pipeline.js:49:16)
    at Object.transformFileSync (E:\projectSir\latestProject1\node_modules\babel-core\lib\api\node.js:152:10)
    at compile (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:129:20)
    at loader (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:158:14)
    at Object.require.extensions.(anonymous function) [as .js] (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:168:7)

我的反应代码是

{
"plugins": ["syntax-dynamic-import"],
"presets": ["env","react","es2015"],
"env": {
    "development": {
                                    "presets": [
                                                            "react-hmre"
                                                            ]
                                }
                }
}

和package.json文件是

async loadLazyComponent ()  {

    if(this.state.animation == null){
        try{
            const LazyComponent = await import('./animation.js')

            this.setState({animation:React.createElement(LazyComponent.default)})
        }catch(e){
            this.setState({animation:<div>`failed ${e}`</div>})
        }
    }
}

和devDependencies是

"babel-polyfill": "6.8.0",
    "babel-preset-env": "^1.6.1",

和webpack.confg.dev.js文件是

"babel-cli": "^6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",

我正处于学习阶段,所以任何帮助都将受到赞赏。

1 个答案:

答案 0 :(得分:0)

**

  

错误是我使用旧版本的webpack,升级它   解决了我的问题。

** 我认为不允许代码拆分或语法 import('./someModule.js')   webpack 1.X 版本中不允许使用此功能
现在我有 webpack 3.X 并且错误已解决