How to import images

[rsslldnphy]

Hi! I'm trying to convert my create-react-app app to razzle and have almost everything working except imports of images, e.g. import './foo.png';. From what I've gathered from various issues and stackoverflow answers I've found, I think I need to use the url-loader webpack plugin by adding this to razzle.config.js:

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    config.module.rules.push({
      test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url-loader?limit=10000",
    });

    config.module.rules.push({
      test: /\.(gif|png|jif|pdf|jpg|bmp|jpeg)$/,
      loader: "url-loader?limit=10000",
    });

    return config;
  },
};

However this seems to have no effect. Are there any docs / examples I could look at to figure out how to get this to work? And would it be worth adding an example to the examples folder of the repo?

Extra information: I'm using Typescript with a module alias, however neither imports using the alias nor relative imports of images are working. In case needed, tsconfig.json is:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src",
    "paths": {
      "@goodgym/*": ["*"]
    }
  },
  "include": ["src"]
}

and .babelrc is

{
  "presets": ["razzle/babel", "@emotion/babel-preset-css-prop"],
  "plugins": ["babel-plugin-lodash"]
}

Thanks!

[rsslldnphy]

Sigh. Immediately after posting this discussion I figure out it's actually a Typescript issue. Fixed by creating src/global.d.ts:

declare module "*.jpg";
declare module "*.png";

and updating tsconfig.json to include:

 "include": ["src", "src/global.d.ts"]

[rsslldnphy]

idk if worth updating the typescript example to include this configuration so others don't run into the same problem?