0

I am developing a markdown-to-jsx img override and depending on if an image is relative (![Test](test.jpg "Test")) or a hyperlink (![Test](https://example.net/test.jpg "Test")), I wish to handle things differently.

The following code works fine, but I want to make sure it is future-proof. I have stopped using requires a while ago in favor of imports but imports cannot be dynamic.

interface ImageProps {
  alt: string
  src: string
}

const Image = function(props: ImageProps) {
  let src: string
  if (props.src.match(/^http(s)?:\/\//)) {
    src = props.src
  } else {
    src = require(props.src)
  }
  return <img alt={props.alt} src={src} />
}
sunknudsen
  • 6,356
  • 3
  • 39
  • 76
  • What's wrong with `require`? – Chris Feb 08 '20 at 23:24
  • The reason you don't want any dynamic requires is because webpack (or any other bundler) _cannot bundle implicit requires_, so for things like this you don't even want a require at all: just have all the images in a static asset dir, and point to whatever the location for that is. Let the browser find the actual image file because you gave it the correct URL. – Mike 'Pomax' Kamermans Feb 08 '20 at 23:25
  • @Mike'Pomax'Kamermans Problem is the image `src` is derived from markdown files that can have relative paths so managing static assets would require copying the images to a public folder. I like how, in the above code, this is handled by CRA. – sunknudsen Feb 08 '20 at 23:29
  • @Chris Trying to figure out if using dynamic require statements is good practice or a hack. – sunknudsen Feb 08 '20 at 23:30
  • Mike above has a point, but using dynamic requires isn't necessarily bad per se. – Chris Feb 08 '20 at 23:34
  • Webpack can't deal with `require(somevar)` because it has no idea what might be in that `somevar` (so it can't preemptively bundle it in, or copy it to the correct location, in/from the filesystem). So if you want to use require, I have no idea how you would do that. (As far as webpack is concerned, all dynamic requires are bad. Even if in general there are cases were dynamic requires are fine in a general Node program) – Mike 'Pomax' Kamermans Feb 08 '20 at 23:34
  • @Mike'Pomax'Kamermans not necessarily. You could do things like `if(process.env.NODE_ENV) require ...`. You are right though when it comes to "business logic" and conditions that are only relevant at run-time. – Chris Feb 08 '20 at 23:44
  • Thanks for the feedback @Mike'Pomax'Kamermans. I share your point of view hence this question. Strange though that the above code works just fine... Found the idea on https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs. – sunknudsen Feb 08 '20 at 23:44
  • @sunknudsen, I think what Mike means here is that webpack will bundle all possible files that matches your regex or string, which might not always be ideal. – Chris Feb 08 '20 at 23:51
  • @Chris note that's not a dynamic require in the sense that the require _itself_ is dynamic. The code path is dynamic, but the require is a fixed, known quantity. In those cases, Webpack will simply bundle it in, whether your code ever reaches that path or not. In the case of this question, where the require _itself_ is dynamic (based on some var that could literally take on any string value in the universe) Webpack has no idea what to do, and will error out. – Mike 'Pomax' Kamermans Feb 09 '20 at 01:53
  • @Mike'Pomax'Kamermans but OP said that the code works... – Chris Feb 09 '20 at 10:30
  • Yes, because of this very important line: "I have stopped using requires a while ago in favor of imports but imports cannot be dynamic". So their code works right now, because it does not use `require`, and only has static imports. – Mike 'Pomax' Kamermans Feb 09 '20 at 17:34

0 Answers0