以前做vue项目都好好的,最近做react,公共配置感觉加个jsx就可以了吧,然而不是这样的。

一、问题描述

You may need an appropriate loader to handle this file type。

二、问题分析

babelrc我配置了,babel-loader也配置正确,问题出现在include值上面,还原现场。

module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
        }]
}

三、解决方案

去掉最后一行配置即可,像这样写。

module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
}

四、疑惑

但是之前做vue项目的时候,我加include配置就不会报错呢,react项目咋就不行了呢?匪夷所思,后续补充。。。

webpack报错需要合适的loader的更多相关文章

  1. webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?

    webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find mo ...

  2. webpack 报错 No PostCSS Config found 解决方案。

    webpack 报错 No PostCSS Config found  这个问题我在百度上找了好久,也没有找到解决方案,最后没有办法只能自己去啃官方文档,本案例在本人的webpack 学习感悟中已经写 ...

  3. webpack报错no postcss config...

    终端里运行的错误: 查了好多资料,最后找到解决办法,改为: const webpack = require('webpack'); // const autoprefixer = require('a ...

  4. Vue+webpack报错: listen EADDRINUSE: address already in use :::8080

    如果本地运行多个vue+webpack项目会报错:listen EADDRINUSE: address already in use :::8080: 提示含义:地址端口已经被占用 注:8080指的是 ...

  5. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

  6. webpack报错Cannot read property 'presetToOptions' of undefined

    在学习react全家桶时,webpack首先报错,报错内容如下,最后我是因为没有全局安装webpack导致的报错,使用npm install webpack -g安装解决了这个问题.

  7. react脚手架抽离webpack报错解决

    我们在写react项目的时候,可能原有的webpack配置不满足我们的需求,需要自己去配置,可是你在创建脚手架的时候并不能在外部找到webpack文件,脚手架的webpack文件在node_modul ...

  8. Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

    1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @ ...

  9. webpack报错

    webpack-dev-server --inline --progress --config build/webpack.dev.conf.js internal/modules/cjs/loade ...

随机推荐

  1. Hadoop记录-JMX参数

    Yarn metrics参数说明 获取Yarn jmx信息:curl -i http://xxx:8088/jmx Hadoop:service=ResourceManager,name=FSOpDu ...

  2. Dynamics CRM 日常使用JS整理(一)

    整理下平时CRM开发中用到的一些基本的js操作 取值: var oResult = Xrm.Page.getAttribute(sFieldName).getValue(); var oResult ...

  3. PageRank算法--从原理到实现

    本文将介绍PageRank算法的相关内容,具体如下: 1.算法来源 2.算法原理 3.算法证明 4.PR值计算方法 4.1 幂迭代法 4.2 特征值法 4.3 代数法 5.算法实现 5.1 基于迭代法 ...

  4. oldboy s21day10

    #!/usr/bin/env python # -*- coding:utf-8 -*-   # 1.写函数,函数可以支持接收任意数字(位置传参)并将所有数据相加并返回. ''' def func(* ...

  5. 高并发秒杀系统--Service事务管理与继承测试

    [Spring IoC的类型及应用场景]  [Spring事务使用方式] [Spring事务的特性] [Spring事务回滚的理解] [Service声明式事务的配置] 1.配置事务管理器 2.配置基 ...

  6. js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意   js中escape对应的C#解码函数 System.We ...

  7. 迅为iTOP-4418开发板-Android5.1系统编译补充

    基于iTOP-4418开发板-Android5.1系统编译补充 5.6 编译-20181225 日期之后的源码 本文档补充介绍 4418 编译网盘目录 “J:\局域网共享_阮\iTOP4418 开发板 ...

  8. hinernate-实体对象的3种状态

    瞬时状态---持久化状态---游离态 瞬时状态:实体对象中没有id,没有与session关联 持久化状态:实体对象中有id,与session有关联 游离态:实体对象中有id,没有与session关联 ...

  9. C#(在WeBAPI)获取Oracle(在PL/SQL)游标类型的存储过程(用到了RefCursor)

    需求:WebAPI服务端,通过Oracle数据库的存储过程,获取数据. 在PL/SQL 建立存储过程:(先来最简单的,就是把整个表都查出来) create or replace procedure S ...

  10. 华为mate10 UA

    Dalvik/2.1.0 (Linux; U; Android 9; ALP-AL00 Build/HUAWEIALP-AL00) "user-agent": "Mozi ...