質問: await import(path) のところで ERR_UNSUPPORTED_DIR_IMPORT がでる がうまくいったので、これを改良する形で、色々試していました。上記は `dynamic import`を使っているので、`package.json` に `"type": "module"` を書かないといけません。 ちなみに書かなかった場合のエラーは下記で、`dynamic import`ではない普通のimport(?)のところでエラーです。 ``` import { promises as fs } from "fs"; ^^^^^^ SyntaxError: Cannot use import statement outside a module ``` 一方で、 を使っています。 こちらを`JITモード`で起動したところ下記のエラーとなりました。 ``` > TAILWIND_MODE=watch postcss css/tailwind-origin.css -o css/tailwind-dist.css -w Error [ERR_REQUIRE_ESM]: require() of ES Module /src/preact-ssg/postcss.config.js from /src/preact-ssg/node_modules/lilconfig/dist/index.js not supported. postcss.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename postcss.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /src/preact-ssg/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). at Object.search (/src/preact-ssg/node_modules/lilconfig/dist/index.js:126:37) at async Promise.all (index 0) { code: 'ERR_REQUIRE_ESM' } ``` なるほど。わかりました。ということで(といってもこの質問に自己回答したときに書いたとおりモジュール周りが複雑すぎてあまりわかっていません)、`postcss.config.js`を`postcss.config.js.cjs` にリネームし、`tailwind.config.js`を`tailwind.config.mjs`にし、中身を`dynamic import` の書き方に変えました。 そうすると無事に`JITモード`が動いたのですが > > You will lose out on Tailwind CSS IntelliSense though, and it's also worth mentioning postcss-cli doesn't support ESM so you'd have to write your own replacement for it for instance. > > > とあるように、ファイル名をリネームすると、VSCodeのプラグインである`Tailwind CSS IntelliSense`が**効かなくなってしまいました**。これは tailwind を補完してくれるもので、これが使えないのはとても痛いです。 ということで、状況に応じて `"type": "module"` の行を消したり足したりしているのですが、とても面倒です。 おそらく `webpack` を使うとこのような状況に対応できるのではないかと推測しているのですが、`webpack`についてほとんど理解しておらず、こういう場面を解決できるのかわかっていません。もしくは`webpack`を使わずにもっと簡単に切り替えたりできるものなのでしょうか? `tailwind`関係の操作をするときは`"type": "module"` なし、 それ以外は`"type": "module"` あり をしたいです。どのようにすればよいでしょうか? 蛇足かもしれないですが`webpack`については下記2本の動画をみたくらいのレベルです。(半分くらいしか理解できていませんし、今回の場合どのように応用すればいいのかわかっていません) * Creating and Understanding a Basic Webpack 5 Setup - YouTube * 現代フロントエンドに欠かせないwebpackとBabelを理解しよう! (**sakito**) - builderscon tokyo 2019 - YouTube
回答: Node.js における ES Modules を理解する - 30歳からのプログラミング や Node.js v12のES Modulesと、Babel/TypeScriptの対応について - Qiita を見てみました。 やはり、モジュール周りのルールが多すぎな気がするのですが、色々試した結果、最終的に * `package.json` に `"type": "module"` は書かない * 必要なファイルのみ拡張子を `.js` から `.mjs` へ変更(tailwindに関係しないファイルが対象) * nodeコマンドのオプションに `--es-module-specifier-resolution=node` を付与 で動きました。