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

待我称王封你为后i 2021-12-18 18:57 331阅读 0赞

##### 报错 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MDQwMTU1_size_16_color_FFFFFF_t_70]

##### 配置信息 #####

> 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"
      ]
    }

> 3、完美解决问题

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MDQwMTU1_size_16_color_FFFFFF_t_70]: /images/20211219/b63e4c1987b246b2a6ba6db2e07ddb38.png