4

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!

War10ck
  • 12,387
  • 7
  • 41
  • 54
Aksel Gresvig
  • 715
  • 1
  • 9
  • 21
  • It's a dynamic require issue. Short story webpack by default does not support dynamic requires (eg: require(not + 'a' + fixed + path);) However it is possible to use a plugin to teach it how to handle them. See: https://github.com/webpack/webpack/issues/118 and https://github.com/webpack/webpack/search?q=dynamic+require&type=Issues&utf8=%E2%9C%93 – generalhenry Nov 24 '14 at 21:25
  • Since the code is generated by webpack, it's clearly a bug and should be reported on Github. Please also post your config because I assume that it is caused by a specific option. – Johannes Ewald Nov 24 '14 at 21:49
  • Thanks for the info. I agree it's a bug @jhnns, but as shown in the links provided by @generalhenry I'm clearly not the first one to experience this. I've realized that Tabletop has an outdated `request` dependency - I'm forking Tabletop to upgrade it and see how that works out. Will post when finished. – Aksel Gresvig Nov 25 '14 at 09:11

2 Answers2

1

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?

Nodu
  • 11
  • 2
  • I've touched `mime.types` and `node.types` in `/types/`, but this hardly seems the correct approach. – Nodu Dec 03 '14 at 04:33
  • Thanks for info. No, I haven't tried yet. I ended up using Tabletop in my Gulpfile instead of in my client app, which avoided the problems related to webpack. – Aksel Gresvig Dec 04 '14 at 09:06
  • Came here on a vaguely related issue, `plugins.push(new webpack.DefinePlugin({ "global.GENTLY": false }));` fixed it. Superb! – panepeter Nov 16 '19 at 12:01
0

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.

Aksel Gresvig
  • 715
  • 1
  • 9
  • 21