https://kotlinlang.org logo
#javascript
Title
# javascript
c

CLOVIS

09/30/2023, 4:18 PM
I'm getting the following error when trying to run a JS project with `jsBrowserDevelopmentRun`:
Copy code
Uncaught TypeError: Cannot read properties of undefined (reading 'kotlin-kotlin-stdlib-js-ir')
It's not crashing on the JS file generated by the project itself, so it definitely finds it. The
kotlin-kotlin-stdlib-js-ir.js
file does exist in
build/js/packages/<module>/kotlin
, so I don't understand what's going wrong.
a

Abdraouf SABETE

10/01/2023, 8:26 AM
I think you’re trying to access a property of an object that hasn’t been defined yet. In your case, it seems like the
kotlin-kotlin-stdlib-js-ir
is not being recognized at the time of execution.
a

Artem Kobzar

10/01/2023, 11:37 AM
@Ilya Goncharov [JB] could it be a problem with the build task?
c

CLOVIS

10/01/2023, 2:01 PM
@Abdraouf SABETE
In your case, it seems like the
kotlin-kotlin-stdlib-js-ir
is not being recognized at the time of execution.
Sure, but why?
i

Ilya Goncharov [JB]

10/03/2023, 12:13 PM
Hi, usually there is no property
kotlin-kotlin-stdlib-js-ir
in js files. It can be required, but it should be stored to property like
kotlin_kotlin
. Could you please share header of your main file Something like that
Copy code
(function (root, factory) {
  if (typeof define === 'function' && define.amd)
    define(['exports', './kotlin-kotlin-stdlib.js'], factory);
  else if (typeof exports === 'object')
    factory(module.exports, require('./kotlin-kotlin-stdlib.js'));
  else {
    if (typeof this['kotlin-kotlin-stdlib'] === 'undefined') {
      throw new Error("Error loading module 'hello:app'. Its dependency 'kotlin-kotlin-stdlib' was not found. Please, check whether 'kotlin-kotlin-stdlib' is loaded prior to 'hello:app'.");
    }
    root['hello:app'] = factory(typeof this['hello:app'] === 'undefined' ? {} : this['hello:app'], this['kotlin-kotlin-stdlib']);
  }
}(this, function (_, kotlin_kotlin) {
c

CLOVIS

10/03/2023, 12:26 PM
Copy code
(function (root, factory) {
  if (typeof define === 'function' && define.amd)
    define(['exports', './kotlin-kotlin-stdlib-js-ir.js'], factory);
  else if (typeof exports === 'object')
    factory(module.exports, require('./kotlin-kotlin-stdlib-js-ir.js'));
  else {
    if (typeof this['kotlin-kotlin-stdlib-js-ir'] === 'undefined') {
      throw new Error("Error loading module 'Material3-Tailwind-demo'. Its dependency 'kotlin-kotlin-stdlib-js-ir' was not found. Please, check whether 'kotlin-kotlin-stdlib-js-ir' is loaded prior to 'Material3-Tailwind-demo'.");
    }
    root['Material3-Tailwind-demo'] = factory(typeof this['Material3-Tailwind-demo'] === 'undefined' ? {} : this['Material3-Tailwind-demo'], this['kotlin-kotlin-stdlib-js-ir']);
  }
}(this, function (_, kotlin_kotlin) {
Reproduction: • https://gitlab.com/opensavvy/ui/compose-material3-tailwind.git • branch:
1-initialize
(it's just a hello-world at this point)
🙏 1
i

Ilya Goncharov [JB]

10/03/2023, 4:58 PM
Ok, now I get it. So the problem is
index.html
First of all, it does not need
type="module"
. it is necessary only when you are working with ES modules. But in fact, when you run
jsBrowserDevelopmentRun
, webpack does its work, and bundle all files into standard JS presentation (not es modules) And one more, webpack output file by default is just
<name>.js
, in this case -
demo.js
,
Material3-Tailwind-demo.js
is compiler output, so it does not suit. So in fact, we have possibility to improve the behaviour from Gradle plugin side, but for now, we need to predict webpack output file name, and put this filename to
index.html
So this
index.html
has to help
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Material3 for Compose HTML</title>

	<link href="style.css" rel="stylesheet">
</head>
<body>
<!--suppress HtmlUnknownTarget The file is valid at runtime, but IDEA can't see it -->
<script src="demo.js"></script>
</body>
</html>
c

CLOVIS

10/03/2023, 5:45 PM
> First of all, it does not need
type="module"
Now, that's news to me. I've been using Kotlin/JS for years now, and I have always used
type="module"
🤔 Did this change semi-recently? Have I always been running the output of the compiler directly without using Webpack? 😅
I can confirm that it does work with your changes.