webpack4的react打包错误
因为之前一直用的是脚手架创建项目,第一次自己学习创建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打包错误的更多相关文章
- 关于react打包之后静态资源加载错误的问题
之前在打包react项目时发现一些问题,打包出来后我的一部分png图标加载不出来,开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter> ...
- 解决Maven并行编译中出现打包错误问题的思路
解决Maven并行编译中出现打包错误问题的思路 并行构建 Maven 3.x 提供了并行编译的能力,通过执行下列命令就可以利用构建服务器的多线程/多核性能提升构建速度: mvn -T 4 clean ...
- [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 ...
- 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
- webpack4.16压缩打包
webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...
- webpack4构建react脚手架
create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- android 打包错误
打包时报如下错误: Export aborted because fatal lint errors were found. These are listed in the Lint View. Ei ...
- Eclipse导出jar包Unity打包错误
前几天接SDK使用的是Android Studio昨天打开AndroidStudio后自动更新了gradler然后失败了然后AndroidStudio就挂了.就是用之前的方法Eclipse到处jar包 ...
随机推荐
- golang闭包
http://blog.51cto.com/speakingbaicai/1703229 https://www.jianshu.com/p/fa21e6fada70 所谓闭包就是一个函数" ...
- U盘中毒了?教你如何删除System Volume Information这个顽固文件夹
不得不说cmd命令很好用呢.最近我的U盘中毒了,格式化都删除不了System Volume Information这个顽固的文件夹,真心伤不起哇!还好现在解决了问题.看来以后得好好对待U盘,不能乱用了 ...
- Windows软件静默安装
Install Software in A Slient Way 一般来说,不同的软件的封装类型都有固定的静默安装命令. 查看软件的封装类型 双击setup.exe,在弹出窗口的左上角单击,选择&qu ...
- OC Copy and MutableCopy的使用
#import <Foundation/Foundation.h> @interface Student : NSObject <NSCopying> // copy代表set ...
- 关于tcp状态及一些延展
1.常用的三个状态是:ESTABLISHED 表示正在通信,TIME_WAIT 表示主动关闭,CLOSE_WAIT 表示被动关闭. TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断 ...
- phonegap 捕获图片,音频,视屏 api capture
一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...
- AtomicInteger线程安全的计数器
在多线程环境下计数的时候,++i和i++是不安全的,故而需要加锁机制,也可以使用volatile关键字进行修饰,但是更简单有效的方式是使用Atomic类
- BZOJ2440:[中山市选2011]完全平方数(莫比乌斯函数)
Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱. 这天是 ...
- 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取
thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...
- Yii2控制器 返回 json 格式数据
Yii::$app->response->format = Response::FORMAT_JSON; $data = User::find()->where([])->as ...