Ignoring markdown files

[apennell]

I'm having trouble ignoring markdown files while compiling. I'm using [React Styleguidist] within my Rails + React app to build and document a component library, which means I have .md files in the directories with my components that Webpack is compiling. I'm getting this error when running webpack-dev-server:

WARNING in ./app/javascript/components/ComponentLibrary/Docs/Intro.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

I've tried making various changes to my Webpack/Webpacker configuration, largely based on issue #322.

• I added ignore-loader and tried creating config/webpack/loaders/md.js and config/webpack/loaders/ignores.js and added to each:

  module.exports = {
    test: /.md~$/,
    loader: 'ignore-loader',
    exclude: [
      /(~$)/
    ]
  }
  

  I tried it with the loader line only, the exclude block only, and with both together, but none worked
• I saw other mentions of config/webpack/environment.js, which I didn't have, so I added that file with the above code in it

Is there something else I can do in my config to ignore the markdown files when webpack compiles? It's only a warning and doesn't break my code, but I don't want that warning to show always and forever :/

[gj]

Hi @apennell,

Which version of Webpacker are you using?

You shouldn't need two different configurations of the ignore-loader (in your md.js and ignores.js files). Also, it appears that your test pattern (/.md~$/) will match files ending in any character (the unescaped .) followed by md~. Unless your Markdown files end with a tilde, I don't think that's going to catch the ones you're looking for. Moreover, the exclude that you've specified would seem to drop all matches ending in a tilde, so even if you were trying to match files ending in md~ I think that would likely cancel out the test matcher. 🙂 Finally, I'm not sure where your Webpack configuration exists, but, unless you have a mechanism that automatically sets up loaders defined in your config/webpack/loaders/ directory, you might have to explicitly let Webpacker know about the loader.

In the current stable version (3.5.3), config/webpack/environment.js is the main configuration file that all of the environment-specific files (e.g., development.js, test.js, production.js, etc.) incorporate.

The three steps to ignoring all Markdown files ending in .md with the current stable version of Webpacker are as follows:

1. Add the ignore-loader package with yarn add ignore-loader.
2. Create a module for the ignore-loader's configuration:

   // config/webpack/loaders/ignore.js
   module.exports = {
     test: /\.md$/,
     loader: 'ignore-loader'
   }

3. Add the following two lines to config/webpack/environment.js:

   // This line is added by the Webpacker installation process
   const { environment } = require('@rails/webpacker')
   
   const ignoreLoader = require('./loaders/ignore') // Add this line
   environment.loaders.append('ignore', ignoreLoader) // Add this line

[apennell]

Thanks @gj ! That's the best config help response I've ever gotten--changed the regex as you outlined, removed the md.js file I had added, and updated environment.js you post and it worked perfectly.

We're currently on [email protected], so will look into updating soon. Thanks again!