I have a global npm module installed, let's call it abc-cli
. Now I have a react app
that runs with this command: abc-cli run
.
What abc-cli
basically does is gets the components in the app
and compiles and runs it with its source.
Now I want to publish this app
as a separate npm module. So I am using the Webpack to generate the bundle. While resolving modules, webpack is unable to resolve the modules that are a part of the abc-cli
. That is obvious, webpack has no idea what abc-cli
is.
So my question is how do I make sure that webpack resolves the modules dependencies? Is there any way I can make the webpack run/compile the abc-cli
while bundling.
Or the worst case could be how to suppress the module resolution warning or ignore those modules. Because I know that its going to be present.
Example:
In my app
, I have an import statement as
import SomeComponent from '@abc/components';
Now while bundling, the webpack won't resolve this module:
Module not found: Error: Can't resolve '@abc/components' in '/home/shishir/app/src/shared/visualizations'
It would be great help if I could get around this.
My webpack configuration:
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['.mjs', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
'stage-2'
]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
externals: {
'react': 'commonjs react'
}
};
I tried the null-loader:
{
test: require.resolve("@abc/components"),
use: 'null-loader'
}
but it didnt help.
from Having trouble with the webpack module resolution
No comments:
Post a Comment