概要

Webpackが特定のファイル形式を解析できない、または適切なローダーがない場合に発生するエラーです。

エラーメッセージ

``` Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ```

原因

ローダーの未設定: 対応するローダーがない
ローダーの設定ミス: test パターンが不正
ファイル拡張子の問題: 拡張子が認識されない
構文エラー: ファイル自体に問題

解決策

1. 必要なローダーをインストール

```bash

CSS

npm install -D css-loader style-loader

画像・フォント

npm install -D file-loader url-loader

TypeScript

npm install -D ts-loader

Babel

npm install -D babel-loader @babel/core @babel/preset-env ```

2. webpack.config.js を設定

```javascript module.exports = { module: { rules: [ { test: /.css$/, use: [‘style-loader’, ‘css-loader’] }, { test: /.(png|jpg|gif|svg)$/, type: ‘asset/resource’ }, { test: /.tsx?$/, use: ’ts-loader’, exclude: /node_modules/ }, { test: /.jsx?$/, exclude: /node_modules/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’, ‘@babel/preset-react’] } } } ] } }; ```

3. node_modules内のファイルを処理

```javascript { test: /.m?js$/, include: /node_modules/some-esm-package/, use: { loader: ‘babel-loader’, options: { presets: [’@babel/preset-env’] } } } ```

4. 拡張子を解決に追加

```javascript module.exports = { resolve: { extensions: [’.js’, ‘.jsx’, ‘.ts’, ‘.tsx’, ‘.json’] } }; ```

よくある間違い

loader の順序を間違える（右から左に実行）
exclude に必要なモジュールが含まれる
asset modules と file-loader の混在

Webpack: Module parse failed

概要