ASP.NET Core Webpack Middleware Can Break with a Webpack 2 Build Pipeline #1413

New Issue

fergalmoran · 2025-08-09T17:20:03Z

fergalmoran commented

2025-08-09 17:20:03 +00:00

Originally created by @thoughtentity on 8/27/2016

ASP.NET Core Webpack Middleware Can Break with Webpack 2 Build Pipeline

Problem

When the ASP.NET Core Webpack middleware attempts to build a Webpack 2 build pipeline that uses the extract-text-webpack-plugin the Webpack build will fail with the error message:

extractedChunk.isInitial is not a function

The extract-text-webpack-plugin is commonly used when configuring Webpack to bundle arbitrary text inputs such css stylesheets. For example, the config-css Webpack config preset from @easy-webpack brings in this plugin when it applies it's config transform. This is also happens to be how I encountered the issue myself.

Reproduction

The following minimum package.json and webpack.config.js files will cause the issue in the ASP.NET Core Webpack middleware when bundling main.js and site.css. The Webpack config file expects a main.js file in /Client/scripts and a site.css file in /Client/styles. Webpack will emit app.bundle.js and styles.css in /wwwroot/dist. The files will need to be referenced in the view files of an ASP.NET Core app bootstraped with the ASP.NET Core Webpack middleware.

package.json

{
    "name": "project.web",
    "version": "0.5.0",
    "main": "wwwroot/dist/main.js",
    "devDependencis": {
        "@easy-webpack/core": "^1.3.2",
        "@easy-webpack/config-css": "^2.4.0",
        "aspnet-webpack": "~1.0.9",
        "webpack": ">=2.1.0-beta.21 || ^2.1.0"
    }
}

webpack.config.json

'use strict';

const path = require('path');

const webpack = require('webpack');
const easyWebpack = require('@easy-webpack/core');
const generateConfg = easyWebpack.generateConfig;

// base settings
const rootDir = path.resolve();
const scriptsDir = `${rootDir}/Client/scripts`;
const stylesDir = `${rootDir}/Client/styles`;
const outputDir = `${rootDir}/wwwroot/dist`;

const baseConfig = {
    entry: {
        app: [`${scriptsDir}/main.js`]
    },
    output: {
        path: `${outputDir}`,
        publicPath: '/dist'
    }
}

// generate final webpack config
config = generateConfig({
    baseConfig,
    require('@easy-webpack/config-css')({
        filename: 'styles.css',
        allChunks: true,
        soureMap: false
    })
});

module.exports = config;

main.js

import '../styles/site.css';

site.css

.title {
    color: cornflowerblue
}

Root Cause

The issue occurs due to incompatibilities introduced between Webpack 1 and Webpack 2. Because the aspnet-webpack npm package introduces a hard dev dependency on Webpack 1 in its package.json file, node will give the aspnet-webpack module an isolated copy of Webpack 1 at runtime. When the ASP.NET Core Webpack middleware then attempts to run a Webpack 2 build pipleine the webpack-dev-middleware in aspnet-webpack will fail due to it using the Webpack 1 dependency to build a Webpack 2 build pipeline and the issue will occur. The Webpack 1 and Webpack 2 incompatibility issues are discussed in the extract-text-webpack-plugin repo and the main webpack repo.

Proposed Resolution

To resolve this issue on the ASP.NET Core side, the aspnet-webpack npm package should specify its webpack dependency as a peer dependency rather than as a dev dependency. This will make the dependency soft and allow the webpack-dev-middleware to pickup the version of Webpack actually being used by the user further up the node dependency chain.

*Originally created by @thoughtentity on 8/27/2016* ## ASP.NET Core Webpack Middleware Can Break with Webpack 2 Build Pipeline ### Problem When the ASP.NET Core Webpack middleware attempts to build a Webpack 2 build pipeline that uses the `extract-text-webpack-plugin` the Webpack build will fail with the error message: > `extractedChunk.isInitial is not a function` The `extract-text-webpack-plugin` is commonly used when configuring Webpack to bundle arbitrary text inputs such css stylesheets. For example, the [config-css](https://github.com/easy-webpack/config-css) Webpack config preset from @easy-webpack brings in this plugin when it applies it's config transform. This is also happens to be how I encountered the issue myself. #### Reproduction The following minimum `package.json` and `webpack.config.js` files will cause the issue in the ASP.NET Core Webpack middleware when bundling `main.js` and `site.css`. The Webpack config file expects a `main.js` file in `/Client/scripts` and a `site.css` file in `/Client/styles`. Webpack will emit `app.bundle.js` and `styles.css` in `/wwwroot/dist`. The files will need to be referenced in the view files of an ASP.NET Core app bootstraped with the ASP.NET Core Webpack middleware. > package.json ``` json { "name": "project.web", "version": "0.5.0", "main": "wwwroot/dist/main.js", "devDependencis": { "@easy-webpack/core": "^1.3.2", "@easy-webpack/config-css": "^2.4.0", "aspnet-webpack": "~1.0.9", "webpack": ">=2.1.0-beta.21 || ^2.1.0" } } ``` > webpack.config.json ``` js 'use strict'; const path = require('path'); const webpack = require('webpack'); const easyWebpack = require('@easy-webpack/core'); const generateConfg = easyWebpack.generateConfig; // base settings const rootDir = path.resolve(); const scriptsDir = `${rootDir}/Client/scripts`; const stylesDir = `${rootDir}/Client/styles`; const outputDir = `${rootDir}/wwwroot/dist`; const baseConfig = { entry: { app: [`${scriptsDir}/main.js`] }, output: { path: `${outputDir}`, publicPath: '/dist' } } // generate final webpack config config = generateConfig({ baseConfig, require('@easy-webpack/config-css')({ filename: 'styles.css', allChunks: true, soureMap: false }) }); module.exports = config; ``` > main.js ``` js import '../styles/site.css'; ``` > site.css ``` css .title { color: cornflowerblue } ``` ### Root Cause The issue occurs due to incompatibilities introduced between Webpack 1 and Webpack 2. Because the `aspnet-webpack` npm package introduces a hard dev dependency on Webpack 1 in its `package.json` file, node will give the `aspnet-webpack` module an isolated copy of Webpack 1 at runtime. When the ASP.NET Core Webpack middleware then attempts to run a Webpack 2 build pipleine the `webpack-dev-middleware` in `aspnet-webpack` will fail due to it using the Webpack 1 dependency to build a Webpack 2 build pipeline and the issue will occur. The Webpack 1 and Webpack 2 incompatibility issues are discussed in the [extract-text-webpack-plugin repo](https://github.com/webpack/extract-text-webpack-plugin/issues/214) and the main [webpack repo](https://github.com/webpack/webpack/issues/2764#issuecomment-232371501). ### Proposed Resolution To resolve this issue on the ASP.NET Core side, the `aspnet-webpack` npm package should specify its webpack dependency as a [peer dependency](https://docs.npmjs.com/files/package.json#peerdependencies) rather than as a dev dependency. This will make the dependency soft and allow the `webpack-dev-middleware` to pickup the version of Webpack actually being used by the user further up the node dependency chain.

fergalmoran closed this issue

2025-08-09 17:20:03 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1413