SVG imports in npm modules aren't transformed into React components

Describe the bug

Third-party npm modules that import SVGs in the following manner aren’t transformed into React components:

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

Instead, they remain as URL imports to the SVG file.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

SVG

Environment

Environment Info:

  current version of create-react-app: 4.0.0
  running from C:\Users\Dylan\AppData\Roaming\npm-cache\_npx\19220\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
  Binaries:
    Node: 12.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.56), ChromiumDev (88.0.680.1)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^16.14.0 => 16.14.0
    react-dom: ^16.14.0 => 16.14.0
    react-scripts: ^3.4.3 => 3.4.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Import an npm module that imports SVGs using the ReactComponent as method.

Expected behavior

The SVG renders.

Actual behavior

Error: 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.

Reproducible demo

TBD

Additional Comments

I’m actually not sure if this is an intentional behavior or not. If it isn’t intentional, and I should be able to import modules using this convention, please let me know and I’ll put together a reproducible demo.

[CTLaChance]

For future reference, my issue was caused because CRA does not look through node_modules in the current react-scripts webpack.config.js file on the following loader:

// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),

You need to change include: paths.appSrc to include: [paths.appSrc, paths.appNodeModules,].

You can do this without ejecting by using react-app-rewired, CRACO, or any other webpack extender for CRA using the following config:

const paths = require("./node_modules/react-scripts/config/paths");

module.exports = {
    webpack: function (config, env) {
        config.module.rules[1].oneOf[2].include = [
            paths.appSrc,
            paths.appNodeModules,
        ];
        return config;
    },
};

Hope this helps anyone who comes across a similar issue!

[lord-xeon]

@dstaley did @CTLaChance’s solution work for you? I’m trying it out and with some adjustments rules[1].oneOf[3] I’m still getting a path for SVG files imported by npm modules.

Anyone have any further help here?