8

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.

5
  • Is it related to the empty extension in extensions? I tried removing that, but then it won't load my entry module.
    – RSinohara
    Commented May 23, 2017 at 10:32
  • 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?
    – Wazner
    Commented May 23, 2017 at 10:53
  • @Wazner But I don't want to load them at all.
    – RSinohara
    Commented May 23, 2017 at 11:08
  • Is there an "import 'readme.md'" file somewhere in your code?
    – Wazner
    Commented May 23, 2017 at 11:11
  • There was a query expression as in the answer, that caused webpack to load everything.
    – RSinohara
    Commented May 23, 2017 at 11:19

2 Answers 2

7

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.

0
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.