tsconfig.jsonで特定のmoduleを指定した場合において、webpack-dev-serverの実行でエラーが発生する。

Question

tsconfig.jsonでmoduleを"CommonJS"以外、（例えばESNextとか）の値にした時に、webpack-dev-serverの実行でエラーが出ます。

// 現象
$ webpack-dev-server
/Users/xxxxxx/Workspace/example-frontside/webpack.config.ts:1
import path from 'path';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1116:16)
    at Module._compile (internal/modules/cjs/loader.js:1164:27)
 ：

webpackの設定ファイルをTypeScriptで記述しています。
Javascript（webpack.config.js）で同等のは正常に起動しました。

故に何か設定が足りないものと思っているのですが、Typescriptの方で
もし方法がありましたらあればご教授いただきたく。

よろしくお願いします。

※「cross-env TS_NODE_PROJECT="./tsconfig.json" webpack-dev-server」とかでもダメでした。

// ファイルの配置
┣ src
┃ ┗ index.ts
┣ tsconfig.json
┣ webpack.config.ts
┗ package.json

// package.json
 :
  "scripts": {
    "start:dev": "webpack-dev-server",
  }
 :
  // 関係ありそうなモジュールだけ記載。（@type/〜は省略）
  "devDependencies": {
    "ts-loader": "^7.0.5",
    "ts-node": "^8.10.1",
    "tsconfig-paths": "^3.9.0",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
:

// webpack.config.ts
import * as path from 'path';
import {
  Configuration as WebpackConfiguration
} from 'webpack';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
// import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; // こちらもNG

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const devServer: WebpackDevServerConfiguration = {
  contentBase: path.resolve(__dirname, 'public'),
  host: '0.0.0.0',
  port: 3000,
  disableHostCheck: true,
  historyApiFallback: true,
  compress: true,
  hotOnly: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
    }
  }
};

export default (_env: never, args: Configuration) => {
  const mode = args.mode || 'development';

  const config: Configuration = {
    mode,
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    devServer: (mode === 'development') ? devServer : undefined,

    entry: {
      main: './src'
    },

    output: {
      publicPath: '/',
      path: path.resolve(__dirname, './public/dist'),
      filename: '[name].js',
    },

    resolve: {
      alias: {
        '~': path.resolve('src'),
      },
      extensions: [
        '.js',
        '.json',
        '.ts',
      ],
      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
    },

    module: {
      rules: [
        {
          test: /.tsx?$/,
          loader: 'ts-loader',
          exclude: '/node_modules/',
        },
      ],
    },
  };
  return config;
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
      "~/*": [
        "src/*"
      ]
    },
    "types": [
      "@types/node"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Comments

[hoshi-takanori]

"module": "commonjs" じゃないと ts-node が動かないので、webpack 専用の tsconfig ファイル tsconfig-for-webpack-config.json ってのを作る必要があるようです。
https://webpack.js.org/configuration/configuration-languages/

Answer 1

webpack.config.tsを実行するために暗黙的にts-nodeが使われていて、
ts-nodeはcommonjs以外の形式をサポートしていないのでおっしゃるとおりmoduleをcommonjsにしないといけません。

ただ、そのせいでプロダクトコード(src/index.tsなど)のコンパイルにも影響を与えてしまうのを避けたい、本来はesnextなどでコンパイルしたい場合は、webpack.config.ts専用のtsconfig.json(例えば、module: commonjsとしたtsconfig-for-webpack.jsonを作る)を作成します。

そして、devserver立ち上げのスクリプトをcross-env TS_NODE_PROJECT=\"./tsconfig-for-webpack.json\" webpack-dev-serverのようにすると、webpack.config.tsファイル自体の実行はcommonjs形式で行われますが、プロダクトコードのコンパイルは別の形式で行うということが可能になると思いますので、ぜひお試しください。

参考:https://webpack.js.org/configuration/configuration-languages/

Comments

[tomomo]

できました。ヽ(´￢`)ﾉ♪
vue-router入れて遅延ローディングルートとか試してみましたができていたので、ソースの方はESNext版が適用されているものと思います。
TS_NODE_PROJECTのくだりはやったのだけど...なるほど。
これはパスが通ってないから必要なのではなく、CommonJS版のを指定する為に必要だったのだいうのを理解しました。
ありがとうございました。

Answer 2

当該の行をimport path from 'path';と書き換えれば問題は解決しますでしょうか。

Comments

[tomomo]

さっそくの回答、ありがとうございます。
エラーは変わりませんでした。

/Users/xxxx/Workspace/example-frontside/webpack.config.ts:1
import path from 'path';
^^^^^^

SyntaxError: Cannot use import statement outside a module

"webpack.config.ts"において、どうもImportやExportが使えない現象のようなのです。