🐛 bug report

Importing a .svg file into my react component is failing with the following error:

Uncaught Error: Cannot find module 'images/pefin-logo.svg'
    at newRequire (styles.8986bff4.js:37)
    at newRequire (src.e31bb0bc.js:29)
    at newRequire (LoginPage.115627cb.js:29)
    at newRequire (src.e31bb0bc.js:21)
    at localRequire (src.e31bb0bc.js:53)
    at Object.parcelRequire.components/Nav.js.@babel/runtime/helpers/slicedToArray (Nav.js:7)
    at newRequire (src.e31bb0bc.js:47)
    at localRequire (src.e31bb0bc.js:53)
    at Object.parcelRequire.components/Page.js.@babel/runtime/helpers/slicedToArray (Page.js:6)
    at newRequire (src.e31bb0bc.js:47)

🎛 Configuration (.babelrc, package.json, cli command)

{
  "presets": [
    ["@babel/preset-env", {
        "targets": {
          "browsers": "last 2 versions"
        },
        "debug": true,
        "modules": false,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env", {
            "targets": {
              "node": "current"
            },
            "modules": "commonjs"
          }
        ]
      ]
    }
  }
}

🤔 Expected Behavior

It should work.

😯 Current Behavior

The app succeeds in building. I tried changing the path of the image it was importing to ensure that line was being hit, and sure enough, it breaks if I put a path that doesn’t exist. When I open my app in the browser, I get the error above.

If I look at my dist dir, I can see the image in there as pefin-logo.36442847.svg

💁 Possible Solution

I noticed issues https://github.com/parcel-bundler/parcel/issues/2769 and possibly https://github.com/parcel-bundler/parcel/issues/1756 looks similar, since I am code-splitting but that refers to a missing JS file. I tried stepping through the requires, I noticed that there’s a chain of requires for each bundle, and each one falls through to the previous bundle’s require. In the case of this image, it’s falling through to the first bundle, and failing to find the image, though I’m not quite sure why, since I’m not too familiar with all the internal machinery of parcel’s require runtime code.

💻 Code Sample

My components are as follows: I have an <App /> component that does code-splitting with React.lazy() One of the bundles is LoginPage.js which imports a Page component, which imports Nav, which imports pefin-logo.svg to display it:

import logo from '../images/pefin-logo.svg'

When I browse to /login (which pulls in the LoginPage bundle), I get the error above.

Curiously, when I look at the src bundle, I find the following code near the end.

b.load([["pefin-logo.36442847.svg","images/pefin-logo.svg"]])

Also, I’ve extracted what looks like a map of file paths and dependencies at https://gist.github.com/akatechis/9ea8a1a830a664c42e6b21061f3d5815 The only thing I notice here is that the svg image is listed under the NotFound page, but not under the LoginPage. That said, I’m not sure exactly how to interpret this, so I don’t know if that’s peculiar or not.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	10.12.0
Yarn	1.13.0
Operating System	Windows 10