Getting source maps to work

JavaScript
1

Hi,

I’m compiling Kotlin to JS using version 1.2.21 and my project is organised using Maven.

I’ve enabled to source maps generation in the maven plugin compiler and I’m using maven to compile my kotlin to js.

I’ve turned on source maps in the browser.

I’ve created an HTML file at root level in my maven module which points to the compiled js files residing in target/js

However when I try to open my kotlin file main.kt in the browser then it’s blank. See attached pictures.

myapp%20map
myapp%20map898×464 37.3 KB

As you can see the browser detects the Kotlin source maps but not my application’s source map.
kotlin%20map
kotlin%20map902×756 149 KB

I’m opening the HTML file from IntelliJ, which opens the file in my browser on a URL like this:
http://localhost:63342/kotlinweb/pure-kotlin/index.html?_ijt=d3mbfpeq41htniccugtrkkb3a8

Has anyone this experience? And know if it’s a bug somewhere?

1 Like
2

@jvskriubakken please create an issue with a sample project if possible.

3

Looks like you/we have an issue with paths, you can try to workaround it by inlining all sources to .map file with setting sourceMapEmbedSources to “always” (see https://kotlinlang.org/docs/reference/using-maven.html#attributes-specific-for-js)

1 Like
4

I’m seeing lots of issues with source maps as well (Kotlin 1.3.30). They work very intermittently, and usually require editing the Kotlin file before proper source maps work for it.

My config is as follows:

targets {
        fromPreset(presets.jvm, 'jvm')
        fromPreset(presets.js,   'js') {
            configure([compilations.main, compilations.test]) {
                tasks.getByName(compileKotlinTaskName).kotlinOptions {
                    metaInfo              = false
                    sourceMap             = true
                    outputFile            = "$project.buildDir.path/js/${project.name}.js"
                    moduleKind            = 'commonjs'
                    freeCompilerArgs      = ["-Xuse-experimental=kotlin.ExperimentalUnsignedTypes"] //, "-Xtyped-arrays"]
                    sourceMapEmbedSources = "always"
                }
            }
        }
    }

I also see that the main.bundle.js.map file isn’t well formed when opened in IntelliJ. This is apparent b/c the drop-down in the visualizer tab has files labeled with question marks. These files are the ones that aren’t viewable in the browser.

5

Using 1.3.50 I too experience this exact problem. Is it being fixed? Is there something to do to fix it?

In Gradle I already have:
kotlinOptions.sourceMap = true
kotlinOptions.sourceMapEmbedSources = “always”

And in Webpack I have:
devtool: ‘inline-source-map’,
module: {
rules: [
{
test: /.js$/,
loaders: [“source-map-loader”],
enforce: “pre”
},

All the files are there in chrome debug. But they are empty.

EDIT:
The problem arise sometimes, but can be fixed with a clean. Don’t know what cause it, but at least we can debug.

6

If it happens indeterministic then you should try disabling parallel compilation of kotlinjs in your gradle.

This solved it in our project.

1 Like