Dynamic import doesn’t work with SVG imported as ReactComponents

Explanation of the problem

This bug report outlines an issue related to importing an SVG file as a ReactComponent using dynamic import(). The expected behavior is that the SVG file should load successfully, but the actual behavior results in an error in the browser. The error message indicates that the element type is invalid, and it suggests possible reasons for this error, such as forgetting to export the component or mixing up default and named imports. The cause of the error is identified as the imported module not containing the ReactComponent property.

To provide a reproducible demo, the code snippet showcases a React component called “App” that attempts to import and render the SVG file. Inside the componentDidMount() lifecycle method, the SVG file is imported using dynamic import, and upon successful import, the ReactComponent property of the module is assigned to the “logoComponent” variable. However, due to the missing ReactComponent property in the imported module, the error occurs when attempting to render the component.

A workaround for this issue is suggested, which involves creating a separate file that directly imports the SVG file using the ReactComponent syntax. This file exports the component, and it can be used in the main component file without relying on dynamic import. By following this workaround, the SVG file can be successfully imported and used as a React component.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Dynamic import doesn’t work with SVG imported as ReactComponents

To solve the problem of importing an SVG file as a ReactComponent using dynamic import, you need to ensure that the imported module contains the necessary ReactComponent property. Here’s a step-by-step solution:

1. Create a separate file, let’s call it “Logo.js”, to handle the import and export of the SVG file as a React component.
2. Inside “Logo.js”, use the following syntax to import the SVG file and assign it to the ReactComponent variable:

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

3. Save the file and make sure it is in the same directory as your main component file.
4. In your main component file, modify the import statement to use the new “Logo” component from “Logo.js” instead of dynamic import:

import React from 'react';
import './App.css';
import Logo from './Logo';

class App extends React.Component {
  render() {
    return (
      <div>
        <Logo />
      </div>
    );
  }
}

export default App;

5. Save the changes and run your application again. The SVG file should now load successfully and be rendered as a React component.

By creating a separate file that directly imports the SVG file using the ReactComponent syntax and exporting it, you avoid the issue of the missing ReactComponent property in the imported module. This solution ensures that the SVG file is correctly imported and rendered as a React component without encountering the “Element type is invalid” error.

sysctl fs.inotify.max_user_watches

sudo sysctl -w fs.inotify.max_user_watches=8192

echo fs.inotify.max_user_watches=8192 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

"proxy": "http://localhost:3001"

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

npx create-react-app my-app

npm run build