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/',
});