Error during bundle: Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)

Question

I added font to react typescript project after that I try to build but its showing error

Error during bundle: Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)

Adding font using styled-components and loader using is url-loader

fonts work fine in system and no error while run.

Font extension is ttf. Below is my style file using styled-component

import IBMPlexSansSemiBold from './fonts/IBMPlexSans/IBMPlexSans-SemiBold.ttf';
import IBMPlexSansBold from './fonts/IBMPlexSans/IBMPlexSans-Bold.ttf';
import { font} from './Fonts';
export const FontsIBM = createGlobalStyle`
 @font-face {
        font-family: ${font.DEFAULT.SEMI_BOLD};
        src: local('IBMPlexSans-SemiBold'), local(${font.DEFAULT.SEMI_BOLD}),
        url(${IBMPlexSansSemiBold}) format('truetype');
        font-weight: 600;
        font-style: normal;
    }
    @font-face {
        font-family: ${font.DEFAULT.BOLD};
        src: local('IBMPlexSans-Bold'), local(${font.DEFAULT.BOLD}),
        url(${IBMPlexSansBold}) format('truetype');
        font-weight: 700;
        font-style: normal;
    }
`;

This is how I config url-loader

 const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  staticDirs: ['../../../public'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }
    //Font added using url-loader
    config.module.rules.push({
      test: /\.(ttf|eot|woff|woff2)$/,
      loader: require.resolve('url-loader'),
      options: {
        name: '[name].[hash].[ext]',
      },
    });
    // add your own webpack tweaks if needed

    return config;
  },
};