Gatsby: I'm unable to import html/markdown files into a React component.

[alisonjoseph]

I'm unable to import html/markdown files into a React component.

Trying to do something like this with either .html or .md files

const htmlFile = require(carbon-components/html/accordion/accordion.html);

and getting the following error

Do I need to modify the webpack config somehow to make this work or is there a better way?

Module parse failed: /Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/carbon-components/html/accordion/accordion.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/Users/alisonjoseph/Projects/_carbon/carbon-website-gatsby/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)

 @ ./src/components/ComponentCodePage/ComponentCodePage.js 41:19-77

[zauni]

Hi @alisonjoseph
you're right, there is no webpack loader defined to import html files. In v2 of gatsby, the loaders are defined here

If you want to use the official html loader or a markdown loader you can read here how to use it with gatsby: https://next.gatsbyjs.org/docs/add-custom-webpack-config/

[alisonjoseph]

Thanks for pointing me in the right direction, got it working 😸

exports.onCreateWebpackConfig = ({
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.md$/,
          loaders: ['html-loader', 'markdown-loader'],
        },
        {
          test: /\.html$/,
          loader: 'html-loader',
          options: {
            minimize: false,
          },
        },
      ],
    },
  })
}

[zauni]

Perfect 👍