React-loadable 编译时出现import报语法错误(Module build failed: SyntaxError: Unexpected token (7:18))

最新推荐文章于 2021-08-09 15:56:04 发布

XIPIKER

最新推荐文章于 2021-08-09 15:56:04 发布

阅读量4.1k

点赞数

分类专栏：前端开发文章标签： react

本文链接：https://blog.csdn.net/qq_25040155/article/details/94390385

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

报错

在这里插入图片描述

配置信息

package.json

{
  "name": "react-xipiker-v1",
  "version": "1.0.0",
  "description": "react-xipiker-v1",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./build/webpack.dev.config.js",
    "start": "webpack-dev-server --config ./build/webpack.dev.config.js --color --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "7.2.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-loadable": "^5.5.0",
    "react-redux": "^7.1.0",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "url-loader": "^2.0.1"
  }
}

webpack.dev.config.js

module: {
	rules: [{
	    test: /\.js$/,
	    use: ['babel-loader?cacheDirectory=true'],
	    include: path.join(__dirname, '../src')
	},{
	    test: /\.(png|jpg|gif)$/,
	    use: [{
	        loader: 'url-loader',
	        options: {
	            limit: 8192
	        }
	    }]
	}],
}

解决方法

看到这个错误信息，本来以为是babel没配好，但是项目其他部分“=>”这类es6语法都是可以解析的，然后搞了半天，发现问题的关键点没有找对，既然是react-loadable编译时报错，那就看看它需要什么，也是网上找的，需要安装babel-plugin-syntax-dynamic-import。
1、npm install babel-plugin-syntax-dynamic-import --save
2、.babelrc需要配置如下，plugins需要加dynamic-import-webpack

{
  "presets": [
    ["es2015"],
    "react"
  ],
  //上面那一块如果有写可以省略
  "plugins": [
    "babel-plugin-transform-class-properties",
    "dynamic-import-webpack"
  ]
}