TypeScript默认导入返回undefined及file-loader引用资源返回undefined问题

Question 1: Why do default imports in TypeScript return undefined? #

This is a super common snag, usually tied to how TypeScript handles module compatibility or missing default exports. Here are the most likely fixes:

• Enable ES Module Interop for CommonJS Packages:
  Most npm packages use CommonJS syntax (module.exports), but TypeScript’s default settings don’t smoothly convert these to ES module default imports. Add these lines to your tsconfig.json:

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  `esModuleInterop` wraps CommonJS modules so you can use `import Default from 'module'` instead of clunky workarounds like `import * as Module from 'module'`.
  
  

• Check if the Module Actually Has a Default Export:
  If the module you’re importing only uses named exports (like export const foo = 'bar'), trying to import the default will return undefined. Either switch to named imports (import { foo } from 'module') or update the module to include a default export.

• Verify Your Import Path:
  A tiny typo or wrong relative path can lead to importing an empty module (resulting in undefined). Double-check that the path points to the correct file, especially if you’re using baseUrl or paths in your tsconfig.json.

Question 2: Why does file-loader return undefined when importing images? #

Looking at your setup, there are a few key issues to fix right away:

1. Critical Webpack Config Mistake #

Your config uses const path = import("path"); which is an async dynamic import. Webpack config runs synchronously in Node.js, so this means path is a Promise, not the actual path module. Replace that line with:

const path = require("path");

This will correctly load the Node.js path module, ensuring your output path resolves properly (a broken path can break file-loader entirely).

2. Fix the File Loader Setup #

• If using Webpack 4: Make sure your image rule is complete. It should look like this:

  {
    test: /\.(png|jpg)$/,
    use: 'file-loader'
  }
  

  Add options if you want to control output filenames:

  use: {
    loader: 'file-loader',
    options: {
      name: '[hash].[ext]',
      outputPath: 'images/'
    }
  }
  

• If using Webpack 5: File-loader is deprecated—use Webpack’s built-in asset modules instead. Replace the file-loader rule with:

  {
    test: /\.(png|jpg)$/,
    type: 'asset/resource'
  }
  

  This handles emitting the image file and returning the correct URL automatically, no extra loader needed.

3. Add TypeScript Type Definitions for Images #

TypeScript doesn’t recognize image files as modules by default, which can lead to runtime inconsistencies. Create a file like src/declarations.d.ts with:

declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

This tells TypeScript that importing a .png or .jpg file will return a string (the URL of the emitted file).

4. Check Webpack Output Public Path #

If your images are being emitted to dist but the URL is incorrect, set publicPath in your webpack output config:

output: {
  path: path.resolve(__dirname, "dist"),
  publicPath: './'
}

This ensures the generated URL points to the correct location relative to your main JS file.

内容的提问来源于stack exchange，提问作者Ettapp