webpack + octicons: how to handle/ignore "main": "readme.md" in package.json

Question

How do you tell webpack to ignore the main property of the package.json when it's invalid/unnecessary?

Here's an example: GitHub's octicons package has a readme.md for a main:

{
  "name": "octicons",
  "version": "3.5.0",
  "description": "GitHub's icon font",
  "main": "README.md",  <-------------------------------------
  "repository": {
    "type": "git",
    "url": "https://github.com/github/octicons.git"
  },
  ...
}

https://github.com/github/octicons/blob/master/package.json#L5

Causes this error:

ERROR in ./~/octicons/README.md
Module parse failed: C:\repos\foo\node_modules\octicons\README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp.raise (C:\repos\foo\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.getTokenFromCode (C:\repos\foo\node_modules\acorn\dist\acorn.js:2813:8)
    at Parser.pp.readToken (C:\repos\foo\node_modules\acorn\dist\acorn.js:2508:15)
    at Parser.pp.nextToken (C:\repos\foo\node_modules\acorn\dist\acorn.js:2500:71)
    at Parser.parse (C:\repos\foo\node_modules\acorn\dist\acorn.js:1615:10)
    at Object.parse (C:\repos\foo\node_modules\acorn\dist\acorn.js:882:44)
    at Parser.parse (C:\repos\foo\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\repos\foo\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\repos\foo\node_modules\webpack-core\lib\NormalModuleMixin.js:31
0:10)
    at nextLoader (C:\repos\foo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
 @ ./src ^\.\/.*$

The octicons package is referenced in only one spot- my main.js (entry point):

import '../node_modules/octicons/octicons/octicons.css';

You could try to define a [resolve.alias](https://webpack.github.io/docs/configuration.html#resolve-alias) against that file. I think that could sort it out. — Juho Vepsäläinen, Apr 30 '16 at 14:31

score 5 · Accepted Answer · answered Apr 30 '16 at 11:39

I'm not sure if this is the correct solution but it gets me past the error. If someone posts a better solution I'll gladly accept and upvote.

Install the null-loader: npm install --save null-loader

Send all .md files to the null loader:

webpack.config

  ...
  module: {
    loaders: [
      ...
      { test: /\.md$/, loader: 'null' }
    ]
  },
  ...

webpack + octicons: how to handle/ignore "main": "readme.md" in package.json

1 Answers1