0

Following up a previous question, I discovered a few things. I'm using the following two references (to the same file).

var Image1 = require("../assets/author.png");
import Image2 from "../assets/author.png";

In the render() method I attempt create markup in two ways.

<img style={imgStyle} src={Image1} />
<img style={imgStyle} src={Image2} />

Contrary to my expectations, those render differently.

<img style="margin: 15px;" src="1e0cf4ef57ac9ab0521646ee9c657eae.png">
<img style="margin: 15px;">

I'm not sure what to make of it.

  1. What is the guid that the filename has been transformed to? Can I control it? Should I tamper with it?

  2. What happens to the src part from the markup? Can it simply disappear like that? What can I do about it?

I've added a file with TypeScript definition as shown below in order to make the software understand that it's a valid module type. Not entirely sure if it actually achieves that goal, though.

declare module "*.png" {
  const value: any;
  export default value;
}
DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • I think I can answer question #2; I'll have to defer to Webpack people for question #1. Presumably `Image2` is evaluating to `undefined` because you are attempting a default import from a module that has no ES6-style default export, and setting an attribute to `undefined` causes it not to be added to the HTML. Use `import Image2 = require("../assets/author.png")` to import the CommonJS-style exported value or enable the `esModuleInterop` compiler option. – Matt McCutchen Sep 29 '18 at 23:02
  • @MattMcCutchen Very keep observation. You're right on your conclusion but wrong on the assumption leading you there (which makes it even more surprising). The value of *Author* is, indeed, *undefined* leading to the attribute *src* to be omitted. However, please see my edit in regard to the module registration (I'm adding a definition of it in *custom.d.ts*). – DonkeyBanana Sep 30 '18 at 02:19
  • Your `custom.d.ts` is a TypeScript declaration that is used to type check your code but is not used at runtime. What is defined at runtime is determined by the Webpack loader you are using, and I suspect it is creating a module with an export assignment instead of a default export (so your type declaration is wrong in the absence of `esModuleInterop`). Try one of the changes I suggested and see if it doesn't fix the problem. (If you try the change to the import, you may need to also replace `export default value` to `export = value` in the type declaration.) – Matt McCutchen Sep 30 '18 at 02:28
  • @MattMcCutchen I'm not proficient enough to play with Webpack so I decided to put a bounty on this one. The change to *require* resolves the visible problem but I want to understand the quirks on depth so I want to make it behave **my way**, which is using *import* syntax. However, I'd like to do some googling but I lack the keywords. Should I focus on *compilerOptions* and *esModuleInterop*? Other hints? – DonkeyBanana Sep 30 '18 at 07:43
  • As I said, if you enable `esModuleInterop`, then `import Image2 from "../assets/author.png"` should work. [This](https://medium.com/@dlmanning/interoperability-between-es-modules-and-common-js-is-a-mistake-fb9ac71d96fd#e703) looks like a good introduction to the difference between export assignments and default exports that is papered over by `esModuleInterop`. – Matt McCutchen Oct 02 '18 at 03:45

0 Answers0