Can't import Kotlin JS module in Rollup/Svelte


#1

Sorry for yet another JS question, but I’ve been banging my head against the wall on this for a couple hours.

Svelte is a framework for SPAs vaguely like React, for the sake of this question. Svelte components are .html files that can contain JS. I thought it would be neat if these JS modules could consume Kotlin generated in the same module. I’m also using Rollup.

I’ve tried every conceivable import statement:

<script>
    import "./myModule";
    import "./my-module";
    import "./myModule.js";
    import "./my-module.js";
</script>

(where my module is actually called my-module)

And various permutations prefixed with ../, but I always get

Error: Could not resolve './my-module' from src\main\svelte\App.html
    at error (C:\Users\[me]\Documents\[project]\[my-module]\node_modules\rollup\dist\rollup.js:3438:30)

or something similar.

Importing build/kotlin-js-dce/main/my-module.js resolves, but doesn’t actually appear to export anything – perhaps because it’s a CommonJS module. Perhaps as a workaround I could invoke Rollup twice (once to convert completely from CommonJS to ESM) but that seems like it should be unnecessary.

A stripped-down version of my rollup.config.js looks like this:

let includePathOptions = {
    include: {},
    paths: ['src/main/svelte', 'src/main/kotlin'],
    external: [],
    extensions: []
};

export default {
  external: ['kotlin'],
  output: {
    format: "iife",
    name: "app",
    sourcemap: true,
    globals: { "kotlin": "kotlin" }
  },
  plugins: [
    includePaths(includePathOptions),
    commonjs(),
    svelte({
      include: ['src/main/svelte/**.html']
    })
  ]
}

But I don’t think this is actually Svelte-related, since the exception comes through Rollup (Svelte is requesting a module from Rollup which apparently can’t be found).

If anyone has gotten this or something like this to work, please let me know! Thanks!


#2

If any packages depend on my-module than my-module has to be packaged inside the node_modules folder with its own package.json config. If my-modules only consumes other node libraries than it can be outside the node_modules folder. You can also try using this if it can’t find your library.


#3

Thanks for the response. It’s not exactly a different module – it’s essentially one module I wrote consuming another module I wrote being processed in the same build process. It seems weird to me to write into my own node_modules a module not coming from package.json, but I suppose I could try that.

I think there’s another bigger problem, though – my KotlinJS refers to Svelte components, too (@JsModule("./App.html")-type things), so while the dependency is really KotlinJS -> App.html+App.js -> KotlinJS, I suspect rollup will just see KotlinJS -> App.html -> KotlinJS.

Basically I’m going to try creating a new Gradle submodule (my-module-lib) that just outputs utility JS and try referencing that. It might work better.


#4

This bit says it all. Your html page lives in a source folder. Kotlin js output is generated in an output folder (in build). What you apparently didn’t do is have proper packaging for the combined project set up. How to do this depends on your build system, but you will likely want to create a module that links the files from various sources together that you then test on.


#5

You’re right, this was a major part of the problem. I ended up solving it like this:

import includePaths from 'rollup-plugin-includepaths';

let includePathOptions = {
    include: {},
    paths: [
        'src/main/svelte',
        'src/main/kotlin',
        'node_modules'
    ],
    external: [],
    extensions: []
};
export default {
  plugins: [
    includePaths(includePathOptions),
  ],
  // ...
};