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

Taro小助手

问题描述

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

复现步骤

cnpm install -g @tarojs/cli
taro init myApp
cd myApp
cnpm install taro-ui --save
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 无效果]

原因和解决方法：

一般来说，这是在引用node_modules内的资源时出现的错误。
为了提高编译速度，Taro默认不会对node_modules路径中的文件进行处理。
如果有例外的情况，则需要通过esnextModules配置指定。
esnextModules配置是个数组，数组元素可以是字符串，也可以是正则，能够匹配到本地 node_modules 中的模块即可。