I have a shared ui-library as a private node_module. In my angular apps I have a webpack configuration that lets me transpile these components as they're included.
{
test: /\.(js|jsx)$/,
// Don't attempt to transpile any non-@aver node-modules
exclude: /(node_modules\/(?!(@aver)\/).*|bower_components)/,
use: [
{
loader: 'ng-annotate-loader',
options: { add: true, single_quotes: true }
},
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
retainLines: true
}
}
]
},
When I tried to include parts of this shared library in my new react app (created from create-react-app
), It told me I need to use loaders to include those components. But with create-react-app you don't have access to the webpack config directly. So I think one of two things needs to happen:
Find a way to override the wepback config to allow it to use loaders on my particular node_modules. I'd like to avoid
ejecting
if possible.Compile my shared library ahead of time to a dist file that I can include which is already transpiled. I don't like this because it means I have to include the entire shared library versus the individual components that I actually need.
Any advice on how to fix this?