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



  • 问题描述

    第一次使用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 无效果]

    原因和解决方法:

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


登录后回复