突然のエラー

/workspaces/project/node_modules/htmlparser2/lib/esm/index.js 48:9
Module parse failed: Unexpected token (48:9)
You may need an appropriate loader to handle this file type.
|  * They should probably be removed eventually.
|  */
> export * as ElementType from "domelementtype";
| import { getFeed } from "domutils";
| export { getFeed } from "domutils";

> Build error occurred
Error: > Build failed because of webpack errors
    at Object.build [as default] (/workspaces/project/apps/app1/node_modules/next/dist/build/index.js:192:15)
error Command failed with exit code 1.

開発していたアプリをビルドしようとしたらエラーが発生。

特にライブラリをアップデートした覚えもないし、なぜ。

前提

• Next.js: @8.1.0

を用いたプロジェクトで、babel を用いてトランスパイルしているプロジェクトの対処方法です。

原因

https://github.com/fb55/htmlparser2/issues/1237#issuecomment-1182522861

webpack4 が

export * as ns from 'mod';

この記法に対応していないのが原因らしい。

対処法

Next.js の config ファイルで babel のプラグインを挟んであげましょう

{
  test: /\.js?$/,
  use: [{
     loader: "babel-loader",
      options: {
        plugins: ["@babel/plugin-transform-export-namespace-from"]
      }
  },]
},

エラーの詳細

原因となるライブラリ

今回の原因となるライブラリは、html-to-reactとhtmlparser2というライブラリです。

html-to-reactというライブラリの依存関係にhtmlparser2が含まれています。

エラーの原因

htmlparser2というライブラリは 7 系から 8 系になるときにesmとcjsの両方に対応しています。そしてその中には

export * as ns from 'mod';

こういうようなコードが含まれていました。

しかし、webpack4ではこの構文はまだサポートされていないので、エラーが出たわけです。 もちろん、webpack4を使っている状態でhtmlparser2を7系から8系にアップデートすると上のようなエラーが出ます。ただ、そんなに何も考えずにライブラリをメジャーアップデートするか？って話で、実際今回はライブラリのメジャーアップデートはしていませんでした。

なら何が原因かというと、html-to-reactというライブラリの1.4系から1.5系へのマイナーアップデートにhtmlparser2の7系から8系へのメジャーアップデートが含まれていることです。

html-to-reactの 1.4 系のpackage.json

https://github.com/aknuds1/html-to-react/blob/v1.4.7/package.json

これと

html-to-reactの 1.5 系のpackage.json

https://github.com/aknuds1/html-to-react/blob/v1.5.1/package.json

これを見比べて貰えばわかるかと思います。

要するに、react-to-htmlのマイナーアップデートにhtmlparser2のメジャーアップデートが含まれてしまっている状態で、結果的にマイナーアップデートに破壊的な変更が加わってしまったということです。これが原因。

これってライブラリとしてあんまよくないのでは？とは思うけど、まぁ解決したので許します。

最後に

エラーの原因がわかってスッキリ

では

Bye