Unable to import external module to KotlinJS project

JavaScript
1

I’m new to KotlinJS and to dig into the main concepts I started my project based on GitHub - Kotlin/full-stack-web-jetbrains-night-sample: Full-stack demo application written with Kotlin MPP official repo.

Upon it, I tried to change the existing UI by adding a calendar view on the page (based on react-day-picker). I broke a pair of walls and iteratively came to an issue I don’t know how to solve. Here is the “event log”:

  1. I extended build.gradle.kts with:

implementation(npm("react-day-picker", "7.4.8"))

  1. I created .kt files for Module, Props, etc + view. Here is JS package declaration:

     @JsModule("react-day-picker/src/DayPicker")
 private external object DayPicker {
     val DayPicker: RClass<CalendarProps>
 }
 ...
 fun RBuilder.calendar(/* user: UserCardModel, */ handler: RHandler<CalendarProps> = {}) {
     DayPicker.DayPicker {
         handler()
     }
 }

and view:

fun RBuilder.calendarView(/* user: User ,*/ builder: DIVBuilder = {}) {
    styledDiv {
        calendar()
        builder()
    }
}

  1. I added the new component into the application view by simply inserting calendarView() into the structure.

  2. The first build error:

     Module parse failed: Unexpected token (18:12)
 File was processed with these loaders:
  * ../../node_modules/source-map-loader/dist/cjs.js
 You may need an additional loader to handle the result of these loaders.
 |
 | export class DayPicker extends Component {
 >   dayPicker = null;
 |

  3. It was solved by importing babel loader via Gradle and creation of .js file in webpack.config.d:

     // wrap is useful, because declaring variables in module can be already declared
 // module creates own lexical environment
 ;(function (config) {
     const path = require("path");
     config.module.rules.push(
         {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: "babel-loader"
         }
     );
 })(config);

    implementation(npm("babel-core", "6.26.3"))
    implementation(npm("babel-loader", "7.1.5"))
    implementation(npm("babel-preset-env", "1.7.0"))
    implementation(npm("babel-preset-react", "6.24.1"))
    implementation(npm("babel-preset-es2015", "6.24.1"))

  1. And then I got:

    Error: Couldn't find preset "env" relative to directory

.babelrc content is following:

{
    "presets":["env", "react", "es2015"]
}

I tried various alternatives of preset names but all of them led to the same error.
Where did I turn wrong?

2

By removal of .babelrc file in the project root I finally made it. All babel-related gradle imports are not needed as well.