Monday, 1 April 2019

Having trouble with the webpack module resolution

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