Bundle NPM package that connects to applications store - reactjs

Question

I've been fighting with webpack and loosing for the last day and a half and I give up, please help!
So what I'm trying to do is create an NPM package that will be used in many of our sites. We have multiple sites with a shared functionality, we are using redux and I have made an npm package that provides actions, reducers and middleware that can be imported across multiple projets. That works great, no worries there. I am now trying to make a second package that contains components that use the main application's state from the redux store.
This second package uses selectors and dispatches actions provided by the first package.
I wrote the component in the main application, works great,
I created a new project for the second package, copy and pasted the component, it's scss module file, added the first package and other dependancies as peer dependancies
built with webpack (after some troubles with peer dependancies not being found, I had to install them with install-peers, maybe this has something to do with my problem)
I then npm installed the package in the main application... and I'm getting "store is undefined".
I think there is a problem with my webpack config, somehow the component doesn't seem to have access to my application's store as if it exists in its own little world. This is my guess, I could be miles off.
We are using react, next, redux and scss modules.
Here is my webpack config (externals are commented out as I'm using 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'
}
};
Here is my package.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"
}
}
And my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
I'm generally lost when using webpack, it still seems like magic that's far beyond my comprehension.
That's lots of info, I hope it's all clear! Thanks in advance for any help! You guys rock.
Beau