Fix webpack config errors

[will-jac]

This solves issue #165 by changing the devtool used by webpack to the correct one.

This also solves issue #164 by properly bundling the monaco webworker via changes to the webpack config

[navzam]

@will-jac do you know what it is about eval source maps that causes #165 ?

[will-jac]

Not entirely sure. The change was based on this issue I found, although it may be outdated. This article suggests minification may be the issue, but I'm not sure.

Given that the documentation does not suggest this config, I would hold off from merging this PR. I can do some additional investigation on other options.

[navzam]

Not entirely sure. The change was based on this issue I found, although it may be outdated. This article suggests minification may be the issue, but I'm not sure.

Given that the documentation does not suggest this config, I would hold off from merging this PR. I can do some additional investigation on other options.

Gotcha. I don't mind changing to inline but am curious what the underlying problem is

[navzam]

Also the Monaco issue you're fixing is #163 right? Though it seems #164 also gets fixed by the devtool change

[will-jac]

Also the Monaco issue you're fixing is #163 right? Though it seems #164 also gets fixed by the devtool change

This should fix both, since I think they're manifestations of the same error

[will-jac]

Gotcha. I don't mind changing to inline but am curious what the underlying problem is

There is some discussion here - with the eval flag set, it (DevTools) can't find the sourcemap. So the solution is to not use it or use inlined sourcemaps. This may be why the FetchAPI is failing to load the file.

Let's do some testing!

Working:

• [cheap-][module-]source-map

Not Working:

• (none)
• eval-*

It's odd that not setting the devtool leads to an error - the errors are also different, although the Fetch error is the same:

DevTools failed to load source map: Could not load content for webpack:///node_modules/styletron-react/dist/browser.es5.es.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

This leads me to believe that there could be an error in prod, although I don't see one in the web console.

After all of this, I was thinking that the error could be with our express app not sending the sourcemaps, so I tried running webpack-dev-server, but had the same errors. For now, I think using source-map (which is suggested by the documentation as a config) is probably our best bet.

[navzam]

Sorry @will-jac forgot about this one. So it sounds like any eval- ones are the problem. My only concern about source-map is how slow builds/rebuilds are, since it makes development harder. You're saying cheap-module-source-map works right? That seems to rebuild reasonably fast

[will-jac]

Yes, that's what I would suggest using. You should double-check that it works after all the recent changes to the simulator.

[navzam]

@will-jac sounds good, I'll change that, verify it, and merge this if you're good with that