Webpack configuration written in TypeScript throws error about import

Question

I've recently tried to migrate my Webpack configuration written in JavaScript to TypeScript. Unfortunately I struggle a lot with this. I have written a minimal configuration file for webpack to start with, so some parts are missing. My webpack.config.ts looks like this:

import webpack from "webpack";

const config: webpack.Configuration = {
    entry: {
        bookmarklet: 'bookmarklet.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

export default config;

I've a tsconfig.json which contains:

{
    "compilerOptions": {
        "module": "ESNext",
        "target": "ES6",
        "lib": ["ES6", "dom"],
        "strict": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "moduleResolution": "Node",
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false
    }
}

The package.json contains:

{
  "name": "bookmarklets",
  "version": "0.0.1",
  "description": "A collection of bookmarklets",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.ts"
  },
  "devDependencies": {
    "@types/node": "^14.10.0",
    "@types/webpack": "^4.41.22",
    "bookmarklet-wrapper-webpack-plugin": "^1.0.1",
    "ts-node": "^9.0.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Upon yarn build the following error is thrown:

yarn run v1.22.5
$ webpack --config webpack.config.ts
/home/codespace/workspace/zli-bookmarklets/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import webpack from "webpack";
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:88:7)
    at NativeCompileCache._moduleCompile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:242:18)
    at Module._compile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/home/codespace/workspace/zli-bookmarklets/node_modules/yargs/yargs.js:576:18)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How do I encapsulate my configuration within a module? What is the reason for the error?

Update

I've also tried the following tsconfig.json as suggested here:

{
    "compilerOptions": {
        "module": "CommonJS",
        "target": "ES5",
        "esModuleInterop": true,
    }
}

Unfortunately the same error occurs.

Wolframite

I don’t think webpack cli accepts the configuration file as ts file. You have either build your configuration file first or use ts node to run webpack directly – Freese

@Freese Thank you for answering. https://mcmap.net/q/240374/-is-it-possible-to-write-webpack-config-in-typescript suggests that it's possible. – Wolframite

Hmm. I didn’t know that. If so try to switch module as commonjs, it should work then – Freese

It also has a document for that as well webpack.js.org/configuration/configuration-languages – Freese

@Freese Unfortunately this didn't help :( – Wolframite

In your edit, you are supposed to create a new file tsconfig-for-webpack-config.json, also change the build command – Furculum

@AkashDathan Well that's another solution in case you don't want to change your main tsconfig.json. This is also stated by the linked documentation. – Wolframite

I have a demo repo which has the same setup github.com/tmhao2005/vue-webpack-demo but it works fine though. I suggest to install your deps again then run again. – Freese

Answer 1

i've solved with

{
    "compilerOptions": {...},
    "ts-node": {
        "compilerOptions": {
        "module": "CommonJS"
     }
  }
}

Woodnote