82217


<https://github.com/ndesmic/react-ssg/tree/v0.1>  
を試しています。

[code]

    $ node renderers/htm-preact-renderer.js
    
[/code]

を試したところ下記のエラーです。

[code]

    node:internal/errors:464
        ErrorCaptureStackTrace(err);
        ^
    
    Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/src/react-ssg-0.1/templates/preact' is not supported resolving ES modules imported from /src/react-ssg-0.1/renderers/htm-preact-renderer.js
        at new NodeError (node:internal/errors:371:5)
        at finalizeResolution (node:internal/modules/esm/resolve:317:17)
        at moduleResolve (node:internal/modules/esm/resolve:756:10)
        at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
        at Loader.resolve (node:internal/modules/esm/loader:89:40)
        at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
        at Loader.import (node:internal/modules/esm/loader:177:28)
        at importModuleDynamically (node:internal/modules/esm/translators:115:35)
        at exports.importModuleDynamicallyCallback (node:internal/process/esm_loader:30:14)
        at file:///src/react-ssg-0.1/renderers/htm-preact-renderer.js:20:67 {
      code: 'ERR_UNSUPPORTED_DIR_IMPORT',
      url: 'file:///src/react-ssg-0.1/templates/preact'
    }
    
[/code]

エラー箇所は  
<https://github.com/ndesmic/react-ssg/blob/v0.1/renderers/htm-preact-
renderer.js#L19>  
で、単純にtemplatesフォルダの中身を読み込もうとしているだけだと思います。

  * <https://stackoverflow.com/questions/64449464/error-err-unsupported-dir-import-directory-import-when-attempting-to-start-no>
  * <https://stackoverflow.com/questions/64453859/directory-import-is-not-supported-resolving-es-modules-with-node-js>
  * <https://stackoverflow.com/questions/61291633/expressjs-is-return-error-err-module-not-found-if-i-import-the-file-without-j>

をみて

`--experimental-specifier-resolution=node` をつけてみましたが、同様のエラーです。

加えて

[Node.js 13.2.0 で--experimental-
modulesが外れたのでESMを試す](https://qiita.com/hagevvashi/items/8b4a7d3061bddd3b340e)  
や  
[.mjs とは何か、またはモジュールベース JS とエコシステムの今後 |
blog.jxck.io](https://blog.jxck.io/entries/2017-08-15/universal-mjs-
ecosystem.html)  
や  
<https://stackoverflow.com/a/37132668/1979953>

を見たのですが、歴史が長すぎて現在はどうなっているのかよくわかりません（このGitHubのコードの想定はどの段階のときなのかもわからない）。  
そもそもこのエラーで検索すると今回のエラー箇所の

[code]

    await import(path)
    
[/code]

のところではなく、ファイルの初めに書くモジュールの import文。例えば

[code]

    import { promises as fs } from "fs";
    
[/code]

のようなものばかりひっかかり、ほしい情報にたどりつけませんでした。


CC BY-SA 4.0
2021-09-03T01:01:06.670
82194
2021-09-03T12:01:23.287
2021-09-03T02:14:55.270
9008
9008
question
javascript node.js
await import(path) のところで　ERR_UNSUPPORTED_DIR_IMPORT　がでる
  
  
`--experimental-specifier-resolution=node`

ではなくて

`--es-module-specifier-resolution=node`

だったようです。

参考：  
<https://github.com/kentcdodds/native-esm-experiments>

全体では、下記のようにするとうまくいきました

[code]

    node --es-module-specifier-resolution=node renderers/htm-preact-renderer.js -t templates/preact/ -o output/preact/
    
[/code]

（`output/preact/`というフォルダがないという旨のエラーがでたので、このフォルダは先に作っておきました。）

ちなみに  
`await import(path)`  
の部分のimportは  
`dynamic import` と呼ばれているようです。

このワードで検索すると参考リンクを検索することができました。

よくみると、自分の質問に書いていたリンクの中の  
<https://stackoverflow.com/questions/61291633/expressjs-is-return-error-err-
module-not-found-if-i-import-the-file-without-j>  
は回答に

`--es-module-specifier-resolution=node`

がありました。

（ちょっと似たようなオプションと歴史が複雑すぎてよくわかってない状況は変わってないですが...）


CC BY-SA 4.0
2021-09-03T11:55:15.310
82217
2021-09-03T12:01:23.287
2021-09-03T12:01:23.287
9008
9008
82194
answer