Bundle NPM пакет, который подключается к магазину приложений

Question

Я боролся с webpack и проигрывая последние полтора дня, и я сдаюсь, пожалуйста, помогите!

Итак, я пытаюсь создать пакет NPM, который будет использоваться на многих наших сайтах. У нас есть несколько сайтов с общей функциональностью, мы используем redux, и я сделал пакет npm, который предоставляет действия, редукторы и промежуточное ПО, которые можно импортировать в несколько проектов. Это отлично работает, не беспокойтесь. Сейчас я пытаюсь создать второй пакет, содержащий компоненты, которые используют состояние основного приложения из хранилища redux.

Этот второй пакет использует селекторы и отправляет действия, предоставляемые первым пакетом.

• Я написал компонент в основном приложении, отлично работает,
• Я создал новый проект для второго пакета, скопировал и вставил компонент, это s css файл модуля , добавил первый пакет и другие зависимости как одноранговые зависимости
• , построенные с помощью webpack (после некоторых проблем с одноранговыми зависимостями, которые не были найдены, мне пришлось установить их с помощью install-peers, возможно, это как-то связано с моей проблемой )
• Затем я npm установил пакет в основное приложение ... и получаю "store is undefined".

Я думаю, что проблема с моим webpack, почему-то компонент не имеет доступа к хранилищу моего приложения, как будто он существует в своем собственном маленьком мире. Это мое предположение, я мог бы быть далеко.

Мы используем модули react, next, redux и s css.

Вот моя конфигурация webpack (внешние элементы закомментированы, поскольку я Я использую плагин peer-deps-externals-webpack-plugin):

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
var path = require("path");
var PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin');


module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve("build"),
        filename: "index.js",
        // libraryTarget: "commonjs2",
        library: 'mm-chat-components',
        libraryTarget: 'umd',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css',
            chunkFilename: 'styles.css'
        }),
        new PeerDepsExternalsPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.module\.s(a|c)ss$/,
                loader: [
                  MiniCssExtractPlugin.loader,
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true,
                      sourceMap: false
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: false
                    }
                  }
                ]
              },
              {
                test: /\.s(a|c)ss$/,
                exclude: /\.module.(s(a|c)ss)$/,
                loader: [
                  'css-loader',
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: false
                    }
                  }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ]
    },
    externals: {
    //     react: "react",
    //     reactDOM: 'react-dom',
    //     mmTheme: 'mm-theme',
    //     mmChatRedux: 'mm-chat-redux',
    //     mmReduxBase: 'mm-redux-base',
    //     redux: 'redux',
    //     reactRedux: 'react-redux',
    //     finalForm: 'final-form',
    //     reactFinalForm: 'react-final-form',
    //     twilioChat: 'twilio-chat'
    }
};

Вот мой пакет. json:

{
  "name": "mm-chat-components",
  "version": "1.0.0",
  "description": "",
  "main": "./build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-webpack": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "mm-redux-base": "git+https://github.com/MMTSURVEY/mm-redux-base.git",
    "mm-theme": "git+https://github.com/MMTSURVEY/mmj-theme.git",
    "final-form": "^4.18.7",
    "react-final-form": "^6.3.5",
    "react": "^16.13.1",
    "twilio-chat": "^3.3.7",
    "react-redux": "^7.2.0",
    "react-dom": "^16.12.0",
    "mm-chat-redux": "git+https://github.com/MMTSURVEY/mm-chat-redux.git"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-react-css-modules": "^5.2.6",
    "babel-plugin-react-css-modules-sass": "^1.1.0",
    "css-loader": "^3.5.3",
    "install-peers": "^1.0.3",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "peer-deps-externals-webpack-plugin": "^1.0.4",
    "sass-loader": "^8.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

И мой babelr c:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Обычно я теряюсь при использовании webpack, он все еще кажется magi c, что далеко за пределами моего понимания. Это много информации, надеюсь, все понятно! Заранее благодарю за любую помощь! Ребята, вы молодцы.

Бо