question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Require issue after install

See original GitHub issue

I installed parcel-plugin-imagemin and after this I’ve been seeing a lot of errors like what I have pasted below. Before I installed the plugin, my images were loading without any issues, using the same code.

Uncaught Error: Cannot find module 'src/assets/aboutIcon.png'
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:37)
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:21)
    at localRequire (goAheadAcademyFrontend.e31bb0bc.js:53)
    at About.render (About.js:59)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Object.parcelRequire.index.js.react (index.js:4)
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:47)
    at localRequire (goAheadAcademyFrontend.e31bb0bc.js:53)
    at bundle-loader.js:80

Here is my package.json:

{
  "dependencies": {
    "@babel/polyfill": "^7.10.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "classnames": "^2.2.6",
    "email-validator": "^2.0.4",
    "polished": "^3.6.5",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-modal": "^3.11.2",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.0.0",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "@storybook/addon-actions": "^6.0.10",
    "@storybook/addon-essentials": "^6.0.10",
    "@storybook/addon-links": "^6.0.10",
    "@storybook/react": "^6.0.10",
    "babel-loader": "^8.1.0",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-imagemin": "^4.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-modal": "^3.11.2",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.0.0",
    "styled-components": "^5.1.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --public-url ./",
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook"
  }
}

My render function contains:

                  <img
                    src={require("../assets/aboutIcon.png")}
                    className="about-icon-img"
                    alt="about-icon-img"
                  />

Here is my folder structure:

Screen Shot 2020-09-23 at 12 03 44 PM

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
shailcommented, Sep 23, 2020

Also when I tried to use import in the About.js file:

import aboutIconimg from "../assets/aboutIcon.png";

I got the same exact error

1reaction
allangrdscommented, Dec 1, 2020

Same issue here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix problems that block programs from being installed or ...
It also fixes corrupted registry keys. First, you'll need to download the troubleshooter. Download troubleshooter. If you see the File Download box when...
Read more >
Windows 10 Update Not Installing After Restart System
... Installing After Restart System | Restart Required Windows 10 Fix | 2022Windows 10 has a built-in troubleshooter to check and fix issue....
Read more >
[SOLVED] Windows 10 Could Not Complete the Installation + ...
... the issue of Windows could not complete the installation after update ... You can take advantage of the restore point or system...
Read more >
Fix an installed Android app that isn't working - Google Support
Try the following steps if an app installed on your phone has any of these problems: Crashing. Won't open. Won't respond. Isn't working...
Read more >
9 Installation of the JDK and the JRE on Microsoft Windows ...
This topic includes the following sections: System Requirements for ... The following table provides the disk requirements for the installed features: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found