@rspack/dev-middleware defalut export will cause node esm envirment crash.

[underfin]

System Info

Details

The middleware use default to export value, but when the import file is .mjs, the export value is object which has default value.

// a.mjs

import rspackDevMiddleware from '@rspack/dev-middleware'

rspackDevMiddleware()// hasn't default

Reproduce link

No response

Reproduce Steps

[hardfist]

we should use module.exports = rspackDevMiddleware so it could be used in commonjs and esm the same way like webpack-hot-middleware

[hardfist]

we should use module.exports = rspackDevMiddleware so it could be used in commonjs and esm the same way like webpack-hot-middleware

we can't export more types or variables if we use module.exports= rspackDevMiddleware, which seems not extensible in the future and now(https://github.com/web-infra-dev/rspack/blob/main/packages/rspack-dev-middleware/src/middleware.ts#L16), but if we choose use module.exports = { rspackDevMiddleware} which is not consistent with webpack-dev-middleware.
also related to #2851
@alexander-akait any suggestions?

[alexander-akait]

Hm, can you use this?

function getRspackMemoryAssets(...args) {
  // Code
}

getRspackMemoryAssets.something = 1;

export default getRspackMemoryAssets;

[hardfist]

Hm, can you use this?

function getRspackMemoryAssets(...args) {
  // Code
}

getRspackMemoryAssets.something = 1;

export default getRspackMemoryAssets;

this will work for variable but not for tyoe

[alexander-akait]

But for types you can use export type { MyType } (i.e. named export).

I don't understand the problem a bit, maybe I'm missing something?

[hardfist]

currently we use export default rdm which will cause import rdm from '@rspack/dev-middleware failed in .mjs, because export default rdm is transpiled to

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = rdm;

but since nodejs doesn't recognize __esModule.

import rdm from '@rspack/dev-middleware' // rdm is { default: rdm} which is very weird

so we have two choices here

• use module.exports

module.exports = rdm

then import rdm from '@rspack/dev-middleware' works fine, but we can't expose more type and variable any more

• use named exports

export { rdm } 

which works perfectly on mjs but not consistent with webpack-dev-middleware

import { rdm } from '@rspack/dev-middleware' // rdm is rdm which is perfect

[alexander-akait]

@hardfist I see, but

then import rdm from '@rspack/dev-middleware' works fine, but we can't expose more type and variable any more

What do you want to export here and why export type {} does not satisfy for types and rdm.something = 1 for export variables and extra functions, it is a common pattern for CommonJS

[hardfist]

What do you want to export here and why export type {} does not satisfy for types and rdm.something = 1 for export variables and extra functions, it is a common pattern for CommonJS

yes rdm.xxx = 1 works for variable, but how do we expose type which is not bound to variable, for example we have type called type RdmMiddlelWare = { name: 'xxx', apply(){} } how do we expose it?

[alexander-akait]

@hardfist What about this:

function rdm() {}

namespace rdm {
  export type RdmMiddlelWare = {
    name: "xxx";
  };
}

export = rdm;

[alexander-akait]

That is old CommonJs approach to do it 😄

[hardfist]

That is old CommonJs approach to do it 😄

this is too hacky for me 😭, I'm gonna choose the simplest way 😁

[hardfist]

@hardfist What about this:

function rdm() {}

namespace rdm {
  export type RdmMiddlelWare = {
    name: "xxx";
  };
}

export = rdm;

even it's kind of hacky, I buy into this way now 🤣

[alexander-akait]

It is not hacky, it is official way for CommonJS 😄 One day we will migrate on ESM