Require(Img Path) Not Working/ Cannot Find Module "." Reactjs

cant find module while loading image from a relative path with require()

The problem was solved. It was because I had an index.js file for each folder inside src folder. Default path resolver of webpack and react-create-app constructs an array relative paths and while doing this, it searches for index.js file in cwd, if it finds one, it maps all relative paths to this directory or its immediate parent. Thus, ../ or ./ would get mapped against path inside current working directory. I moved the assets folder inside cwd and problem was solved. Though this is just a workaround, I believe its a better trade off against wasting time trying to figure out internals of webpack or react-create-app boiler plate code.

Thank you all for your help.

Error: Cannot find module "." when passing image to child component

You can't use dynamic names in require, it needs static solvable paths. So, here is an example how you can do it. Just adjust the code to your situation.

const App = () => {
  const images = [
    { id: 1, path: require( "./images/img1.jpg" ) },
    { id: 2, path: require( "./images/img2.jpg" ) },
    { id: 3, path: require( "./images/img3.jpg" ) },
  ];

  return (
    <div>
      {
        images.map( image => (
          <Img key={image.id} image={image} />
        ) )
      }
    </div>
  );
};

const Img = ( { image } ) => (
  <div>
    <p>{image.id}</p>
    <img width="100" src={image.path} />
  </div>
);

---

As an alternative to this method here an easier one that I've learned recently:

const App = () => {
  const images = [
    { id: 1, path: "./images/img1.jpg" },
    { id: 2, path: "./images/img2.jpg" },
    { id: 3, path: "./images/img3.jpg" },
  ];

  return (
    <div>
      {
        images.map( image => (
          <Img key={image.id} image={image} />
        ) )
      }
    </div>
  );
};

const Img = ( { image } ) => (
  <div>
    <p>{image.id}</p>
    <img width="100" src={require( "" + image.path )} />
  </div>
);

require( "" + image.path ) is doing the trick here. With this method, instead of writing so many requires, we can use one in our child component.

Require in reactjs is throwing cannot find module

You are approaching it in the wrong way, your images MUST be served, not requiring it as a module. It must be included in your static assets, or an external url served in other server. This is the common pattern, please don't complicate it.

If you have a public folder, just put it there like in the

public/images/image1.jpeg

Then in your code you can access it by:

<img src="/images/image1.jpeg" />

Provided you serve the assets.

Hope this helps!

Importing images in TypeScript React - "Cannot find module"

If you literally wrote "include": ["./src/index.d.ts"] in tsconfig.json and you don't have a "files" setting, that means the project defined by tsconfig.json includes only the single file ./src/index.d.ts. When you open any other file in VS Code, VS Code uses a separate language service instance that doesn't use your tsconfig.json. Adjust your "include" setting to match all the .ts and .tsx files in your project, or just delete it and rely on the default behavior of including all files under the directory containing tsconfig.json.

Round 2

TypeScript is ignoring index.d.ts because it assumes that index.d.ts is generated from index.tsx and index.tsx is more likely to be up to date. Name your index.d.ts file something else, e.g., declaration.d.ts.

Correct path for img on React.js

You're using a relative url, which is relative to the current url, not the file system. You could resolve this by using absolute urls

<img src ="http://localhost:3000/details/img/myImage.png" />


But that's not great for when you deploy to www.my-domain.bike, or any other site. Better would be to use a url relative to the root directory of the site

<img src="/details/img/myImage.png" />


---

Related Topics