npm Community Forum (Archive)

The npm community forum has been discontinued.

To discuss usage of npm, visit the GitHub Support Community.

import and require cannot resolve any newly added jpg files/modules

What I Wanted to Do

Import and/or require a new jpg image file for display using npm.

this command worked:

import img from ‘./images/chin1200x514.jpg’;

this command also worked
var img = require (’./images/chin1200x514.jpg’);

I added several new images to the image directory including:

this command fails, it cannot resolve the module:
import img from ‘./images/chin600x257.jpg’;

this fails as well, for the same reason
var img = require(’./images/chin600x257.jpg’);

Similar efforts to import any of the other new images added yesterday result in the same failure.

What Happened Instead

I have double/triple checked the file names and they are correct. For some reason, it fails to load any new image.

Reproduction Steps

import React from ‘react’;
import img from ‘./images/anyNewImageAfterSept25.jpg’;
const Test = () => {

) } export default Test;

This also fails:

import React from ‘react’;

const Test = () => {
var img = require(’./images/anyNewImageAfterSept25…jpg’);

) } export default Test;

Note that if I replace anyNewImageAfterSept25.jpg with anyImageBeforeSept25.jpg, the code works as expected.


It seems that npn does not reference ‘./images/chin1200x514.jpg’ when it displays this image. Rather, it uses the url ‘/static/media/chin1200x514.d867d62a.jpg’. Apparently, npn creates a table that links the real image url to the ‘/static/media’ directory. I suspect that this directory is not being updated when new images are added.

Platform Info

$ npm --versions
<!-- paste output here -->
{ npm: '6.11.2',
  ares: '1.14.0',
  brotli: '1.0.7',
  cldr: '32.0.1',
  http_parser: '2.8.0',
  icu: '60.2',
  modules: '64',
  napi: '4',
  nghttp2: '1.39.2',
  node: '10.16.3',
  openssl: '1.1.0i-fips',
  tz: '2017c',
  unicode: '10.0',
  uv: '1.28.0',
  v8: '',
  zlib: '1.2.11' }

$ node -p process.platform
<!-- paste output here -->linux

It is not npm doing that work. Maybe React, or webpack or something like that?

I simplified the test case and removed all the react code. I continue to have the same problem.
The following works.

import Test from ‘./images/chin1200x514.jpg’;
export default Test;

The following does not work.

import Test from ‘./images/chin600x257.jpg’;
export default Test;

The errror is:
“Module not found: Can’t resolve ‘./images/chin600x257.jpg’ in ‘/home/bruce/MedicalSpaNW-PWA/src/components’”

I think this problem has something to do with the file named
This file assigns a variable map to an object that essentially links the local file name with NPM resources. This file is not getting updated. It does not list any new additions and continues to list resources that have been removed.

How do update this file?

Does your project have a build script in the package.json? Often there is a build script to take the source and resources and prepare it for use. e.g.

npm run build