ReactComponent doesn't work in react scaffolding with laravel

Question

So I have this code

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

That's my index.js if you will. I was trying to make react and laravel work together for the past two weeks and all the error I got was this very vague React.createElement: type is invalid which I simply couldn't trace (maybe there was something I missed in the error code I don't know).

So I traced it down from laravel -> react -> react-router -> react-bootstrap -> components -> assets and I realized that my assets were not loading hence the entire application won't load. I dug deeper and found that ReactComponent was responsible. I'll attach the error code that I get below. If I import like this:

import logo from './assets/logo.svg';

const Logoish = <img src={logo} alt="Logo" />

It works. But not in the above code:

import { ReactComponent as Logo } from './assets/logo.svg';

const Logoish = () => <Logo />

Here is the error message:

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

Referring to this StackOverflow thread I guess it has something to do with webpack and require.