Не удалось скомпилировать в React Native Web

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.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"),
        },
    ]
}

Но я не очень разбираюсь в веб-пакете.

Библиотека работает с React Native Web - так что я делаю неправильно, из-за чего я не могу это работает с моей настройкой?

Answer 1

Нашел решение. Обязательно включите его в babel-loader. Чтобы исправить это, сделайте следующее:

1- Обязательно включите папку пакета в конфигурацию babelLoader в webpack.config. js как

include: [path.resolve(appDirectory, 'node_modules/react-native-calendars'), ...]

ПРИМЕЧАНИЕ: не забудьте также включить все каталоги, для которых требуется babel-loader.

2- (может понадобиться) - вам может понадобиться go для node_modules / реагировать-native-calendars / src / calendar / index. js и к node_modules / реагировать-нативные календари / src / повестка дня / индекс. js и УДАЛИТЕ объявления propTypes и импорт ViewPropTypes из реактивного-родителя в строках 2, 20 и 32 в обоих файлах. Вот как * / повестки дня / индекс. js должен выглядеть. Пока разработчики не исправят это, избегайте обновления пакета, иначе вы потеряете изменения. (Я включил это, потому что это случилось со мной сразу после шага 1, на всякий случай) https://gist.github.com/iosvanyd1/abd18bd35ce3fdcb635100ce5d5b0beb