title: React module loaded as a string with WebPack `asset/source` in Gatsby contains hot reload code
body: <p>I want to import a JS file as a string, so I can render it as text in a code block.</p>
  <p>I import it like this:</p>
  <pre class="lang-js prettyprint-override"><code>import TestComp from './TestComp.js?raw'
  </code></pre>
  <p>Then in my <code>gatsby-node.js</code> I set the files that have <code>resourceQuery</code> of <code>raw</code> to have a type of <code>'asset/source'</code>, and then I exclude the raw assets from being processed  with <code>resourceQuery: { not: [/raw/] }</code>:</p>
  <pre class="lang-js prettyprint-override"><code>exports.onCreateWebpackConfig = ({ actions, getConfig }) =&gt; {
    const config = getConfig()
  
    config.module.rules = [
      ...config.module.rules.map(rule =&gt; {
        if (String(rule.test) === String(/\.(js|mjs|jsx)$/)) {
          rule = { ...rule, resourceQuery: { not: [/raw/] } }
        }
  
        return rule
      })
    ]
  
    actions.replaceWebpackConfig(config)
  
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            resourceQuery: /raw/,
            type: 'asset/source'
          },
        ]
      }
    })
  }
  </code></pre>
  <p>This works, kind of, I get back the raw code for the component. But I get more, see below. My test component is there tho, so I could mangle it with regex but I’d rather not if I can somehow remove that hot reload code (that’s what I assume it is).</p>
  <pre class="lang-js prettyprint-override"><code>$RefreshRuntime$ = require('/Users/bob/web/foo/node_modules/react-refresh/runtime.js');
  $RefreshSetup$(module.id);
  
  import React from 'react'
  
  const TestComp = props =&gt; {
    return (
      &lt;div&gt;
        &lt;span&gt;{props.children}&lt;/span&gt;
      &lt;/div&gt;
    )
  }
  
  export default TestComp
  
  
  const currentExports = __react_refresh_utils__.getModuleExports(module.id);
  __react_refresh_utils__.registerExportsForReactRefresh(currentExports, module.id);
  
  if (module.hot) {
    const isHotUpdate = !!module.hot.data;
    const prevExports = isHotUpdate ? module.hot.data.prevExports : null;
  
    if (__react_refresh_utils__.isReactRefreshBoundary(currentExports)) {
      module.hot.dispose(
        /**
         * A callback to performs a full refresh if React has unrecoverable errors,
         * and also caches the to-be-disposed module.
         * @param {*} data A hot module data object from Webpack HMR.
         * @returns {void}
         */
        function hotDisposeCallback(data) {
          // We have to mutate the data object to get data registered and cached
          data.prevExports = currentExports;
        }
      );
      module.hot.accept(
        /**
         * An error handler to allow self-recovering behaviours.
         * @param {Error} error An error occurred during evaluation of a module.
         * @returns {void}
         */
        function hotErrorHandler(error) {
          if (
            typeof __react_refresh_error_overlay__ !== 'undefined' &amp;&amp;
            __react_refresh_error_overlay__
          ) {
            __react_refresh_error_overlay__.handleRuntimeError(error);
          }
  
          if (typeof __react_refresh_test__ !== 'undefined' &amp;&amp; __react_refresh_test__) {
            if (window.onHotAcceptError) {
              window.onHotAcceptError(error.message);
            }
          }
  
          __webpack_require__.c[module.id].hot.accept(hotErrorHandler);
        }
      );
  
      if (isHotUpdate) {
        if (
          __react_refresh_utils__.isReactRefreshBoundary(prevExports) &amp;&amp;
          __react_refresh_utils__.shouldInvalidateReactRefreshBoundary(prevExports, currentExports)
        ) {
          module.hot.invalidate();
        } else {
          __react_refresh_utils__.enqueueUpdate(
            /**
             * A function to dismiss the error overlay after performing React refresh.
             * @returns {void}
             */
            function updateCallback() {
              if (
                typeof __react_refresh_error_overlay__ !== 'undefined' &amp;&amp;
                __react_refresh_error_overlay__
              ) {
                __react_refresh_error_overlay__.clearRuntimeErrors();
              }
            }
          );
        }
      }
    } else {
      if (isHotUpdate &amp;&amp; __react_refresh_utils__.isReactRefreshBoundary(prevExports)) {
        module.hot.invalidate();
      }
    }
  }
  </code></pre>