reactjs - ReactComponent 在使用 laravel 的反应脚手架中不起作用

Question

所以我有这个代码

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();

如果你愿意，那是我的 index.js。在过去的两周里，我试图让 react 和 laravel 一起工作，我得到的所有错误都是非常模糊React.createElement: type is invalid的，我根本无法追踪（也许我在错误代码中遗漏了一些我不知道的东西）。

所以我从 laravel -> react -> react-router -> react-bootstrap -> components -> assets 追踪它，我意识到我的资产没有加载，因此整个应用程序都不会加载。我挖得更深，发现这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 和 require 有关。

标签： reactjslaravelwebpackreact-component