码迷,mamicode.com
首页 > 移动开发 > 详细

react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level

时间:2018-06-09 19:51:03      阅读:1585      评论:0      收藏:0      [点我收藏+]

标签:obj   issue   save   禁用   sed   ocs   --   syn   关键词   

因为项目需要搞一下按需加载,使用import实现代码打包分片按需加载,但是在实际使用中报语法错误。报错信息如下

SyntaxError: ‘import’ and ‘export’ may only appear at the top level

啊咧?报错了。

查找发现很多人碰到过,解决方法不同,但是我这个报错适用下边这个方法。

npm install --save-dev babel-plugin-syntax-dynamic-import

然后调整babel-loader配置如下:

use: {
    loader: ‘babel-loader‘,
    options: {
        // 不采用.babelrc的配置
        "babelrc": false,
        "presets": [
            ["react"],
            ["es2015", { "modules": false }]
        ],
        "plugins": [
            "syntax-dynamic-import",
            "transform-object-rest-spread",
            "transform-class-properties"
        ]
    }
}



解决方法出处示下边这篇博文:
http://www.shuizhongyueming.com/2017/11/28/webpack-dynamic-import%E5%87%BA%E9%94%99-syntaxerror-import-and-export-may-only-appear-at-the-top-level/



为防止博客哪天不用了,整篇文章转载过来。以下示原博文。

起因

今天尝试使用webpck的import()来做代码分割。

代码类似如下:

import(‘./nice-scroll‘).then(init => init(dom))

结果报错:

ERROR in ./js/utils/auto-set-height.js
Module build failed: SyntaxError: ‘import’ and ‘export’ may only appear at the top level (20:8)

分析

在package.json里面确认了一下,我用的webpack版本是^3.5.4,这个是一定支持import()方法的,那么问题应该就出在babel上了。

先截取我的babel-loader的部分配置:

use: {
    loader: ‘babel-loader‘,
    options: {
        // 不采用.babelrc的配置
        "babelrc": false,
        "presets": [
            ["react"],
            ["es2015"]
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-class-properties"
        ]
    }
}

一开始我的猜想是plugin es2015里面的transform-es2015-modules-commonjs先于webpack处理了代码,所以报错。

找了一下禁用的方法,改配置如下:

use: {
    loader: ‘babel-loader‘,
    options: {
        // 不采用.babelrc的配置
        "babelrc": false,
        "presets": [
            ["react"],
            ["es2015", {module: false}]
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-class-properties"
        ]
    }
}

还是不行。

后面一直各种关键词的搜索,偶然在github上面找到这个问题Dynamic `import()` crashing in `ModuleConcatenationPlugin`的一个回答:

Nope; babel will always process the code before webpack ever sees it; unless for some reason the file itself is being excluded from being processed by babel-loader.
This error is unrelated to babel; it’s a webpack issue.

这个回答,里面说到在webpack面对的代码都是babel处理过的,这个让我坚信问题还是在babel这块,继续搜索。

意外找到这个这篇文章:代码分离 – 使用import()。里面说到了一个插件:syntax-dynamic-import

Babel官方关于这个插件的描述是:

Syntax only
This plugin only allows Babel to parse this syntax. If you want to transform it then see dynamic-import-webpack or dynamic-import-node.

显然这是一个语法解析的插件,使得babel能够理解dynamic import的语法。再联系上面的报错信息里面的SyntaxError,结果有点明显了。

解决

npm install --save-dev babel-plugin-syntax-dynamic-import

然后调整babel-loader配置如下:

use: {
    loader: ‘babel-loader‘,
    options: {
        // 不采用.babelrc的配置
        "babelrc": false,
        "presets": [
            ["react"],
            ["es2015", { "modules": false }]
        ],
        "plugins": [
            "syntax-dynamic-import",
            "transform-object-rest-spread",
            "transform-class-properties"
        ]
    }
}

重启webpack,顺利通过编译!!!

 

react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level

标签:obj   issue   save   禁用   sed   ocs   --   syn   关键词   

原文地址:https://www.cnblogs.com/qianshui/p/9160480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!