首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法在React Native Web上编译

无法在React Native Web上编译
EN

Stack Overflow用户
提问于 2020-04-15 02:08:51
回答 1查看 903关注 0票数 2

我正在尝试呈现来自https://github.com/wix/react-native-calendars的日历

我收到一个编译失败的错误:

代码语言:javascript
复制
./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type.
|     render() {
|       return (
|         <CalendarContext.Consumer>
|           {(context) => (
|             <WrappedComponent

我想是基于我的webpack设置:

代码语言:javascript
复制
// webpack.config.js
module.exports = {
    plugins: ["@babel/plugin-syntax-dynamic-import"],

    resolve: {
        alias: {
            'react-native$': 'react-native-web'
        },
    },
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: ['babel-preset-env', 'babel-preset-stage-0'],
                plugins: ["@babel/plugin-syntax-dynamic-import"],
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
                presets: ['babel-preset-env', 'babel-preset-stage-0'],
            }
        },
        {
            test: /\.ttf$/,
            loader: "url-loader", // or directly file-loader
            include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
        },
    ]
}

但我并不是真正的webpack专家。

这个库似乎可以与React Native Web一起工作--那么我到底做错了什么,导致它无法与我的设置一起工作呢?

EN

回答 1

Stack Overflow用户

发布于 2020-04-15 23:33:17

找到了解决方案。确保将其包含在babel-loader中。要修复它,请执行以下操作:

1-确保将webpack.config.js的babelLoader配置中的包文件夹包括为

代码语言:javascript
复制
include: [path.resolve(appDirectory, 'node_modules/react-native-calendars'), ...]

注意:不要忘了也包括所有需要babel-loader的目录。

2- (可能需要)-您可能需要转到node_modules/react-native-calendars/src/calendar/index.js和node_modules/react-native-calendars/src/agenda/index.js,并从这两个文件的第2、20和32行的react-native中删除propTypes声明和ViewPropTypes导入。下面是*/agenda/index.js应该是什么样子。在开发人员解决这个问题之前,请避免更新包,否则您将丢失更改。(我之所以包括这一点,是因为它发生在步骤1之后,以防万一) https://gist.github.com/iosvanyd1/abd18bd35ce3fdcb635100ce5d5b0beb

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61214330

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档