Пакет Webpack не экспортируется и не может быть импортирован

Question

Я создал свою реакцию Проект A , используя Create-React-app. Затем я связываю их с Webpack и сохраняю в моей учетной записи Git. Теперь я создаю другой проект (называется Project B ) в другом каталоге. Скачайте Project A напрямую из git. И пытается использовать это так:

import React from 'react';
import ReactDOM from 'react-dom';
import { Main } from 'project-A/dist/main'

ReactDOM.render(<Main />, document.getElementById('root'));

Я получаю сообщение об ошибке:

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.

Веб-пакет от Проект A выглядит так:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const nodeExternals = require("webpack-node-externals");

module.exports = [
    {
        /*Client Side*/
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    }
]

Я провел исследование через github и попытался изменить имя импорта, оно все еще не работает.

Компонент проекта A выглядит следующим образом:

App.js:

  render() {
    return (
      <div>
        {this.renderCodeAuthCard()}
        {this.renderConfirmCard()}
        {this.renderVerifyCard()}
      </div>
    );
  }

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Очевидно, веб-пакет не экспортирует файл пакета, созданный в Проекте А. Поскольку при импорте получается "undefine".

Я пытаюсь найти способ экспортировать файл пакета веб-пакета и использовать его в другом проекте.

Любая помощь будет оценена

Answer 1

Это потому, что вы не экспортируете ничего из index.js из Project A .Библиотеки, установленные с помощью npm, экспортируют функции из index.js.