npm run dev:h5 编译失败 You may need an appropriate loader to handle this file type.
-
问题描述
第一次使用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 中的模块即可。