source maps about kotlin-frontend-plugin HOT 8 OPEN

I got it to work by adding a little more configuration to webpack inside the webpack.config.d folder

config.module.rules.push(
    {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre'
    })
config.devtool= "source-map"

You may want to try to use "eval-source-map" or "inline-source-map" for the devtool value in non production environments.The "source-map" option in chrome may require you to reopen Chrome dev console. Sometimes when reloading the page the source maps information got lost in Chrome. That seems to be related to the size of the source map files since once I changed the code above to only include my core application I no longer lost source map information when reloading the page.

I'm using a pretty bare-bones gradle configuration for the frontend plugin using mostly default paths

kotlinFrontend {
    sourceMaps = true
    npm {
        dependency("react", "16.5.2")
        dependency("react-dom", "16.5.2")
        dependency("toastr", "2.1.4")
    }
    webpackBundle {
        bundleName = "app"
        sourceMapEnabled = true
    }
}

compileKotlin2Js {
    kotlinOptions.moduleKind = 'umd'
    kotlinOptions.sourceMap = true
    kotlinOptions.sourceMapEmbedSources = "always"
}

I didn't see any changes from having sourceMapEnabled = true or omitting it
This is also working as a multiplataform project with a jvm backend, common module and frontend.

Edit:
I started having some issues occasionally with my main application files showing up blank in the browser dev tools. Turns out that adding the option kotlinOptions.sourceMapEmbedSources = "always" solves that problem. Updated the code above with it, you may need to do a clean build after that.

from kotlin-frontend-plugin.

I'm struggling to make the webpack code point to original kotlin files. When I build the code, the source mappings in the webpack bundle just point to the JS files, and NOT the original kotlin files, which makes debugging extremely difficult. Is this known? Is there some trick to making this work in Chrome?

from kotlin-frontend-plugin.

There should be *.js.map files in build/js. I can see source maps work well in full stack example.
Check the following:

• kotlin is configured to generate source maps

compileKotlin2Js {
    kotlinOptions.sourceMap = true

• source maps are enabled for frontend plugin

kotlinFrontend {
    sourceMaps = true

from kotlin-frontend-plugin.

I believe that the plugin should setup compiler options as well so user shouldn't enable source maps twice

from kotlin-frontend-plugin.

This still seems to be an issue. It looks like this is caused by the combination of the kotlin to js compiler with webpack. The compiler compiles kotlin to JS and provides source maps for this. Then webpack mangles the JS into a bundle and provides source maps from the bundle to the original JS (which was the output of the Kotlin compiler). So in the browser you only get back what was the output of the kotlin compiler, not the original Kotlin source code.

from kotlin-frontend-plugin.

Nice one, this worked for me as well, thanks for sharing!

from kotlin-frontend-plugin.

Thank you. This config in webpack.config.d is missing in documentation.

from kotlin-frontend-plugin.

This helped, but did anyone manage to get karma loading the sourcemaps for the unit-tests?

from kotlin-frontend-plugin.