Why does webpack try to parse my readme.md files

Question

Webpack throws errors shown below. The build seems to work, still, what gives?

WARNING in ./{snip}/readme.md Module parse failed: C:{snip}\readme.md Unexpected token (1:7) You may need an appropriate loader to handle this file type.

I could not find any way to ignore files. I don't even know why it is trying to render those files.

Here are some parts of my webpack settings file:

module: {
    loaders: [
        {test: /\.hb.html$/, loader: "handlebars-loader/?helperDirs[]=" + __dirname + "/src/handlebarsHelpers"},
        { test: /\.tsx?$/, loader: "ts-loader?" + JSON.stringify({
            transpileOnly: true
        })}
    ]
},

Entry:

entry: "./src/entry.ts",

and

resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],

I tried excluding .md files in typescript config file, also didn't work.

Mogador

Is it related to the empty extension in extensions? I tried removing that, but then it won't load my entry module. – Mogador

You do not have a loader for *.md files. Webpack interprets all files as JavaScript, Markdown is not JavaScript. Perhaps use the "raw-loader" for md files? – Clostridium

@Clostridium But I don't want to load them at all. – Mogador

Is there an "import 'readme.md'" file somewhere in your code? – Clostridium

There was a query expression as in the answer, that caused webpack to load everything. – Mogador

Answer 1

The problem wasn't the settings, it was that my code had query expressions like these:

exports.getModule = function (moduleName) {
    var mod = require('./' + moduleName + '');
    return mod;
};

That made webpack try to load all the files, not only the ones on the entry point dependency tree.

Mogador

Answer 2

The accepted answer correctly describes the problem, but not the solution. I got this error while migrating from a non-bundled server to a bundled server.

For me, this was the problem:

  // Load the plugin.
  allMods[modName] = require(`../myDir/${modFile}`);

Solution 1 - Don't bundle the files

The solution for me was to prevent webpack from trying to import the file at build time, which it cannot do since it can't know the contents of the variable. This does mean though that your dynamic imports won't get bundled (which in my case was precisely the point because it's for a video game modding system).

Example:

  // Load the plugin.
  allMods[modName] = eval('require')(`../myDir/${modFile}`);

Solution 2 - Bundle the files using webpack's require.context()

Alternatively, if you do need the files bundled, you may also look at require.context() (docs, explanation).

It's quite customisable, this is one way to do it:

const allMods = {};

function importAll(fileContext) {
  fileContext.keys().forEach((key) => {
    // Note: This assumes we're using default rather than named exports. I
    // don't know how named exports would work as I've not tried that myself.
    allMods[key] = fileContext(key).default;
  })
}

importAll(require.context('./myDir1', true, /\.js$/));
importAll(require.context('./myDir2', true, /\.js$/));

// All imported files are now stored in allMods.
// Their keys are their repsective file names including their extensions.

Note that you'd place that function inside your application where you'd normally write your usual require.

Johannisberger