Problem loading source maps in blockly-webpack sample

[Mark Friedman]

I am trying to test a plugin that I've been working on.   Testing it in the environment set up by @blockly/create-package is working fine, but I'm also trying to test it by using it as a developer might.  The simplest way I could think of was to try and add my plugin to something like the blockly-webpack sample.  I'm having problems with my plugin when testing it in that way but debugging it is hampered by the fact that the source maps don't appear to be working properly.  Here are the errors that I'm seeing:

12:33:31.886 DevTools failed to load source map: Could not load content for webpack:///node_modules/blockly/blockly_compressed.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
12:33:31.886 DevTools failed to load source map: Could not load content for webpack:///node_modules/blockly/blocks_compressed.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
12:33:31.887 DevTools failed to load source map: Could not load content for webpack:///node_modules/blockly/javascript_compressed.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Any ideas on how to get the source maps to work correctly?

Note that I'm using the blockly-webpack sample by running 'npm start' and going to localhost:3000 in my Chrome browser and the above errors are being generated even when I'm not importing and using my plugin.

Thanks in advance.

-Mark

[Sam El-Husseini]

Hey Mark, 

If you want to load sourcemaps in webpack, you'll need to use source-map-loader to load source maps from npm pacakges.

We are doing this in our Blockly plugins webpack config, you can see how that's configured here:

https://github.com/google/blockly-samples/blob/master/plugins/dev-scripts/config/webpack.config.js#L115

Cheers,

Sam

[Mark Friedman]

Thanks, Sam!  I guess I would have noticed this if I had compared the webpack.config.js files for the Blockly plugin tester and the blockly-webpack sample.  In any case, would it make sense to do a PR to add the source-map-loader to the blockly-webpack webpack.config.js file or are you just trying to keep it lean and minimal?

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/e4c54342-7e13-488b-9dba-98803a27e554n%40googlegroups.com.

[Mark Friedman]

After futzing around a bit, I couldn't get source map loading for Blockly files or my plugin to work in my version of the blockly-webpack sample.  I think I need a little hand-holding here as to what to do.  I tried just adding a modules entry in the webpack.config.js file for my blockly-webpack sample as follows, but it did not work (i.e. I didn't get any errors but none of the source files were available in my Chrome debugger):

    module: {
        rules: [
            {
                // test: /(blockly\/.*\.js)$/,
                test: /\.js$/,
                enforce: "pre",
                // use: ["source-map-loader"],
                use: [require.resolve('source-map-loader')],
            },
        ],
    },

You can see that I tried a couple of different things, based on the source that Sam linked to and on the Webpack documentation, neither of which worked.

-Mark