When building my React application, the browserPro...

# react

[Dirk]

When building my React application, the browserProductionWebpack task returns an error message. Does anyone have an idea what could be the problem here?

I'm using Gradle 7.4.1 (problem also occurs with 7.4 and 7.3.3) and Kotlin 1.6.10 with the current wrappers.

Caused by: java.lang.IllegalStateException: Module parse failed: Unexpected token (83298:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
|         var element_2 = tmp0_iterator_1.next_0_k$();
|         {
>           var tmp = default;
|           $this$invoke.invoke_r3wsxp_k$(tmp, _no_name_provided_$factory_467(element_2));
|         }

        at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:83)
        at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:76)
        at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation(progress.kt:21)
        at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation$default(progress.kt:12)
        at org.jetbrains.kotlin.gradle.internal.ExecKt.execWithErrorLogger(exec.kt:76)
        at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackRunner.execute(KotlinWebpackRunner.kt:31)
        at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack.doExecute(KotlinWebpack.kt:287)
        at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:104)

[iari]

This looks like there is a file type somewhere in your resources folder that webpack doesnt know how to handle - probably something that is not standard.
Its a pitty that the error message doesnt give any details with respect to the file or file type that its referring to.

[iari]

Could it be that there is a file that is not typically served via web - something that isnt any of js, css, html, jpg, svg, gif, png, woff (etc...) ?

[Dirk]

In the src/main/resources folder is only a css folder in which there are two CSS files.

Unfortunately, Gradle does not give any helpful (to me) output even with --info or --stacktrace.

When I search for the line in the build directory, the following JS is found in the output scirpt

_no_name_provided__501.prototype.invoke_wu1lm5_k$ = function ($this$invoke) {
    $this$invoke.onChange = _no_name_provided_$factory_466(this._$filterListeErstellen_4);
    {
      var tmp0_forEach_0 = plus(listOf_0(''), sorted(this._$props_33.fachgebiete));
      var tmp0_iterator_1 = tmp0_forEach_0.iterator_0_k$();
      while (tmp0_iterator_1.hasNext_0_k$()) {
        var element_2 = tmp0_iterator_1.next_0_k$();
        {
          var tmp = default;
          $this$invoke.invoke_r3wsxp_k$(tmp, _no_name_provided_$factory_467(element_2));
        }
      }
    }
  };

The code for this should be the following (A dropdown is created).
Of course this is all stored normally in the source code and not in other files.

select {
  onChange = { _, _ -> filterListeErstellen() }

  (listOf("") + props.fachgebiete.sorted()).forEach {
      option {
          value = it

          +it
      }
  }
}

[Dirk]

Testwise I have updated to Kotlin version 1.6.20-M1 but I still get the error that the line "var tmp = default;" is a problem...

Execution failed for task ':browserProductionWebpack'.
> Module parse failed: Unexpected token (5820:16)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
  |     return function ($this$invoke) {
  |       $this$invoke.onChange = Filterung$lambda$lambda$lambda$lambda$lambda$lambda$lambda_1($filterListeErstellen);
  >       var tmp = default;
  |       $this$invoke.invoke_pbaxif_k$(tmp, Filterung$lambda$lambda$lambda$lambda$lambda$lambda$lambda_2());
  |       var tmp0_forEach_0 = sorted($props.fachgebiete);

[iari]

I am really not at all understanding any of the js code generation and am not an expert on ES specs... but this looks strange
I don't understand why the default keyword should be there in that spot....

[Dirk]

Thank you very much for the support.

I had to search for quite a long time, but now I have found the culprit. I had taken a code snippet to migrate to the new api without questioning it and the example contained the annotation @JsName("default"). I had not adjusted or removed that.That's where the tmp = default seemed to have come from.