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包 ...
随机推荐
- javascript fundamental concept
http://hzjavaeyer.group.iteye.com/group/wiki?category_id=283 上面这个url非常适合javascript初学者阅读,感谢原作者的分享 什么是 ...
- Linux 内核超时导致虚拟机无法正常启动
问题描述 当 Linux 虚拟机启动时,通过串口输出或者启动日志, 观察到超时的报错.导致虚拟机无法正常启动和连接. 问题分析 常见的超时报错范例如下: 复制 INFO: task swapper:1 ...
- 最短路径-Dijkstra算法与Floyd算法
一.最短路径 ①在非网图中,最短路径是指两顶点之间经历的边数最少的路径. AE:1 ADE:2 ADCE:3 ABCE:3 ②在网图中,最短路径是指两顶点之间经历的边上权值之和最短的路径 ...
- C++ 类的存储方式以及虚函数表
一.C++成员函数在内存中的存储方式 用类去定义对象时,系统会为每一个对象分配存储空间.如果一个类包括了数据和函数,要分别为数据和函数的代码分配存储空间.按理说,如果用同一个类定义了10个对象,那么就 ...
- webConfig详细跳转配置.[转]
站更换域名,把旧域名用301指到新域名来. 从iis中设置url永久转向就可以,看上去很容易,用了一会儿才发现,参数都没有带上. 从微软网站上找到如下说明,果然好使: 重定向参考 (IIS 6.0,7 ...
- 对于view的深入理解,续篇(一)重写ViewGroup的onDraw
在上一篇文章中,不仅熟悉了动态设定布局的方法,而且也对view的绘制流程有所了解.于是我继续做了下面几个实验,发现了一个问题.如果对view的绘制流程不是很明白,可以看看我的上一篇文章的介绍,点击下面 ...
- Architecture pattern & Architecture style
Architecture pattern: context + problem -> solution Architecture style: solution part of architec ...
- JQuery获取和设置Select选项的常用方法总结
1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&q ...
- os,操作文件和目录
如果我们要操作文件.目录,可以在命令行下面输入操作系统提供的各种命令来完成.比如dir.cp等命令. 如果要在Python程序中执行这些目录和文件的操作怎么办?其实操作系统提供的命令只是简单地调用了操 ...
- 曾经被UITextField给坑一把
UITextField *tfText = [[UITextField alloc] initWithFrame:CGRectMake(30, 150, self.view.frame.size.wi ...