Webpack causes syntax error in bundle output

问题:

I've been struggling for a while now with a problem that I believe is caused by Webpack.

Essentially, I have a Node-based app that I'm bundling up with Webpack to serve to the client (it's a ReactJS based app). The problem occured when I installed the Tabletop NPM package and required it.

When attempting to load the Webpack-created bundle.js in the browser, I get a syntax error:

Uncaught SyntaxError: Unexpected identifier

which is complaining about this line in bundle.js:

target[capName] = __webpack_require__(387)(""path + '/' + name);

After some digging, I discover that this line originates from a line in the Hoek library (which is a sub-dependency of Tabletop):

target[capName] = require(path + '/' + name);

Clearly, Webpack has done something funky here.

I haven't been able to isolate the cause though. Tabletop includes an example of NodeJS usage which I was able to Webpack and run just fine.

I also cloned Hoek and Webpacke'd it without seeing any illegal transformations like the above.

So now, I'm not sure if this is a Webpack, Hoek, or Tabletop issue, that's why I'm posting it here.

I find no related issues, here or on GH.

All help appreciated!

回答1:

Turns out an outdated nested dependency of the hoek package caused this, due to the dynamic require line shown above. This was removed in hoek@2.0.0.

Unfortunately, Tabletop's request dep has an outdated dependency of hawk which again depends on hoek. I forked request and bumped the version, but now I am getting a different error on load in the browser:

Uncaught Error: Cannot find module "net"

net is a core Node module, so I suspect there is something going on here since we're Webpacking serverside JS to run it in the browser. Nevertheless, that is a different issue so I consider the original question here answered..

But I'm still unable to use Tabletop. I might have to Browserify it and use that bundle directly.

回答2:

I've used superagent with some success when adding

plugins.push(new webpack.DefinePlugin({ "global.GENTLY": false })); and node: {__dirname: true}

to webpack's config fixes superagent for use with webpack.

When using the request library, adding the following to webpack's config:

node: {
  "net": "empty"
}

Fixes Uncaught Error: Cannot find module "net".

However, I'm now having issues with the mime library which is a dependency of request: Error: ENOENT, no such file or directory '/types/mime.types'

Aksel, have you had any success fixing request with webpack?