Итак, у меня есть этот код
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App/index.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import { ReactComponent as Logo } from './assets/logo.svg';
const Logoish = () => <Logo />
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Logoish />, document.getElementById('app'));
serviceWorker.unregister();
Это мой индекс. js, если хотите. Я пытался отреагировать, и laravel работали вместе в течение последних двух недель, и все ошибки, которые я получил, были очень расплывчатыми React.createElement: type is invalid
, которые я просто не мог отследить (возможно, было что-то, что я пропустил в коде ошибки, который я надеваю не знаю).
Итак, я отследил его от laravel -> реагировать -> реагировать на маршрутизатор -> реагировать - bootstrap -> компоненты -> активы, и я понял, что мои активы не загружаются следовательно, все приложение не будет загружено. Я копнул глубже и обнаружил, что ReactComponent
несет ответственность. Я прикреплю код ошибки, который я получу ниже. Если я импортирую так:
import logo from './assets/logo.svg';
const Logoish = <img src={logo} alt="Logo" />
Это работает. Но не в приведенном выше коде:
import { ReactComponent as Logo } from './assets/logo.svg';
const Logoish = () => <Logo />
Вот сообщение об ошибке:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Logoish`.
in Logoish app.js:91655:32
warningWithoutStack http://localhost:8080/js/app.js:91655
warning http://localhost:8080/js/app.js:92126
createElementWithValidation http://localhost:8080/js/app.js:93523
Logoish http://localhost:8080/js/app.js:96841
renderWithHooks http://localhost:8080/js/app.js:74007
mountIndeterminateComponent http://localhost:8080/js/app.js:76541
beginWork$1 http://localhost:8080/js/app.js:77909
beginWork$$1 http://localhost:8080/js/app.js:83503
performUnitOfWork http://localhost:8080/js/app.js:82442
workLoopSync http://localhost:8080/js/app.js:82418
performSyncWorkOnRoot http://localhost:8080/js/app.js:82017
scheduleUpdateOnFiber http://localhost:8080/js/app.js:81445
updateContainer http://localhost:8080/js/app.js:84850
legacyRenderSubtreeIntoContainer http://localhost:8080/js/app.js:85275
unbatchedUpdates http://localhost:8080/js/app.js:82180
legacyRenderSubtreeIntoContainer http://localhost:8080/js/app.js:85274
render http://localhost:8080/js/app.js:85355
js http://localhost:8080/js/app.js:96845
__webpack_require__ http://localhost:8080/js/app.js:20
js http://localhost:8080/js/app.js:96763
__webpack_require__ http://localhost:8080/js/app.js:20
0 http://localhost:8080/js/app.js:98534
__webpack_require__ http://localhost:8080/js/app.js:20
<anonymous> http://localhost:8080/js/app.js:84
<anonymous> http://localhost:8080/js/app.js:87
Ссылаясь на этот поток StackOverflow Я думаю, это как-то связано с Webpack и требуют.