JavaScript export default されたものを as で import したい

export default Foo されたモジュールを as を使って import したいときのメモ

export default されたオブジェクト名を指定するとエラーになる

export の場合は問題ないが、export default の場合はエラーになる

🙆 export

// components/Cunter.js

export function Counter() { … }

// index.js

import { Counter as App } from './components/Counter';

👌 ｵｹｵｹｵｯｹｰ

🙅 export default

// components/Cunter.js

export default function Counter() { … }

// index.js

import { Counter as App } from './components/Counter';

=> Attempted import error: 'Counter' is not exported from './components/Counter' (imported as 'App') 😇

export default されている場合は default を使う

// components/Cunter.js

export default function Counter() { … }

// index.js

import { default as App } from './components/Counter';

👍👍👍

所感

import Foo from './foo' は import { default as Foo } from './foo' の省略形みたいなイメージで良いのだろうか？

---

[参考]

• import - JavaScript | MDN
• export defaultは import { default }で受け取れる - Qiita

Node.js + Express入門 - JavaScriptとコマンドラインがちょっとわかる人がNode.jsを使うサーバーサイド開発に入門するための本

ベルリンは晴れているか (単行本)

「ベルリンは晴れてるか」この季節に読みたい本です