
今まであまりrequireとimportなどの違いを意識できていない人間。
Next.jsをプロジェクトに導入するのは賛成をとるが、個人のプロジェクトにはあまり使いたくないなーと思う程度の距離感を保っていた人間だった。現在無職。

しかし、新たな職場を探すにあたってReactは使うのにNext.jsを触ったことがないというのは自分の選択肢を狭めるだけだと考え、無職期間に作り直そうとしていたRuby(Jekyll)製ブログを、Next.jsのSSGの仕組みを用いて作ることにした。（本当はメジャーバージョンがリリースされたばかりのeleventy.jsを使って作りたかった。フレームワークに求めているもの的にもeleventyの方が合っていたと今も感じる。1週間ほどはeleventy.js製のブログだった時期もある。）

同リポジトリ内にマークダウンでブログ記事を上げるため、ビルド時に色々なものを生成したい要件が出てくる。Next.jsは内部でwebpackを使っていて`next.config.js`ではその一端を見ることができる。

```javascript
module.exports = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    if (isServer) {
      require('./scripts/generate-sitemap.js')
    }
  }
}
```

webpackはCommonJSで書かれていることは事前知識として知っていた。

とは言ってもimportやexportが使いたい。`package.json`に`"type": "module"`を追加する方法などを試してみるが、最終的にproduction buildの際のfsモジュールが解決できないとか`Import trace for requested module:
./pages/_app.js`などのエラーメッセージを残して終了していくプログラムを見るとイライラしてくる。

勉強のためとはいえ、今度からNode.jsではなくDenoを使おうかなという気持ちになった。



### 周辺用語
- commonJS
- ESModules
- ES6(ES2015)

### 参考文献
- [Build a sitemap generator in Next.js - LogRocket Blog](https://blog.logrocket.com/build-sitemap-generator-nextjs/)
- [Support ES module format (ESM) in next.config.js #9607](https://github.com/vercel/next.js/issues/9607)
- [Support ES module format (ESM) in next.config.js #32239](https://github.com/vercel/next.js/discussions/32239)

Next.jsがWebpackを使うから嫌いという話


駆け出しエンジニアのふわっとした理解を書く。
Node.jsのコアモジュールであるBuffer()をフロント側で使いたいときがあるらしい。[参考の該当箇所](https://github.com/CyberAgentHack/web-speed-hackathon-2021/blob/135468cc9f69f6f27ba0bc9d3b74d60f1ebe3a40/client/src/components/foundation/CoveredImage/CoveredImage.jsx#L21-L23)（パフォーマンスチューニングを行う元して書かれたソースコードなので、ベストプラクティス的ではないのかもしれないが、初心者の私には判断つきません）
```javascript
const imageSize = React.useMemo(() => {
  return data !== null ? sizeOf(Buffer.from(data)) : null;
}, [data]);
```


### 解決策
解決策(といっても、元々のソースコードに書かれていたが)、下に記載する設定がないとブラウザから怒られてしまいます。
```bash
CoveredImage.jsx:22 Uncaught ReferenceError: Buffer is not defined
```


`webpack.config.js` に以下のように追記する。
```javascript
plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
]
```



### 参考文献
- [https://github.com/diegomura/react-pdf/issues/1029](https://github.com/diegomura/react-pdf/issues/1029)
- [https://github.com/CyberAgentHack/web-speed-hackathon-2021](https://github.com/CyberAgentHack/web-speed-hackathon-2021)
- [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/)


ikmnjrd.github.io

webpackの投稿記事一覧