Правильно исключая реакцию из пакета webpack - PullRequest
0 голосов
/ 18 апреля 2020

Я нашел 6 или 7 совершенно разных и порой противоречивых ответов на этот вопрос только на SO, поэтому снова спрашиваю в надежде, что кто-то сможет это выяснить ...

У меня есть библиотека компонентов, звоните это my-lib, и приложение, назовите его my-app. my-lib со временем экспортирует компоненты { A, B, C }, my-app со временем запускает import { A, B, C } from 'my-lib';. Раньше я делал это с помощью неорганизованной символической ссылки, теперь я хочу использовать веб-пакет. Библиотека компонентов имеет две одноранговые зависимости, react и axios. Итак, что именно мне нужно поместить в конфигурацию my-lib webpack для того, чтобы должным образом исключить эти зависимости из комплекта?

Самое дальнейшее, что я получил в этой области, это следующее:

externals: {
    react: {
        commonjs: 'react'
    },
    axios: {
        commonjs: 'axios'
    },
}

(оба externals: [ 'react', 'axios' ] и externals: { react: 'react', axios: 'axios' } просто не работают)

Кажется, что эти загрузки загружаются правильно, я не получаю неопределенную ошибку ссылки, но очевидно этого недостаточно, потому что React дает сбой при создании любого компонента из my-lib, потому что он явно не определен.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.

(компоненты работали до перехода на веб-пакет)

РЕДАКТИРОВАТЬ:

Добавлен libraryTarget: umd в output и изменен обратно на externals: [ 'react', 'axios' ] ... Кажется, он правильно связался, не похоже, что модули в комплекте, но теперь экспортируемые компоненты каким-то образом используют версия React отличается от используемой в приложении, что приводит к ошибкам перехвата.

Также есть псевдонимы библиотек с react: path.resolve(__dirname, './node_modules/react') и установка ReactDOM в качестве одноранговой зависимости и включение ее в Индексный файл, даже если он не используется. Еще ничего. Вот конфиг в настоящее время:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'build.js',
        library: 'my-lib',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    resolve: {
        alias: {
            'react': path.resolve(__dirname, './node_modules/react'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
            'axios': path.resolve(__dirname, './node_modules/axios')
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ '@babel/preset-env', '@babel/react' ]
                    }
                }
            }
        ]
    },
    externals: [ 'react', 'react-dom', 'axios' ]
}

, который оставляет меня с этим

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body
of a function component.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...