かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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' の省略形みたいなイメージで良いのだろうか?


[参考]

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

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

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