ろぼいんブログ
更新：

Node.js v22でimport assertionsが廃止された件

Node.js v22でimport assertionsが廃止された件について、日本語の記事が見当たらなかったのでまとめてみました。

TL;DR

  • 今までJSONをimportする際には、import assertionsが使われていた
  • Node.js v22でimport assertionsが廃止された
  • 既存のコードはimport attributesに移行する必要がある
  • assertをwithに変更するだけで対応できる

はじめに

手元の環境をNode.js v21からv22にアップデートしたところ、このブログのプレビュー用のローカルサーバーが動作しなくなりました。そのときに表示されていたエラーメッセージは次のとおりです。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
Terminal window
$ npm run dev


> [email protected] dev
> astro dev


11:19:21 PM [vite] Error when evaluating SSR module C:\Users\<userName>\Documents\Robot-Inventor.github.io\astro.config.ts: failed to import "@robot-inventor/regex-syntax"
|- SyntaxError: Unexpected identifier 'assert'
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:166:18)
    at callTranslator (node:internal/modules/esm/loader:416:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:422:30)
    at async link (node:internal/modules/esm/module_job:88:21)


[astro] Unable to load your Astro config


Unexpected identifier 'assert'
  Stack trace:
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at callTranslator (node: internal/modules/esm/loader:416:14)
    at async link (node:internal/modules/esm/module_job:88:21)

このエラーメッセージを読むと、import assertions関連でエラーが出ていることが分かります。Windows Sandbox内で詳しく検証したところ、Node.js 21では問題なく動作する一方で、Node.js 22ではエラーが発生することが確認できました。

Node.js v22でimport assertionが廃止された

さらに詳しく調べていたところ、DenoのこちらのIssueにたどり着きました。

Node.js is planning to remove support for assert in v22 (which will be released in April) and Chrome in v126 (which will be released in May).

—— Warn code that uses import assertions · Issue #17944 · denoland/deno

どうやら、Node.js v22ではimport assertionsの廃止が計画されているとのことです。次に、Node.jsのドキュメントを確認したところ、次のような記述がありました。

Import attributes

|Version|Changes|
|:---|:---|
|v21.0.0, v20.10.0, v18.20.0|Switch from Import Assertions to Import Attributes.|
|v17.1.0, v16.14.0|Added in: v17.1.0, v16.14.0|

This feature was previously named "Import assertions", and using the assert keyword instead of with. Any uses in code of the prior assert keyword should be updated to use with instead.

—— Modules: ECMAScript modules | Node.js v22.0.0 Documentation

つまり、import assertionsは廃止され、import attributesに移行する必要があるということです。また、assertをwithに変更するだけで対応できるとのことです。

Node.jsのchangelogにも、import assertionが廃止されたことが記載されていました。 公式ブログのリリースノート には記載されていなかったので、完全に見逃していました。

Other Notable Changes

- [ 25c79f3331 ] - esm: drop support for import assertions (Nicolò Ribaudo) #52104

—— node/doc/changelogs/CHANGELOG_V22.md at main · nodejs/node

import attributesに移行する方法

Import assertionsからimport attributesに移行する方法は、簡単です。assertをwithに変更するだけで対応できます。なお、import attributesはNodejs v18.20.0から導入されているため、それ以前のバージョンでは動作しません。また、TypeScriptでのimport attributesのサポートは、 TypeScript v5.3から導入されている ため、それ以前のバージョンでは動作しないことに注意してください。

```diff lang="javascript" del="assert" ins="with"
-import packageJson from "../package.json" assert { type: "json" };
+import packageJson from "../package.json" with { type: "json" };
```

Cloudflare Pagesでの対応

Cloudflare PagesのデフォルトのNode.jsのバージョンは、記事執筆時点ではv18.17.1になっています。そのため、import attributesが使われているコードをCloudflare Pagesにデプロイしようとすると、Unexpected identifier 'with'というエラーが発生します。このエラーを防ぐには、Cloudflare Pagesで利用するNode.jsのバージョンを上げる必要があります。

Cloudflare PagesのNode.jsのバージョンを変更するには、Cloudflare Pagesプロジェクトの設定画面の［環境変数］タブで、NODE_VERSIONという環境変数を追加し、使用したいNode.jsのバージョンを指定します。たとえば、Node.js v22を使用する場合は、NODE_VERSIONに22を設定します。必要に応じて、22.0.0のように詳細なバージョンを指定することもできます。

まとめ

Node.js v22でimport assertionsが廃止されたため、import attributesに移行する必要があります。既存のコードはassertをwithに変更するだけで対応できます。Node.js v22にアップデートする際は、この点に注意してください。

参考

#JavaScript#TypeScript#Node.js#Cloudflare#Astro#Web開発#プログラミング#解説

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事