Don't support config in a ts type webpack config file?

[HduSy]

Describe the bug

when i config the plugin in my "webpak.dev.ts" file, terminal report this error:
[webpack-cli] Failed to load '/xxx/svg-chunk-webpack-plugin/example/webpack.config.ts' config [webpack-cli] TypeError: Unknown file extension ".ts" for /xxx/svg-chunk-webpack-plugin/example/webpack.config.ts at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9) at defaultGetFormat (node:internal/modules/esm/get_format:203:36) at defaultLoad (node:internal/modules/esm/load:143:22) at async ModuleLoader.load (node:internal/modules/esm/loader:403:7) at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45) at async link (node:internal/modules/esm/module_job:78:21) { code: 'ERR_UNKNOWN_FILE_EXTENSION' }

Steps to reproduce

try edit this project's example, will reproduce

Expected behavior

support config it in a ts type webpack config file

Screenshots and recordings

No response

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 186.59 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.14.3 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.5

Severity

Annoyance

[mariusGundersen]

It seems like webpack.config.ts can't import esm files, only cjs files. So there needs to be some transpiled files that use the old fashioned module.exports = syntax.

[mariusGundersen]

This might be the simplest way to make it export both esm and cjs: https://thesametech.com/how-to-build-typescript-project/

[mariusGundersen]

After trying to make it work I have given up and found a workaround:

• in tsconfig.json you need to make sure you have "module": "NodeNext" and "moduleResolution": "NodeNext", probably inside the "ts-node" section.
• Then you do const SvgChunkWebpackPlugin = await import('svg-chunk-webpack-plugin'); inside the default exported function.

In other words, this doesn't need to be fixed here

[yoriiis]

Thanks @mariusGundersen for the investigations!

Even though I haven't managed to get a configuration with ESM and TS running locally, it's not a subject related to this project. There are several issues on this subject:

• ESM in webpack.config.ts isn't supported if ts-node outputs ESM webpack/webpack-cli#2458
• TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts webpack/webpack-cli#2916

I'm going to close this issue as there is no link with the plugin imo. Thanks.