npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. #2224

ctcx · 2019-02-20T04:01:06Z

问题描述
第一次使用taro 和 taro-ui，打算开发微信小程序；有react 和微信小程序原生开发经验；按照taro， taro-ui 官方教程使用，遇到问题后查阅了历史issues 并按照解决办法尝试，问题依旧。

复现步骤

1. cnpm install -g @tarojs/cli
2. taro init myApp
3. cd myApp
4. cnpm install taro-ui --save
5. npm run dev:h5

config/index.js 已加入配置

h5: {
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['taro-ui'],

app.scss 加入样式

@import "~taro-ui/dist/style/index.scss";

pages/index.js 加入代码

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <AtButton type='primary'>按钮文案</AtButton>
      </View>
    )
  }
}

期望行为
打开页面显示按钮

报错信息

创建  发现文件  src/app.scss
创建  发现文件  src/index.html
创建  发现文件  src/pages/index/index.js
创建  发现文件  src/pages/index/index.scss


ℹ️  Listening at http://127.0.0.1:10086/

监听文件修改中...

🙅   Failed to compile.

./node_modules/.2.0.0@taro-ui/dist/h5/components/countdown/index.js 105:11
Module parse failed: Unexpected token (105:11)
You may need an appropriate loader to handle this file type.
|     } = this.state;
| 
>     return <View className={classNames({
|       'at-countdown': true,
|       'at-countdown--card': isCard

系统信息

👽 Taro v1.2.13
  Taro CLI 1.2.13 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.1.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 1.2.13 => 1.2.13 
      @tarojs/plugin-babel: 1.2.13 => 1.2.13 
      @tarojs/plugin-csso: 1.2.13 => 1.2.13 
      @tarojs/plugin-sass: 1.2.13 => 1.2.13 
      @tarojs/plugin-uglifyjs: 1.2.13 => 1.2.13 
      @tarojs/router: 1.2.13 => 1.2.13 
      @tarojs/taro: 1.2.13 => 1.2.13 
      @tarojs/taro-alipay: 1.2.13 => 1.2.13 
      @tarojs/taro-h5: 1.2.13 => 1.2.13 
      @tarojs/taro-swan: 1.2.13 => 1.2.13 
      @tarojs/taro-tt: 1.2.13 => 1.2.13 
      @tarojs/taro-weapp: 1.2.13 => 1.2.13 
      @tarojs/webpack-runner: 1.2.13 => 1.2.13 
      eslint-config-taro: 1.2.13 => 1.2.13 
      eslint-plugin-taro: 1.2.13 => 1.2.13 
      nervjs: ^1.3.9 => 1.3.12 
    npmGlobalPackages:
      typescript: 3.1.5

Taro 版本 [v1.2.13]
Taro UI 版本 [v2.0.0]
报错平台 [h5, weapp 无效果]

The text was updated successfully, but these errors were encountered:

taro-bot · 2019-02-20T05:01:16Z

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

taro-bot · 2019-02-20T06:30:23Z

CC @Littly

Littly · 2019-02-20T08:34:56Z

按照操作，没有复现你的问题喔

Andyliwr · 2019-02-20T12:26:04Z

遇到了相同的问题

zhang14725804 · 2019-02-20T13:27:51Z

holin · 2019-02-21T06:40:31Z

我也出现这个问题，找了两天了，最后发现是我系统里有一个 ~/.babelrc 文件导致的，干掉这个文件，就能正常编译了。

Littly · 2019-02-22T02:25:11Z

我也出现这个问题，找了两天了，最后发现是我系统里有一个 ~/.babelrc 文件导致的，干掉这个文件，就能正常编译了。

是否都是类似于这位老哥的情况？不是的话，需要提供一个能复现的仓库不然完全没法debug

wcmboy · 2019-02-23T15:19:43Z

同样的问题，没发现有~/.babelrc文件，要怎么搞？

zhang14725804 · 2019-02-24T02:09:16Z

1、首先检查config/index.js 是否已加入配置 esnextModules: ['taro-ui']
2、删掉.temp文件夹重新npm run dev
3、删除node_modules文件夹重新安装依赖

亲测有效

wcmboy · 2019-02-24T03:45:53Z

1、首先检查config/index.js 是否已加入配置 esnextModules: ['taro-ui']
2、删掉.temp文件夹重新npm run dev
3、删除node_modules文件夹重新安装依赖

亲测有效

esnextModules: ['taro-ui'] 这个是加到config/index.js哪个位置？

ctcx · 2019-02-26T01:29:44Z

1、首先检查config/index.js 是否已加入配置 esnextModules: ['taro-ui']
2、删掉.temp文件夹重新npm run dev
3、删除node_modules文件夹重新安装依赖
亲测有效

esnextModules: ['taro-ui'] 这个是加到config/index.js哪个位置？

config/index.js 已加入配置

h5: {
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['taro-ui'],

Littly · 2019-02-27T02:58:42Z

如果依然出现这种情况那需要一个可以重现这种情况的仓库地址

sananiki · 2019-03-04T07:13:17Z

如果依然出现这种情况那需要一个可以重现这种情况的仓库地址

我用的taro-ui的官方仓库进行的测试，有两台机器win7,win server2008可以正常运行，还有一台win7,mac跑不起来，就报这个./node_modules/.2.0.0@taro-ui/dist/h5/components/countdown/index.js 105:11 错误

ASeR1-ATG · 2019-03-04T07:15:55Z

wat do u mean? Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: sananiki <notifications@github.com> Sent: Sunday, March 3, 2019 11:13:29 PM To: NervJS/taro Cc: Subscribed Subject: Re: [NervJS/taro] npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. (#2224) 如果依然出现这种情况那需要一个可以重现这种情况的仓库地址我用的taro-ui的官方仓库进行的测试，有两台机器win7,win server2008可以正常运行，还有一台win7,mac跑不起来，就报这个./node_modules/.2.0.0@taro-ui/dist/h5/components/countdown/index.js 105:11 错误 ― You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro%2Fissues%2F2224%23issuecomment-469143072&data=02%7C01%7C%7C1f9644d82ea84987ab9e08d6a070e7c7%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636872804109350714&sdata=atbeh3WKRBxgJlEJpV%2BBZFzIVBeonaDJxuU03EJgj9o%3D&reserved=0>, or mute the thread<https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAsDZqcnrw-CRfu1gaQcid8ieEvQlPBJDks5vTMeZgaJpZM4bEamE&data=02%7C01%7C%7C1f9644d82ea84987ab9e08d6a070e7c7%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636872804109360725&sdata=RO5l85w%2FHmXIAs3DWyu82lrUotx4G9LNl61OjBWe3uc%3D&reserved=0>.

ASeR1-ATG · 2019-03-04T07:36:31Z

so the mingw?? Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Alexander Sandoval Sent: Sunday, March 3, 2019 11:15:52 PM To: NervJS/taro; NervJS/taro Cc: Subscribed Subject: Re: [NervJS/taro] npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. (#2224) wat do u mean? Get Outlook for iOS<https://aka.ms/o0ukef>

________________________________ From: sananiki <notifications@github.com> Sent: Sunday, March 3, 2019 11:13:29 PM To: NervJS/taro Cc: Subscribed Subject: Re: [NervJS/taro] npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. (#2224) 如果依然出现这种情况那需要一个可以重现这种情况的仓库地址我用的taro-ui的官方仓库进行的测试，有两台机器win7,win server2008可以正常运行，还有一台win7,mac跑不起来，就报这个./node_modules/.2.0.0@taro-ui/dist/h5/components/countdown/index.js 105:11 错误 ― You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro%2Fissues%2F2224%23issuecomment-469143072&data=02%7C01%7C%7C1f9644d82ea84987ab9e08d6a070e7c7%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636872804109350714&sdata=atbeh3WKRBxgJlEJpV%2BBZFzIVBeonaDJxuU03EJgj9o%3D&reserved=0>, or mute the thread<https://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAsDZqcnrw-CRfu1gaQcid8ieEvQlPBJDks5vTMeZgaJpZM4bEamE&data=02%7C01%7C%7C1f9644d82ea84987ab9e08d6a070e7c7%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636872804109360725&sdata=RO5l85w%2FHmXIAs3DWyu82lrUotx4G9LNl61OjBWe3uc%3D&reserved=0>.

Littly · 2019-03-14T02:59:48Z

如果依然出现这种情况那需要一个可以重现这种情况的仓库地址

我用的taro-ui的官方仓库进行的测试，有两台机器win7,win server2008可以正常运行，还有一台win7,mac跑不起来，就报这个./node_modules/.2.0.0@taro-ui/dist/h5/components/countdown/index.js 105:11 错误

神奇了。你是用什么包管理器安装的？看你的报错日志，taro-ui的最终安装目录是node_modules/.2.0.0@taro-ui，esnextModules里面配taro-ui无法匹配到他。

Littly · 2019-03-14T03:07:35Z

遇到了相同的问题

应该是node模块的安装路径导致的。你用的是什么系统和包管理器？

asreday · 2019-03-16T08:00:11Z

改了上面的都还是上面的那个问题，无法编译打包H5

asreday · 2019-03-16T08:03:42Z

遇到了相同的问题

应该是node模块的安装路径导致的。你用的是什么系统和包管理器？

我是用cnpm i -D taro-ui
版本2.0.2。

asreday · 2019-03-16T09:14:56Z

后面把taro回退到1.2.17后新建一个项目，把package.json复制过去，然后下taro-ui后就好，个人觉得的应该是@tarojs依赖包中的问题，先用1.2.17好了

Littly · 2019-03-25T01:54:55Z

翻了一下上面的评论，这个情况跟具体平台上npm依赖的安装位置有关。

受不同的包管理器影响，taro-ui会被安装在不同的目录下，有最普通的taro-ui，有.2.0.0@taro-ui，还有_taro-ui@2.0.0@taro-ui，这些不同的路径影响了esnextModules的匹配。

taro@1.2.20版本之后对匹配逻辑进行了修改，除了字符串匹配，也增加了正则表达式的匹配功能。如果发现配置了esnextModules后仍然出现need an appropriate loader to handle....的错误，不妨对照本地的安装路径，修改下配置再看看。

taro-bot · 2019-03-25T02:12:55Z

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

koppthe transferred this issue from NervJS/taro-ui Feb 20, 2019

luckyadam added the H5 label Feb 20, 2019

taro-bot bot assigned Littly Feb 20, 2019

taro-bot bot mentioned this issue Feb 23, 2019

项目周报 (2019 年 2 月 16 日 - 2019 年 2 月 23 日) #2247

Closed

Littly added the answered label Mar 25, 2019

taro-bot bot added the to be closed label Mar 25, 2019

Littly closed this as completed Apr 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. #2224

npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. #2224

ctcx commented Feb 20, 2019

taro-bot bot commented Feb 20, 2019

taro-bot bot commented Feb 20, 2019

Littly commented Feb 20, 2019

Andyliwr commented Feb 20, 2019

zhang14725804 commented Feb 20, 2019

holin commented Feb 21, 2019

Littly commented Feb 22, 2019

wcmboy commented Feb 23, 2019 •

edited

Loading

zhang14725804 commented Feb 24, 2019

wcmboy commented Feb 24, 2019

ctcx commented Feb 26, 2019

Littly commented Feb 27, 2019

sananiki commented Mar 4, 2019

ASeR1-ATG commented Mar 4, 2019 via email

ASeR1-ATG commented Mar 4, 2019 via email

Littly commented Mar 14, 2019

Littly commented Mar 14, 2019

asreday commented Mar 16, 2019

asreday commented Mar 16, 2019

asreday commented Mar 16, 2019

Littly commented Mar 25, 2019

taro-bot bot commented Mar 25, 2019

npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. #2224

npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type. #2224

Comments

ctcx commented Feb 20, 2019

taro-bot bot commented Feb 20, 2019

taro-bot bot commented Feb 20, 2019

Littly commented Feb 20, 2019

Andyliwr commented Feb 20, 2019

zhang14725804 commented Feb 20, 2019

holin commented Feb 21, 2019

Littly commented Feb 22, 2019

wcmboy commented Feb 23, 2019 • edited Loading

zhang14725804 commented Feb 24, 2019

wcmboy commented Feb 24, 2019

ctcx commented Feb 26, 2019

Littly commented Feb 27, 2019

sananiki commented Mar 4, 2019

ASeR1-ATG commented Mar 4, 2019 via email

ASeR1-ATG commented Mar 4, 2019 via email

Littly commented Mar 14, 2019

Littly commented Mar 14, 2019

asreday commented Mar 16, 2019

asreday commented Mar 16, 2019

asreday commented Mar 16, 2019

Littly commented Mar 25, 2019

taro-bot bot commented Mar 25, 2019

wcmboy commented Feb 23, 2019 •

edited

Loading