Can't import Kotlin JS module in Rollup/Svelte

JavaScript
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),
  ],
  // ...
};
6

This sounds super interesting! I’m also looking into integrating Svelte with Kotlin/JS. Do you happen to have some example or additional information on your setup available anywhere?

2 Likes
7

Hi, has anyone successfully imported a Kotlin JS module into Svelte?

I have this KMM library that I want to export for both JVM and JS targets. I have a front end that is written using svelte.
When I export my KMM library as a web-pack package and install it using npm, it works when I import it in a javascript file and run that independently from vite, but it fails when I have it imported in some javascript code that is run through vite.
I suspect it has something to do with an unsupported module format by vite; apparently, it tries to convert umd/commonjs modules to ESM. Could this step fail?

I have tried many different ways to export the library code. But to be honest, I have no idea what I am doing most of the time. I know next to nothing about the javascript ecosystem, I mainly want to just export my KMM code and have it useable in the frontend.
If someone could point me in the right direction, that would be greatly appreciated :slight_smile: