Extra whitespace around markup generates <undefined> element warning

michalkvasnicak commented 4 years ago

Basically the problem is similar to https://github.com/borgfriend/gatsby-remark-embed-video/issues/20. It's caused by whitespace around markup generated by this plugin.

Quick workaround is to use customMarkup with defaultMarkup function and then just trim() the result.

{
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images-anywhere',
            options: {
              createMarkup: (...args) => defaultMarkup(...args).trim(),
              quality: 100,
              maxWidth: 960,
            },
          },
          {
            resolve: 'gatsby-remark-embedder',
          },
        ],
        remarkPlugins: [require('remark-unwrap-images')],
      },
    },

d4rekanguok commented 4 years ago

Thanks for spotting this @michalkvasnicak! Would you be open to send over a PR to fix this? Otherwise I'll work on it the next chance I have.

Thanks again!

josephmarkus commented 3 years ago

@michalkvasnicak where does defaultMarkup come from?

With the following configuration:

{
  resolve: 'gatsby-remark-images-anywhere',
  options: {
    staticDir: 'content',
    createMarkup: (props) => {
      console.log('BLA BLA123', props);
      return props;
    }
  },
}

I get

{
  title: null,
  alt: null,
  originSrc: '/images/features/feature_image_3.jpg',
  sharpMethod: 'fluid',
  base64: 'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeX
BkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAh
EBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAZdCIQv/xAAYEAADAQEAAAAAAAAAAAAAAA
ACAzIBE//aAAgBAQABBQLppAumX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB
kQAAEFAAAAAAAAAAAAAAAAAAABAiFBcv/aAAgBAQAGPwLIybFP/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARMSH/2gAIAQEAAT8hX1oyVLFSwdYnfWf/2gAMAw
EAAgADAAAAEPAP/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEhMf/aAAgBAwEBPxBUen//xAAWEQEBAQAAAAAAAAAAAAAAAAAAASH/2gAIAQIBAT8QuI//xAAaEA
EAAwADAAAAAAAAAAAAAAABABEhQVHB/9oACAEBAAE/EM/hUKsaPIMYqBHOodLqqrvLP//Z',
  aspectRatio: 4.3478260869565215,
  src: '/static/595deddc0252a94008b74bac9a7057f2/4b190/feature_image_3.jpg',
  srcSet: '/static/595deddc0252a94008b74bac9a7057f2/e07e9/feature_image_3.jpg 200w,\n' +
    '/static/595deddc0252a94008b74bac9a7057f2/066f9/feature_image_3.jpg 400w,\n' +
    '/static/595deddc0252a94008b74bac9a7057f2/4b190/feature_image_3.jpg 800w,\n' +
    '/static/595deddc0252a94008b74bac9a7057f2/abaab/feature_image_3.jpg 1185w',
  srcSetType: 'image/jpeg',
  sizes: '(max-width: 800px) 100vw, 800px',
  originalImg: '/static/595deddc0252a94008b74bac9a7057f2/abaab/feature_image_3.jpg',
  originalName: 'feature_image_3.jpg',
  density: 72,
  presentationWidth: 800,
  presentationHeight: 182,
  tracedSVG: undefined
}

Which bit needs to be trimmed in this case?

d4rekanguok / gatsby-remark-images-anywhere

Extra whitespace around markup generates <undefined> element warning #23