file-loader with default export

[mohsen1]

I'm using TypeScript 2.0 wildcard module name matching to allow importing files like images:

declare module '*.png' {
    const fileName: string;
    export = fileName;
}

And now I can import images with * as syntax:

import * as myImage from './my-image.png'

This works but I love to ditch the * as syntax and simply do import myImage from './my-image.png'. For that I can change the module declaration to:

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

import myImage from './my-image.png'

Problem is, when I do this, the transpiled code becomes:

var myImage = require(42).default;

My tsconfig:

    "target": "es5",
    "module": "commonjs"

Do you have a recommendation for fixing this?

[johnnyreilly]

You could give this a go: (no guarantees)

"allowSyntheticDefaultImports": true

[andrewMuntyan]

Hi, all! Had same situation.
allowSyntheticDefaultImports did not help.
TL;DR;
desired options is "esModuleInterop": true,

i use "typescript": "^2.8.1"

tsconfig.json

{
  "compilerOptions": {
    "outDir": "../dist/",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "../typings",
      "../node_modules/@types"
    ]
  },
  "include": [
    "../src/**/*",
    "../typings/**/*"
  ],
  "exclude": [
    "../node_modules",
    "**/*.spec.ts"
  ]
}```

when i use 
```javascript
declare module '*.jpg' {
  const fileName: string;
  export default fileName;
}

and then

import image from './large-image.jpg';

i get next picture in my compiled code

it is compiled to

var large_image_jpg_1 = __webpack_require__(4);
console.log(large_image_jpg_1.default);

large_image_jpg_1 becomes string - image url.
and string.default is undefined
but if i use

declare module '*.jpg' {
  const fileName: string;
  export = fileName;
}

and then

import * as image from './large-image.jpg';

it works fine.

[johnnyreilly]

cc @mohsen1 - I'm sure you're past this now but see @andrewMuntyan in case you're not!