https://kotlinlang.org logo
Join Slack
Powered by
Hi I am having issues with the latest RC version a...
# javascript
d
Hi I am having issues with the latest RC version and WebPack. I am receiving the error: 
Uncaught ReferenceError: React is not defined
When I look at the package.json that is produced, the appropriate package "react" is present in there. And in the browser it "look like" the package is loaded there also. I'm also using the new IR compilation
t
Do you use distribution?
d
@turansky Excuse my ignorance. I dont follow what you are asking. I can supply my build.gradle.kts if that helps
t
If you need independent js - use dist from 
build/distributions
d
I think I follow now. I am actually getting this error when I run the 
jsBrowserDevelopmentRun
gradle task
i
Could you please provide your build script?
d
Copy code
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack

plugins {
    kotlin("multiplatform") version "1.4.0-rc"
    kotlin("plugin.serialization") version "1.4.0-rc"

    id("io.quarkus") version "1.6.0.Final"
    id("org.jetbrains.kotlin.plugin.allopen") version "1.3.41"
    id("com.adarshr.test-logger") version "2.0.0"
    id("io.gitlab.arturbosch.detekt") version "1.10.0"
    id("com.github.jk1.dependency-license-report") version "1.13"
}
group = "com.nanthealth"
version = "1.0-SNAPSHOT"

val quarkusPlatformGroupId: String by project
val quarkusPlatformArtifactId: String by project
val quarkusPlatformVersion: String by project
val quarkusPluginVersion: String by project
val kotlinVersion: String by project
val kotlinxVersion: String by project
val kotinResultVersion: String by project
val kotlinxCoroutinesTestVersion: String by project

val kotlinJsExtensionsVersion = "1.0.1-pre.109-kotlin-1.4.0-rc" // M3?
val kotlinReactVersion = "16.13.1-pre.109-kotlin-1.4.0-rc"
val kotlinReactDomVersion = "16.13.1-pre.109-kotlin-1.4.0-rc"
val kotlinReactRouterDomVersion = "5.1.2-pre.109-kotlin-1.4.0-rc"
val kotlinReduxVersion = "4.0.0-pre.109-kotlin-1.4.0-rc"
val kotlinReactReduxVersion = "5.0.7-pre.109-kotlin-1.4.0-rc"
val kotlinCssVersion = "1.0.0-pre.109-kotlin-1.4.0-rc"
val ktorVersion = "1.3.2-1.4.0-rc"
val kotlinJsSerializationVersion = "1.0-M1-1.4.0-rc"
val kotlinReactMdwcVersion = "1.0.0-SNAPSHOTX"
val kotlinxCoroutinesCoreVersion = "1.3.8-1.4.0-rc"
val klockVersion = "2.0.0-alpha-1.4.0-rc"
val kotlinxHtmlJvmVersion = "0.7.1-1.4.0-rc"
val kotlinJacksonModuleVersion = "2.11.0"

val restAssuredVersion = "4.3.1"
val assertjCoreVersion = "3.16.1"
val slf4jTestVersion = "1.0.0"

repositories {
    mavenCentral()
    jcenter()
    maven {
        url = uri("<https://dl.bintray.com/kotlin/ktor>")
    }
    maven {
        url = uri("<https://dl.bintray.com/kotlin/kotlin-eap>")
    }
    maven {
        url = uri("<https://dl.bintray.com/kotlin/kotlin-js-wrappers>")
    }
    maven {
        url = uri("<https://dl.bintray.com/michaelbull/maven>")
    }
    maven {
        url = uri("<https://gitlab.com/api/v4/groups/zsinz-kotlin/-/packages/maven>")
        name = "GitLab"
    }
    maven("<https://dl.bintray.com/kotlin/kotlin-eap>")
}

configurations.forEach { it.exclude("javax.annotation", "javax.annotation-api") }

kotlin {
    jvm {
        compilations.all {
            kotlinOptions.jvmTarget = "11"
        }
        withJava()
    }
    js(IR) {
        useCommonJs()
        nodejs {}
        browser {
            binaries.executable()
            webpackTask {
                cssSupport.enabled = true
            }
            runTask {
                cssSupport.enabled = true
                devServer = devServer?.copy(
                    port = 8081
                )
            }
            testTask {
                useKarma {
                    useChromeHeadless()
                    webpackConfig.cssSupport.enabled = true
                }
            }
        }
    }
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(kotlin("stdlib-common"))

                implementation("org.jetbrains.kotlinx:kotlinx-serialization-cbor:$kotlinJsSerializationVersion")
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test-common"))
                implementation(kotlin("test-annotations-common"))
            }
        }
        val jvmMain by getting {
            dependencies {
                implementation(kotlin("stdlib-jdk8"))
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:$kotlinxCoroutinesCoreVersion")

                implementation(
                    project.dependencies.enforcedPlatform(
                        "$quarkusPlatformGroupId:$quarkusPlatformArtifactId:$quarkusPlatformVersion"
                    ))
                implementation("io.quarkus:quarkus-resteasy:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-resteasy-jackson:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-resteasy-mutiny:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-kotlin:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-smallrye-health:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-logging-json:$quarkusPlatformVersion")
                implementation("io.quarkus:quarkus-jackson:$quarkusPlatformVersion")
                implementation("com.fasterxml.jackson.module:jackson-module-kotlin:$kotlinJacksonModuleVersion")
                implementation("com.michael-bull.kotlin-result:kotlin-result:$kotinResultVersion")

                implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:$kotlinxHtmlJvmVersion")
            }
        }
        val jvmTest by getting {
            dependencies {
                implementation("io.quarkus:quarkus-junit5:$quarkusPlatformVersion")
                implementation("io.rest-assured:rest-assured:$restAssuredVersion")

                implementation("org.assertj:assertj-core:$assertjCoreVersion")
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-test:$kotlinxCoroutinesTestVersion")
                implementation("uk.org.lidalia:slf4j-test:$slf4jTestVersion")

                implementation(kotlin("test"))

                implementation(kotlin("test-junit"))
            }
        }
        val jsMain by getting {
            dependencies {
                implementation(npm("core-js", "3.2.1"))
                implementation(kotlin("stdlib-js"))
                implementation(
                    "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:$kotlinJsSerializationVersion"
                )
                implementation("org.jetbrains:kotlin-extensions:$kotlinJsExtensionsVersion")
                implementation("org.jetbrains:kotlin-react:$kotlinReactVersion")

                implementation("org.jetbrains:kotlin-react-dom:$kotlinReactDomVersion")
                implementation("org.jetbrains:kotlin-redux:$kotlinReduxVersion")
                implementation("org.jetbrains:kotlin-react-redux:$kotlinReactReduxVersion")
                implementation("org.jetbrains:kotlin-react-router-dom:$kotlinReactRouterDomVersion")
                implementation("org.jetbrains:kotlin-css:$kotlinCssVersion")
                implementation("org.jetbrains:kotlin-styled:$kotlinCssVersion")

                implementation("com.soywiz.korlibs.klock:klock-js:$klockVersion")
                implementation("com.zsinz:kotlin-react-mdwc:$kotlinReactMdwcVersion")

                implementation("io.ktor:ktor-client-core:$ktorVersion")
                implementation("io.ktor:ktor-client-js:$ktorVersion")
                implementation("io.ktor:ktor-client-json-js:$ktorVersion")
                implementation("io.ktor:ktor-client-serialization-js:$ktorVersion")
                implementation("io.ktor:ktor-client-auth-basic-js:$ktorVersion")

                implementation(npm("css-loader", "3.4.2"))

                implementation(npm("react", "16.13.1"))
                implementation(npm("react-dom", "16.13.1"))
                implementation(npm("react-router-dom", "5.2.0"))
                implementation(npm("redux", "4.0.5"))
                implementation(npm("react-redux", "7.2.0"))

                implementation(npm("react-is", "16.13.1"))
                implementation(npm("inline-style-prefixer", "5.1.0"))
                implementation(npm("css-in-js-utils", "3.0.4"))
                implementation(npm("style-loader", "1.1.3"))
                implementation(npm("styled-components", "5.0.0"))
                implementation(npm("material-components-web", "3.2.0"))
                implementation(npm("rmwc", "5.7.1"))
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
}

tasks {
    "test"(Test::class) {
        useJUnitPlatform()
    }
}

allOpen {
    annotation("javax.ws.rs.Path")
    annotation("javax.enterprise.context.ApplicationScoped")
    annotation("io.quarkus.test.junit.QuarkusTest")
}

quarkus {
    setSourceDir("$projectDir/src/jvmMain/kotlin")
    setOutputDirectory("$projectDir/build/classes/kotlin/jvm/main")
}

detekt {
    toolVersion = "1.10.0"
    buildUponDefaultConfig = true
}

tasks {
    quarkusDev {
        setSourceDir("$projectDir/src/jvmMain/kotlin")
    }
}

tasks.getByName<KotlinWebpack>("jsBrowserProductionWebpack") {
    destinationDirectory =
        File("$projectDir/build/classes/kotlin/jvm/main/META-INF/resources") // Allow the javascript to be accessible
    outputFileName = "kotlin-multiplatform-quarkus.js"
}

tasks.getByName<Jar>("jvmJar") {
    dependsOn(tasks.getByName("jsBrowserProductionWebpack"))
    val jsBrowserProductionWebpack = tasks.getByName<KotlinWebpack>("jsBrowserProductionWebpack")
    from(File(jsBrowserProductionWebpack.destinationDirectory, jsBrowserProductionWebpack.outputFileName))

    doLast {
        copy {
            from("$projectDir/src/jsMain/resources")
            into("$projectDir/build/classes/kotlin/jvm/main/META-INF/resources")
        }
    }
}
And the properties:
Copy code
kotlin.code.style=official

kotlin.js.experimental.generateKotlinExternals=false

kotlinVersion=1.4.0-rc
kotlinxVersion=1.3.7-1.4.0-rc
slf4jVersion=1.7.25

kotlinxCoroutinesTestVersion=1.3.8-1.4.0-rc
kotinResultVersion=1.1.4
quarkusPlatformArtifactId=quarkus-universe-bom
quarkusPlatformGroupId=io.quarkus
quarkusPlatformVersion=1.6.1.Final
i
Did you try with 1.4-M3 version? And if yes, did you have such problems?
d
Well it did work fine for M3. But I hadnt changed it to IR in that version
i
Could you please tell, do you overwrite 
webpack
configuration in 
webpack.config.d
? Could you please send 
build/reports/webpack
?
And if possible, if you change something in 
webpack.config.d
folders, point what do you change?
d
I dont change anything. The only change I make is to the port of the devServer
Copy code
{
  mode: 'development',
  resolve: {
    modules: [
      'node_modules'
    ]
  },
  plugins: [
    ProgressPlugin {
      profile: false,
      handler: [Function: handler],
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    TeamCityErrorPlugin {}
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'source-map-loader'
        ],
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {}
          },
          {
            loader: 'css-loader',
            options: {}
          }
        ]
      }
    ]
  },
  entry: {
    main: [
      'C:\\Dev\\play\\kotlin\\kotlin-multiplatform-quarkus\\build\\js\\packages\\kotlin-multiplatform-quarkus\\kotlin\\kotlin-multiplatform-quarkus.js'
    ]
  },
  output: {
    path: 'C:\\Dev\\play\\kotlin\\kotlin-multiplatform-quarkus\\build\\distributions',
    filename: [Function: filename],
    library: 'kotlin-multiplatform-quarkus',
    libraryTarget: 'umd'
  },
  devtool: 'eval-source-map',
  stats: {
    warningsFilter: [
      /Failed to parse source map/
    ],
    warnings: false,
    errors: false
  },
  devServer: {
    inline: true,
    lazy: false,
    noInfo: true,
    open: true,
    overlay: false,
    port: 8081,
    contentBase: [
      'C:\\Dev\\play\\kotlin\\kotlin-multiplatform-quarkus\\build\\processedResources\\js\\main'
    ]
  }
}
@Ilya Goncharov [JB] you can find the full project here: https://gitlab.com/zsinz-kotlin/kotlin-multiplatform-quarkus
🙏 1
i
Ok, thank you I see problem in generated JavaScript file
Copy code
26 var ChangeEvent = React.ChangeEvent;
But 
React
was not declared, I am trying to find root cause cc @bashor @anton.bannykh
Seems that it is root cause, I believe it should be 
@file:JsModule("react")
instead of 
JsQualifier
https://gitlab.com/zsinz-kotlin/kotlin-react-mdwc/-/blob/master/src/main/kotlin/com/zsinz/kotlin/react/mdwc/types/react_types.kt Did you use 
dukat
for getting these external declarations?
➕ 1
d
Hi. I have had these bindings around for a while. I think from memory, I maybe used dukat (in its infancy) to give me a start. But in the end I had issues, so had to hand crank. I havent looked at dukat again since. I'll try the change you are suggesting and report back. Thanks
i
Additionally you possibly need to remove 
CONFLICTING_OVERLOADS
in external declarations, and then remove the duplicated declarations, and everything should be ok
d
@Ilya Goncharov [JB] I have made the change you suggested with success. You help was very much needed and appreciated. I have committed the changes. I did have some other issues that I came across: • I have issues with using my own RState interface, I seemed to be give me a cast error. I worked around that by using the functionalComponent paradigm, which I was wanting to do anyway • jsStyle was also giving me cast error. I just removed them as I didnt really need them Again thanks for all of the help. Maybe others may want to use the react enabled material design components.
15 Views
Open in Slack
PreviousNext
Powered by