82226


[await import(path) のところで ERR_UNSUPPORTED_DIR_IMPORT
がでる](https://ja.stackoverflow.com/questions/82194/await-
importpath-%e3%81%ae%e3%81%a8%e3%81%93%e3%82%8d%e3%81%a7-err-unsupported-dir-
import-%e3%81%8c%e3%81%a7%e3%82%8b)

がうまくいったので、これを改良する形で、色々試していました。上記は `dynamic import`を使っているので、`package.json` に

`"type": "module"`

を書かないといけません。

ちなみに書かなかった場合のエラーは下記で、`dynamic import`ではない普通のimport（？）のところでエラーです。

[code]

    import { promises as fs } from "fs";
    ^^^^^^
    
    SyntaxError: Cannot use import statement outside a module
    
[/code]

一方で、  
<https://tailwindcss.com/>  
を使っています。

こちらを`JITモード`で起動したところ下記のエラーとなりました。

[code]

    > 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'
    }
    
[/code]

なるほど。わかりました。ということで（といっても[この質問に自己回答](https://ja.stackoverflow.com/a/82217/9008)したときに書いたとおりモジュール周りが複雑すぎてあまりわかっていません）、`postcss.config.js`を`postcss.config.js.cjs`
にリネームし、`tailwind.config.js`を`tailwind.config.mjs`にし、中身を`dynamic import`
の書き方に変えました。

そうすると無事に`JITモード`が動いたのですが

<https://github.com/tailwindlabs/tailwindcss/discussions/2284>

> 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](https://www.youtube.com/watch?v=X1nxTjVDYdQ)
  * [現代フロントエンドに欠かせないwebpackとBabelを理解しよう！ ( **sakito** ) - builderscon tokyo 2019 - YouTube](https://www.youtube.com/watch?v=gWzf-BEhTWk)


CC BY-SA 4.0
2021-09-03T14:53:09.973
82219
2021-09-04T01:49:16.213
2021-09-03T15:30:04.903
9008
9008
question
javascript node.js tailwindcss
プロジェクトの中に "type": "module" を書く必要があるものと書いてはいけないものがある


[Node.js における ES Modules を理解する -
30歳からのプログラミング](https://numb86-tech.hatenablog.com/entry/2020/08/07/091142)  
や  
[Node.js v12のES Modulesと、Babel/TypeScriptの対応について -
Qiita](https://qiita.com/shimataro999/items/8a63ec06f33ccd2ea9ca)

を見てみました。

やはり、モジュール周りのルールが多すぎな気がするのですが、色々試した結果、最終的に

  * `package.json` に `"type": "module"` は書かない
  * 必要なファイルのみ拡張子を `.js` から `.mjs` へ変更（tailwindに関係しないファイルが対象）
  * nodeコマンドのオプションに `--es-module-specifier-resolution=node` を付与

で動きました。


CC BY-SA 4.0
2021-09-04T01:41:35.987
82226
2021-09-04T01:49:16.213
2021-09-04T01:49:16.213
9008
9008
82219
answer