Search code examples
webpacksummernotewebpack-dev-server

WebPack includes entire folder (mysterious ^\.\/.*$ added) with Summernote

Not sure why, but when importing Summernote into a build via WebPack, WebPack ends up pulling in the entire dist folder and thus complains that the fonts/images etc inside that folder are not valid JS.

From the webpack output, you can see that it pulls in summernotes dist js file as expected (from finding a var summernote = require('summernote'); in a source file in my application).

  [149] ./~/summernote/dist/summernote.js 200 kB {1} [built]
  [150] ./~/summernote/dist ^\.\/.*$ 4.93 kB {1} [built] [5 warnings]

What I don't understand is where chunk 150 comes from, it's a regex that will then match every item in the dist folder.

WebPack has a very basic configuration, and all other items being imported function as expected.

An example of one of the many warnings:

WARNING in ./~/summernote/dist/font/summernote.ttf
Module parse failed: /<project>/node_modules/summernote/dist/font/summernote.ttf Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/summernote/dist ^\.\/.*$

Where does chunk 150 come from, what is adding the ^\.\/.*$ requirement.

Solution

  • When webpack is resolving a module, via require('expression'), there will be an automatically created context. There are three types of automatically created contexts:

    • exprContext: An expression as a dependency (i. e. require(expr))
    • wrappedContext: An expression plus pre- and/or suffixed string (i. e. require("./templates/" + expr))
    • unknownContext: Any other unparsable usage of require (i. e. require)

    And the unkownContext has a default Regular Express will try to match files: ^\.\/.*$; So, for some reason, your project contains a unparseable require. When webpack is packing it, it will parse all files under a folder and try to match the require.

    Although I still do not know which folder it will loop through, this behavior will cause your problem.

    The possible solution: Disable the unknown require handling.

    javascript module: { // Disable handling of unknown requires unknownContextRegExp: /$^/, unknownContextCritical: false } Webpack Document for refer

    After the modification, my webpack process went through without problem. You can try it.

    Update

    Although above configuration can make the webpack go through, however, problem still exists. Unparseable require will cause problem in your runtime, it's better to find that incorrect require and make it right.

    About the unparseable require in my case:

    CSV.js a third party js library from NPM, it contains a following statement:

    var s = new require('stream').Transform({objectMode: true});

    webpack compiles it to 

    var s = new __webpack_require__(227)('stream').Transform({ objectMode: true });

    Webpack doing static extraction based on require, which treats the require having no argument.

    Webpack thinks the code is 

    var some = require;
var s = new some('stream').Transform({ objectMode: true });

    while it should be 

    var some = require('stream')
var s = new some.Transform({ objectMode: true })

    So, i rewrite this part code to 

    var stream = require('stream')
var s = new stream.Transform({ objectMode: true })

    Problem finally solved.

    So, find the invalid require, make it right is your only solution.