Question

我正在尝试渲染https://github.com/wix/react-native-calendars上的日历

我遇到无法编译的错误：

./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设置：

// 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一起使用-那么我在做错什么导致我无法在设置中使用它呢？

Answer 1

找到了解决方案。确保将其包含在babel-loader中。要解决此问题，请执行以下操作：

1-确保将package文件夹包含在webpack.config.js的babelLoader配置中，

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应该是这样的。在开发人员解决此问题之前，请避免更新软件包，否则您将丢失更改。（我将其包括在内是因为它在第一步之后就发生在我身上，以防万一） https://gist.github.com/iosvanyd1/abd18bd35ce3fdcb635100ce5d5b0beb

无法在React Native Web上编译

1 个答案: