index.js импортирует модуль с WebPack

Question

Мой код организован следующим образом:

где

Ресурсы/ActionLog/Компоненты/Layout.js

import React from 'react'; 

export default class Layout extends React.Component { 
    render() { 
     return (
      <p>Test</p> 
     ); 
    } 
} 

Ресурсы/ActionLog/Components/index.js

export * from './Layout'; 

Ресурсы/ActionLog/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import Layout from './Components'; // <--- ISSUE HERE. 

const app = document.getElementById('app'); 
ReactDOM.render(
    <Layout/>, 
    app 
); 

Почему Layout не импортируются с помощью этой установки ??

Если я изменить строку читать,

import Layout from './Components/Layout';

он работает отлично, но в остальном Layout всегда не определено! Даже когда, если я попробую,

import Layout from './Components/index';

Я использую Webpack как мой модуль Bundler и достигли что-то подобное раньше, я просто не понимаю, почему/как это отличается ..

Answer 1

Почему макет не импортируется с помощью этой настройки?

Layout.js имеет по умолчанию экспортировать. Однако export * from './Layout.js будет экспортировать только с указанием экспорта (которых их нет). Другими словами, Components/Layout.js не имеет никакого экспорта, поэтому ничего нельзя импортировать.

Но даже если бы он назвал экспорт, import Layout from './Components/index'; импортирует по умолчанию экспорта, но Components/index.js не имеет экспорта по умолчанию.

---

Существует несколько способов решения этой проблемы. Вероятно, наиболее вероятно, чтобы экспортировать экспорт по умолчанию Layout.js с именем export в Components/index.js. По-видимому, у вас будет несколько файлов, каждый из которых экспортирует компонент. Я предполагаю, что Components/index.js должен экспортировать карту всех этих компонентов, и в этом случае вы должны использовать именованный экспорт.

Изменения, которые вы должны сделать:

// in Components/index.js 
export {default as Layout} from './Layout'; 


// in ActionLog/index.js 
import {Layout} from './Components'; // use a named import