Dynamic import doesn't work with SVG imported as ReactComponents

[lazyd3v]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

SVG, ReactComponent, dynamic import

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 10.11.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 61.0.2
    Safari: 12.0
  npmPackages:
    react: ^16.5.2 => 16.5.2
    react-dom: ^16.5.2 => 16.5.2
    react-scripts: 2.0.3 => 2.0.3
  npmGlobalPackages:
    create-react-app: 2.0.2

Steps to Reproduce

1. Try to import SVG as ReactComponet using import(). Example code below

Expected Behavior

SVG loads

Actual Behavior

Got following error in browser

Element 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.

This happens because importing module doesn't contain ReactComponent property. Here's console.log output from demo

Module {default: "/static/media/logo.5d5d9eef.svg", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

Reproducible Demo

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor (props) {
    super(props)
    this.logoComponent = 'div'
  }

  componentDidMount () {
    import('./logo.svg').then((m) => {
      console.log(m)
      this.logoComponent = m.ReactComponent
      this.forceUpdate()
    })
  }

  render() {
    const Logo = this.logoComponent

    return (
      <div>
        <Logo />
      </div>
    )
  }
}

export default App;

Workaround

1. Create file with following content

import { ReactComponent as Logo } from './logo.svg'
export default Logo

2. Use dynamic import as usual for this file

[lazyd3v]

I tried to move babel-plugin-named-asset-import from webpack config to babel preset and put it before @babel/plugin-syntax-dynamic-import plugin, but it didn't help. Any thoughts how to solve the issue? I'm not very familiar with create-react-app internals, so give an idea and I'll take a look :)

[alexgurr]

I too have this issue and would like to know a solution!

[Carlos-Carreno-Berlanga]

I have the same issue. Is there a solution for this? Apart from the workaround, which is a little bit annoying because you need to create one component for each svg file.

[lazyd3v]

Another workaround is to use https://github.com/tanem/react-svg

[neolefty]

Bringing this over from react/react#17804

Replicated differently here: https://github.com/neolefty/indirect-svg
Packaged as an NPM module: https://www.npmjs.com/package/replicate-indirect-svg

Update: I tried the workaround with export default Logo but it didn't work through the NPM module.

[dan-dr]

Having the same issue.
It seems to work here:
https://codesandbox.io/s/react-dynamic-svg-import-448dn?file=/src/App.js:777-791

So it might just be the babel/webpack configuration that's messing things up.