Webpack Dev Middleware Should Support export default #325

New Issue

fergalmoran · 2025-08-09T17:15:51Z

fergalmoran commented

2025-08-09 17:15:51 +00:00

Originally created by @RehanSaeed on 11/8/2017

I have extended one of your templates and added the following NPM scripts so that I can write my Webpack configuration using TypeScript which has a number of advantages:

"build:webpackconfig": "tsc --lib es6 webpack.config.vendor.ts && tsc --lib es6 webpack.config.ts",
"build": "npm run build:webpackconfig && webpack --config webpack.config.vendor.js && webpack",
"build:prod": "npm run build:webpackconfig && webpack --config webpack.config.vendor.js --env.prod && webpack --env.prod"

This totally works and Webpack is happy with my JavaScript file generated from TypeScript however the WebpackDevMiddleware fails to run with the error:

One or more errors occurred. (TypeError: Cannot read property 'publicPath' of undefined

My TypeScript looks like this:

import * as path from "path";
import * as webpack from "webpack";
import { IArguments, INewConfiguration, INewConfigurationBuilder } from "./webpack.common";

const configurationBuilder: INewConfigurationBuilder = 
  (env: IArguments): INewConfiguration => {
    const configuration: INewConfiguration = {
      // ...
    };
    return configuration;
  };
export default configurationBuilder;

This outputs the following JavaScript:

"use strict";
exports.__esModule = true;
var path = require("path");
var webpack = require("webpack");

var configurationBuilder = function (env) {
  var configuration = {
    // ...
  };
  return configuration;
};
exports["default"] = configurationBuilder;

The key difference is the last line of code. I've experimented with changing it and the WebpackDevMiddleware only works when it is module.exports = configurationBuilder;. To generate that line in TypeScript I have to use export = configurationBuilder; which is invalid TypeScript because the default tsconfig.json file has module set to es2015.

The key point is that Webpack supports exports["default"] = configurationBuilder;, so the WebpackDevMiddleware should too.

*Originally created by @RehanSaeed on 11/8/2017* I have extended one of your templates and added the following NPM scripts so that I can write my Webpack configuration using TypeScript which has a [number of advantages](https://stackoverflow.com/questions/40075269/is-it-possible-to-write-webpack-config-in-typescript): ``` "build:webpackconfig": "tsc --lib es6 webpack.config.vendor.ts && tsc --lib es6 webpack.config.ts", "build": "npm run build:webpackconfig && webpack --config webpack.config.vendor.js && webpack", "build:prod": "npm run build:webpackconfig && webpack --config webpack.config.vendor.js --env.prod && webpack --env.prod" ``` This totally works and Webpack is happy with my JavaScript file generated from TypeScript however the `WebpackDevMiddleware` fails to run with the error: > One or more errors occurred. (TypeError: Cannot read property 'publicPath' of undefined My TypeScript looks like this: ``` import * as path from "path"; import * as webpack from "webpack"; import { IArguments, INewConfiguration, INewConfigurationBuilder } from "./webpack.common"; const configurationBuilder: INewConfigurationBuilder = (env: IArguments): INewConfiguration => { const configuration: INewConfiguration = { // ... }; return configuration; }; export default configurationBuilder; ``` This outputs the following JavaScript: ``` "use strict"; exports.__esModule = true; var path = require("path"); var webpack = require("webpack"); var configurationBuilder = function (env) { var configuration = { // ... }; return configuration; }; exports["default"] = configurationBuilder; ``` The key difference is the last line of code. I've experimented with changing it and the `WebpackDevMiddleware` only works when it is `module.exports = configurationBuilder;`. To generate that line in TypeScript I have to use `export = configurationBuilder;` which is invalid TypeScript because the default `tsconfig.json` file has `module` set to `es2015`. The key point is that Webpack supports `exports["default"] = configurationBuilder;`, so the `WebpackDevMiddleware` should too.

fergalmoran closed this issue

2025-08-09 17:15:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#325