如何在 reactjs 组件中使用使用 scalajs 导出的函数？

Question

I have tried exporting some functions to the main.js file in scalajs using @JSExportTopLevel annotation, as explained in the Export Scala.js APIs to JavaScript scalajs documentation and building the main.js as explained here .

This results in main.js from which I am able to make use the functions exported in the scalajs code.

Now I want to use these exported functions in my reactjs components. For this I tried following steps:

1. Copy the main.js file in the public folder
2. Include the javascript file in the index.html , like so:

<script type="text/javascript" src="./main.js"></script>

Now, if I load the app in the browser and try to use these functions in the browser console, it works fine:

console.log(foo());

But I am not the utilise these functions in reactjs components:

import React from 'react';

const RuleEditor = () => {

    console.log(foo());

    return (
        <>
        </>
    );
};

export default RuleEditor;

I always get the following compilation error:

foo is not defined  no-undef

I do understand that reactjs is not able to recognise the function as I haven't really specified where to get that function from but I am not really sure how to achieve it. I have gone to couple of other stackoverflow posts where some suggestions where to look for it in window object but I didn't find those functions there.

Please suggest a proper way to make use of functions exported from scalajs in reactjs components. TIA.

Answer 1

Exporting objects/classes/functions as top level exports put them in Javascript global scope.

class Foo(val x: Int) {
  @JSExport
  def square(): Int = x*x // note the (), omitting them has a different behavior
  @JSExport("foobar")
  def add(y: Int): Int = x+y
}

You can utilise these functions in the scripts embedded in html or in scalajs as shown here .

But if you need to use these functions in a nodejs app, you need to export these functions from a module. We need to add the following in the build.sbt . Read more here .

scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.ESModule) }

Now, we can make use of the exported functions in a nodejs app by importing them like so:

import { square, add } from './main'

If you wish to export these functions from a module named other than main , provide module id for each exported function like so:

class Foo(val x: Int) {
  @JSExport("square", "my-math")
  def square(): Int = x*x // note the (), omitting them has a different behavior
  @JSExport("foobar", "my-math")
  def add(y: Int): Int = x+y
}

and use it like so:

import { square, add } from './my-math'