Building es6 module in typescript project with webpack

Question

I am trying to use imagemin node package in my project. It is a es6 module and I am getting error while using it.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module. with "type" as "module" in package.json

ReferenceError: require is not defined with "type" as "commonjs" in package.json

My webpack config:

export default env => {
    return {
        mode: env.production ? 'production' : 'development',
        entry: {
            main: './src/main.ts',
            worker: './src/worker.ts'
        },
        target: ['node', 'es2019'],
        devtool: env.production ? false : 'inline-source-map',
        watch: !env.production,
        resolve: {
            extensions: ['.ts', '.js'],
            alias: {
                src: _resolve(process.cwd(), './src')
            }
        },
        module: {
            rules: [{
                test: /\.ts$/,
                include: _resolve(process.cwd(), "src"),
                use: 'ts-loader',
                exclude: [/node_modules/, /\.spec\.ts/, /\.e2e-spec\.ts/]
            }],
        },
        externalsPresets: { node: true },
        externals: [nodeExternals()],
        output: {
            filename: '[name].js',
            path: OUTPUT_DIR,
            clean: !!env.production,
            devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]',
            library: {
                type: 'module'
            }
        },
        optimization: {
            minimize: false, //!!env.production
            mangleExports: true,
            minimizer: [new terserPlugin({
                terserOptions: {
                    output: {
                        comments: false
                    },
                    keep_classnames: true,
                },
                extractComments: false,
            })]
        },
        experiments: {
            outputModule: true
        }
    };
};

My tsconfig:

{
  "compilerOptions": {
    "module": "ES2020",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2019",
    "sourceMap": true,
    "strict": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "outDir": "../bin/server",
    "typeRoots": [
      "node_module/@types",
      "./typings"
    ],
    "types": [
      "node",
      "@types/jest"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

When I try to "import" imagemin in one of my .ts file, webpack convert it to "require". I have also tried using import() but it doesn't work either. I have made a repo on github

Is there a way to get es6 bundle (preferred) or use imagemin with commonjs bundle?

Answer 1

I couldn't found a way to bundle es6 format through webpack but i was able to use es6 module in commonjs system while bundling through webpack.

externals: [
           nodeExternals({
               allowlist: ['imagemin', 'imagemin-mozjpeg']
           }),
           async function ({ request }) {
               if (request === 'imagemin' || request === 'imagemin-mozjpeg')
                   return `import ${request}`;
           },
       ]

This is how i got imagemin to work.

Answer 2

Change your start script

   "start": "node --experimental-modules src/index.mjs "

and In package.json Add

{ 
   ...
   "type": "module",
   ...
}