I want to import a JS file as a string, so I can render it as text in a code block.

I import it like this:

import TestComp from './TestComp.js?raw'

Then in my gatsby-node.js I set the files that have resourceQuery of raw to have a type of 'asset/source', and then I exclude the raw assets from being processed with resourceQuery: { not: [/raw/] }:

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig()

  config.module.rules = [
    ...config.module.rules.map(rule => {
      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'
        },
      ]
    }
  })
}

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).

$RefreshRuntime$ = require('/Users/bob/web/foo/node_modules/react-refresh/runtime.js');
$RefreshSetup$(module.id);

import React from 'react'

const TestComp = props => {
  return (
    <div>
      <span>{props.children}</span>
    </div>
  )
}

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' &&
          __react_refresh_error_overlay__
        ) {
          __react_refresh_error_overlay__.handleRuntimeError(error);
        }

        if (typeof __react_refresh_test__ !== 'undefined' && __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) &&
        __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' &&
              __react_refresh_error_overlay__
            ) {
              __react_refresh_error_overlay__.clearRuntimeErrors();
            }
          }
        );
      }
    }
  } else {
    if (isHotUpdate && __react_refresh_utils__.isReactRefreshBoundary(prevExports)) {
      module.hot.invalidate();
    }
  }
}