Is there a way to unwrap images generated by MDXRenderer

[zhenghaohe]

Summary

Relevant information

Is there a way to unwrap the images generated by MDXRenderer? Right it is always being wrapped inside a <p /> tag which makes it really hard to style the images. I attached a screenshot to describe.

I found that there is this plugin remark-unwrap-images(https://www.npmjs.com/package/remark-unwrap-images), which doesn't work on gatsby-plugin-mdx.

Environment (if relevant)

System: OS: macOS 10.15.5 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/local/bin/python Browsers: Chrome: 83.0.4103.97 Firefox: 77.0 Safari: 13.1.1 npmPackages: gatsby: ^2.3.25 => 2.16.5 gatsby-image: ^2.0.39 => 2.2.29 gatsby-plugin-feed-mdx: ^1.0.0 => 1.0.0 gatsby-plugin-google-analytics: ^2.0.18 => 2.1.23 gatsby-plugin-manifest: ^2.0.29 => 2.2.23 gatsby-plugin-mdx: ^1.2.14 => 1.2.14 gatsby-plugin-netlify-cms: ^4.0.0 => 4.1.25 gatsby-plugin-offline: ^2.0.25 => 2.2.10 gatsby-plugin-page-transitions: ^1.0.8 => 1.0.8 gatsby-plugin-react-helmet: ^3.0.12 => 3.1.13 gatsby-plugin-scroll-reveal: ^0.0.7 => 0.0.7 gatsby-plugin-sharp: ^2.0.35 => 2.2.32 gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0 gatsby-plugin-styled-components: ^3.0.7 => 3.1.11 gatsby-plugin-typography: ^2.2.13 => 2.3.14 gatsby-remark-copy-linked-files: ^2.0.11 => 2.1.28 gatsby-remark-images: ^3.3.9 => 3.3.9 gatsby-remark-responsive-iframe: ^2.1.1 => 2.2.25 gatsby-remark-smartypants: ^2.0.9 => 2.1.14 gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2 gatsby-remark-vscode: ^1.0.4 => 1.2.1 gatsby-source-filesystem: ^2.0.29 => 2.1.33 gatsby-transformer-sharp: ^2.1.18 => 2.2.23 npmGlobalPackages: gatsby-cli: 2.12.38

File contents (if changed)

gatsby-config.js: plugins: [ { resolve: gatsby-plugin-scroll-reveal, options: { threshold: 0.3, // Percentage of an element's area that needs to be visible to launch animation once: true, // Defines if animation needs to be launched once disable: false, // Flag for disabling animations

    // Advanced Options
    selector: "[data-sal]", // Selector of the elements to be animated
    animateClassName: "sal-animate", // Class name which triggers animation
    disabledClassName: "sal-disabled", // Class name which defines the disabled state
    rootMargin: "0% 50%", // Corresponds to root's bounding box margin
    enterEventName: "sal:in", // Enter event name
    exitEventName: "sal:out", // Exit event name
  },
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-feed-mdx`,
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/blog`,
    name: `blog`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/assets`,
    name: `assets`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [".mdx", ".md"],
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 590,
          showCaptions: true,
          linkImagesToOriginal: false,
          withWebp: true,
          backgroundColor: "red",
        },
      },
      {
        resolve: `gatsby-remark-responsive-iframe`,
        options: {
          wrapperStyle: `margin-bottom: 1.0725rem`,
        },
      },
      {
        resolve: `gatsby-remark-vscode`,
      },
      {
        resolve: `gatsby-remark-copy-linked-files`,
      },
      {
        resolve: `gatsby-remark-smartypants`,
      },
    ],
    plugins: [`gatsby-remark-images`],
  },
},
{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    // edit below
    // trackingId: `ADD YOUR TRACKING ID HERE`,
  },
},
{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `Gatsby Starter Blog`,
    short_name: `GatsbyJS`,
    start_url: `/`,
    background_color: `#ffffff`,
    theme_color: `#663399`,
    display: `minimal-ui`,
    // edit below
    icon: `content/assets/gatsby-icon.png`,
  },
},
{
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography`,
  },
},

], package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[mrmartineau]

@zhenghaohe remark-unwrap-images does work with the mdx plugin, here is an extract of my config:

const unwrapImages = require('remark-unwrap-images')

     {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        remarkPlugins: [
          unwrapImages,
        ]
      }

[pvdz]

@zhenghaohe did this resolve your question? Feel free to close the ticket if that's the case :)

[dinhanhthi]

@zhenghaohe remark-unwrap-images does work with the mdx plugin, here is an extract of my config:

const unwrapImages = require('remark-unwrap-images')

     {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        remarkPlugins: [
          unwrapImages,
        ]
      }

I got this

Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/thi/git/dat-5/node_modules/remark-unwrap-images/index.js
  require() of ES modules is not supported.
  require() of /Users/thi/git/dat-5/node_modules/remark-unwrap-images/index.js from /Users/thi/git/dat-5/gatsby-config.js is an ES module file as it is a .js file whose nearest parent packa
  ge.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/thi/git/dat-5/node_modules/remark-unwrap-images/package.json.