Webpack and Express - Critical Dependencies Warning

Question

I have the following webpack.config.ts:

var webpack = require( 'webpack' );
var path = require( 'path' );

module.exports = {

  entry: [
    './api/bin/www.ts'
  ],
  output: {
    path: path.resolve( __dirname, './dist/api' ),
    filename: 'index.js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'awesome-typescript-loader' },
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: [ '', '.js', '.ts' ]
  },
  target: 'node',
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

When I run webpack I get a warning about a dependency:

WARNING in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
@ ./~/express/lib/view.js 78:29-56

The express server I start with this is no more than a Hello World example and functions as should but I am concerned about this warning.

My googlefu hasn't revealed any passable solutions. I have seen one particular instance of this problem but the solutions were to bypass the warning by not showing it.

try with webpack-node-externals plugin https://www.npmjs.com/package/webpack-node-externals — Everettss, Jan 17 '17 at 12:13
@leo that isnt a file in my repo, it is just included through express I think when I di `import * from express` — Aleski, Jan 17 '17 at 13:39
I'm really confused. The OP says the file is "webpack.config.*ts*" (emphasis mine), but everything else I see says this should be a .js file, and indeed its syntax seems to be more consistent with JavaScript files. Is this just a typo? — Steve Byrne, Feb 20 '18 at 01:57
@Everettss too bad you didn't provide that tip as an answer... lol. — bvj, Mar 02 '18 at 05:22

score 71 · Accepted Answer · answered Feb 23 '17 at 20:08

71

Use webpack-node-externals.

const nodeExternals = require('webpack-node-externals');

{
  target: 'node',
  externals: [nodeExternals()],
}

https://www.npmjs.com/package/webpack-node-externals

answered Feb 23 '17 at 20:08

Jonathan Borges

1,009
9
8

3

This removed my error but some how it is not generating chunk files - `Webpack: output server.0.chunk.js, Webpack: output server.1.chunk.js, Webpack: output server.2.chunk.js, Webpack: output server.3.chunk.js` – mohit Jun 29 '17 at 15:57
How can I have import and require alongside? – pczern Sep 20 '18 at 18:53
@mohit, maybe you forgot about the round brackets of nodeExternal, like I did :): external: [nodeExternal()] – Bogdan Jan 05 '19 at 07:46

score 15 · Answer 2 · answered Jun 06 '19 at 17:20

15

For those that only need to remove the express due to the view lib as mentioned here you can also explicitly target express in externals from your webpack config.

externals: [{ 'express': { commonjs: 'express' } }]

answered Jun 06 '19 at 17:20

Jadam

1,650
1
19
40

Nice solution. In my case I needed to add also `output: {...clientOutput, libraryTarget: 'commonjs'},` to my webpack.config to avoid module.exports = undefined in my bundle (according to https://github.com/webpack/webpack/issues/2030) – Liam Kernighan Aug 21 '19 at 12:35

score 3 · Answer 3 · answered Jul 15 '21 at 02:00

3

My warning only got fixed with:

module.exports =
{
    target: 'node',
    externals: {
        "express": "require('express')"
    }
}

answered Jul 15 '21 at 02:00

Kewyn Vieira

339
3
9

This will require node_modules being installed. – Townsheriff Oct 16 '21 at 19:47

Tofandel · Answer 4 · 2020-02-12T23:18:38.250

1

Instead of excluding all of the npm dependencies to be bundled with nodeExternals you can also exclude only express by natively requiring it by replacing

import express from 'express';
// Or
const express = require('express');

To

const express = __non_webpack_require__('express');

That will suppress the warning caused by express

edited Feb 12 '20 at 23:18

answered Feb 12 '20 at 21:28

Tofandel

3,006
1
29
48

Webpack and Express - Critical Dependencies Warning

4 Answers4

Linked

Related