Cannot use .png files from a monorepo Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[ionutmiftode]

What version of Next.js are you using?

10.2.2

What version of Node.js are you using?

v12.13.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu 18.04.5 LTS

How are you deploying your application?

Vercel

Describe the Bug

I am using a monorepo inside which I have a nextjs app that uses components from a shared folder. The problem is that in the shared folder I have also images that when I want to used them inside my nextjs app is breaking

../components/src/assets/images/paymentBrands/visa.png Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

The file structure is:

/packages
    /components (shared react-native components)
      /src/assets/images/
    /mobile
    /website (nextjs website)

Expected Behavior

Images should be loaded as expected

To Reproduce

babel.config.js

module.exports = {
  presets: ['next/babel'],
  plugins: [['react-native-web', { commonjs: true }]],
};

next.config.js

const path = require('path');
const sitemap = require('nextjs-sitemap-generator');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  '../components',
  'react-native-vector-icons',
  'react-native-modal',
  'react-native-animatable',
  'react-native',
  'react-native-flash-message',
]);

module.exports = withPlugins([
  [
    withTM,
    {
      distDir: 'build',
      trailingSlash: true,
      sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
      },
      reactStrictMode: true,
      webpack: config => {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          // Transform all direct `react-native` imports to `react-native-web`
          'react-native$': 'react-native-web',
        };
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ];
        config.resolve.modules = [
          ...config.resolve.modules,
          path.resolve(__dirname, '../../node_modules'),
        ];
        config.module.rules = [
          {
            test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
            loader: 'file-loader',
            include: path.resolve(
              __dirname,
              '../../node_modules/react-native-vector-icons',
            ),
          },
          ...config.module.rules,
        ];

        return config;
      },
    },
  ],
]);

sitemap({
  baseUrl: 'https://getvehicool.com',
  pagesDirectory: __dirname + '/pages',
  targetDirectory: 'public/static/',
});

[kachkaev]

Has anyone found a solution? Facing the same problem after upgrading from Next 10.2.3 to 11.1.1 and removing next-images. Here is the code I have:

import myPng from "./local/path/to/my.png";

<img src={myPng} />

If I keep next-images, the app works, but there is a TS error:

Type 'StaticImageData' is not assignable to type 'string'.ts(2322)
index.d.ts(2144, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

If I remove next-images and replace <img src={myPng} /> with <img src={myPng.src} /> as suggested by TS, I get a weired runtime error: Unexpected character '�' .

Upgrading to Next 12 is not an option at this point because we rely on Webpack 4 (not sure if this would fix the issue).

---

UPD: Solution

👀 Inspired by https://www.npmjs.com/package/next-images#typescript

⚠️ Only works if you don‘t import *.svg files (there is a type clash): next / next-images. Might be partially mitigated by #30060

1. Keep next-images as is.

2. Create next-plugins.d.ts with the following contents:

   /// <reference types="next-images" />

3. Edit tsconfig.json:

   -"include": ["next-env.d.ts" "**/*.ts", "**/*.tsx"],
   +"include": ["next-env.d.ts", "next-plugins.d.ts", "**/*.ts", "**/*.tsx"],