Unable to show images in a react application

[Nick-Lucas]

Current Behavior

#14532 and #14378 have been closed and locked but on upgrading Nx to 16.3.2 and removing the webpack configs I put in place as workarounds, the .png image I'm importing is not displaying still.

Expected Behavior

Importing images works

GitHub Repo

No response

Steps to Reproduce

import Image from 'path/to/image.png'

<Img src={Image} alt="Some Image" />

Nx Report

Node   : 18.14.2
   OS     : linux x64
   pnpm   : 8.4.0
   Hasher : Native
   
   nx                 : 16.3.2
   @nx/js             : 16.3.2
   @nx/jest           : 16.3.2
   @nx/linter         : 16.3.2
   @nx/workspace      : 16.3.2
   @nx/cypress        : 16.3.2
   @nx/devkit         : 16.3.2
   @nx/eslint-plugin  : 16.3.2
   @nx/nest           : 16.3.2
   @nx/node           : 16.3.2
   @nx/plugin         : 16.3.2
   @nx/react          : 16.3.2
   @nrwl/tao          : 16.3.2
   @nx/web            : 16.3.2
   @nx/webpack        : 16.3.2
   typescript         : 5.0.4

Failure Logs

No response

Operating System

• [ ] macOS
• [X] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No response

[Nick-Lucas]

Workaround is still to add this webpack.config.js and configure it in project.json

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`

  config.module.rules = config.module.rules.map((rule) => {
    if (/file-loader/.test(rule.loader)) {
      return {
        ...rule,
        test: /\.(eot|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, // Excluding `svg`
        type: 'javascript/auto', // Fixing images
      }
    }

    return rule
  })

  // This will properly handle imported svg's
  config.module.rules.push({
    test: /\.svg$/,
    use: ['@svgr/webpack', 'url-loader'],
  })

  return config
})

[timbakkum]

also facing issues with 16.3.2, it seems like file-loader is not on the configuration in react projects and I am having issue with font loading among others.

Adding something like this to the webpack config seems to fix it for me, but I'd expect withReact() to do that.. :

config.module.rules.push({
      
        test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
        loader: require.resolve('file-loader'),
        options: {
            name: `[name][hash].[ext]`,
        },
    });

[xiongemi]

@Nick-Lucas the current react webpack.config generated looks like:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  return config;
});

the function withReact already contains the below rule that i did not need to add it my webpack config rules:

        {
          test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
          loader: require.resolve('file-loader'),
          options: {
            name: `[name]${hashFormat.file}.[ext]`,
          },
        },

the png image showed up for me when trying to use:

import Image from 'path/to/image.png'

<Img src={Image} alt="Some Image" />

what is your webpack looks like?

[deve-sh]

We're facing the same issue after upgrading to nx 16.2.2.

A workaround to this issue is to override your webpack config to use your own config for image loading. We're using asset/resource type instead of file-loader as it's the recommended approach for assets since Webpack 5.

// assets-loader.js
module.exports.fixAssets = (config) => 
  merge(
    {
      ...config,
      module: {
        ...config.module,
        // Filter out existing nx rules that work on images
        rules: config.module.rules.filter(({ test }) => !test.test('.png')),
      },
    },
    // Add our own updated config to make images work
    {
      module: {
        rules: [
          {
            test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
            type: 'asset/resource',
          },
        ],
      },
    }
  );

// webpack-config.js
module.exports = async (config, context) => {
  ...
  return fixAssets(config);
};

However, an official fix from nx for this would be great.

[Nick-Lucas]

@Nick-Lucas the current react webpack.config generated looks like:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  return config;
});

the function withReact already contains the below rule that i did not need to add it my webpack config rules:

        {
          test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
          loader: require.resolve('file-loader'),
          options: {
            name: `[name]${hashFormat.file}.[ext]`,
          },
        },

the png image showed up for me when trying to use:

import Image from 'path/to/image.png'

<Img src={Image} alt="Some Image" />

what is your webpack looks like?

Right, so I was trying to remove the webpack config entirely because that's how it used to be. Just tried generating a new project and it does indeed come with a config now by default. So copying in the default config at least simplifies things.

it's one of those cases where Nx probably couldn't reasonably be expected to remove the workaround automatically because the webpack file already exists and whatever migration added the config to existing projects would just respect that

[timbakkum]

I still have the issue with a newly generated webpack config in nx 16.3.2

Below is the config.module.rules object with no custom config/rules applied yet. As you can see, a font loader is missing. An official fix would be nice for this!

[
  { test: /\.m?jsx?$/, resolve: { fullySpecified: false } },
  { test: /\.js$/, type: 'javascript/auto' },
  {
    test: /\.([jt])sx?$/,
    loader: '/projects/sparen-beleggen-frontend/node_modules/@nx/webpack/src/utils/web-babel-loader',
    exclude: /node_modules/,
    options: {
      cwd: '/projects/sparen-beleggen-frontend/apps/jest-react/src',
      emitDecoratorMetadata: true,
      isModern: true,
      envName: 'development',
      cacheDirectory: true,
      cacheCompression: false,
      configFile: '/projects/sparen-beleggen-frontend/apps/jest-react/.babelrc',
      plugins: [Array]
    }
  },
  {
    test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
    type: 'asset',
    parser: { dataUrlCondition: [Object] }
  },
  {
    test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
    oneOf: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  },
  {
    test: /\.svg$/,
    issuer: /\.(js|ts|md)x?$/,
    use: [ [Object], [Object] ]
  }
]

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.