How to export the configuration of `webpack.config.js` using pure ESM?

Question

I'm trying to convert into pure ESM the webpack.config.js

import path from 'path'
import {fileURLToPath} from 'url'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyPlugin from 'copy-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import webpack from 'webpack'

var main_config = {

}

var renderer_config =  {

}

var config = [
  main_config,
  renderer_config,
]

export config

I get this error:

yarn start
    yarn run v1.22.18
    $ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
    $ npx webpack --config ./webpack.config.js
    [webpack-cli] Failed to load '/home/raphy/NEW-Raphy-Template
/webpack.config.js' config
    [webpack-cli] SyntaxError: Unexpected token 'export'
        at ESMLoader.moduleStrategy (node:internal/modules
/esm/translators:117:18)
       at ESMLoader.moduleProvider (node:internal/modules/esm/loader:337:14)
        at async link (node:internal/modules/esm/module_job:70:21)

I tried also with

export renderer_config, main_config

and with

export renderer_config
export main_config

but still get error

Other info:

node: v16.15.0
O.S. : Ubuntu 20.04 Desktop
npm: v 8.5.5

Answer 1

You will need to export config as default with

export default config

You will also need to update your package.json to set

"type": "module"

or change the extension of the config to .mjs so that node understands this is as es module ( See: https://nodejs.org/api/packages.html#type )