因为之前一直用的是脚手架创建项目,第一次自己学习创建webpack打包。loader我是复制别人的。

 module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},

结果打包的时候报错了。

ERROR in ./js/index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In I:\desk\File Manager\Demo\react\my-app\node_modules\babel-preset-react\lib\index.js
at createDescriptor (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:179:11)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:104:12
at Array.map (<anonymous>)
at createDescriptors (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:103:27)
at createPresetDescriptors (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:95:10)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:81:14
at cachedFunction (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\caching.js:40:17)
at presets (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:26:68)
at mergeChainOpts (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:298:68)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:251:7
at buildRootChain (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:64:27)
at loadPrivatePartialConfig (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\partial.js:41:53)
at loadFullConfig (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\full.js:33:37)
at transformSync (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\transform-sync.js:13:36)
at Object.transform (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\transform.js:20:65)
at transpile (I:\desk\File Manager\Demo\react\my-app\node_modules\babel-loader\lib\index.js:55:20)
at Object.module.exports (I:\desk\File Manager\Demo\react\my-app\node_modules\babel-loader\lib\index.js:179:20)

去官网上看了一下发现官网上presets里面都是 @babel/xxx,跟着试了一下果然如此

npm install @babel/preset-react --save-dev

npm install @babel/preset-react --save-es2015

  module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react','@babel/preset-es2015']
}
}
}
]
}

  

webpack4的react打包错误的更多相关文章

  1. 关于react打包之后静态资源加载错误的问题

    之前在打包react项目时发现一些问题,打包出来后我的一部分png图标加载不出来,开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter> ...

  2. 解决Maven并行编译中出现打包错误问题的思路

    解决Maven并行编译中出现打包错误问题的思路 并行构建 Maven 3.x 提供了并行编译的能力,通过执行下列命令就可以利用构建服务器的多线程/多核性能提升构建速度: mvn -T 4 clean ...

  3. [RN] React Native 错误 Module does not exist in the module map

    React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...

  4. webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js

    webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1

  5. webpack4.16压缩打包

    webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...

  6. webpack4构建react脚手架

    create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...

  7. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  8. android 打包错误

    打包时报如下错误: Export aborted because fatal lint errors were found. These are listed in the Lint View. Ei ...

  9. Eclipse导出jar包Unity打包错误

    前几天接SDK使用的是Android Studio昨天打开AndroidStudio后自动更新了gradler然后失败了然后AndroidStudio就挂了.就是用之前的方法Eclipse到处jar包 ...

随机推荐

  1. golang闭包

    http://blog.51cto.com/speakingbaicai/1703229 https://www.jianshu.com/p/fa21e6fada70 所谓闭包就是一个函数" ...

  2. U盘中毒了?教你如何删除System Volume Information这个顽固文件夹

    不得不说cmd命令很好用呢.最近我的U盘中毒了,格式化都删除不了System Volume Information这个顽固的文件夹,真心伤不起哇!还好现在解决了问题.看来以后得好好对待U盘,不能乱用了 ...

  3. Windows软件静默安装

    Install Software in A Slient Way 一般来说,不同的软件的封装类型都有固定的静默安装命令. 查看软件的封装类型 双击setup.exe,在弹出窗口的左上角单击,选择&qu ...

  4. OC Copy and MutableCopy的使用

    #import <Foundation/Foundation.h> @interface Student : NSObject <NSCopying> // copy代表set ...

  5. 关于tcp状态及一些延展

    1.常用的三个状态是:ESTABLISHED 表示正在通信,TIME_WAIT 表示主动关闭,CLOSE_WAIT 表示被动关闭. TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断 ...

  6. phonegap 捕获图片,音频,视屏 api capture

    一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...

  7. AtomicInteger线程安全的计数器

    在多线程环境下计数的时候,++i和i++是不安全的,故而需要加锁机制,也可以使用volatile关键字进行修饰,但是更简单有效的方式是使用Atomic类

  8. BZOJ2440:[中山市选2011]完全平方数(莫比乌斯函数)

    Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱. 这天是 ...

  9. 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

    thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...

  10. Yii2控制器 返回 json 格式数据

    Yii::$app->response->format = Response::FORMAT_JSON; $data = User::find()->where([])->as ...