Hi guys , how I set npm( new JS target ) output ...

# javascript

[Juanoterocas]

Hi guys , how I set npm( new JS target ) output to submodule directory, I'm having MODULE NOT Found because is using parent build output( with kotlin-frontend didn't happen ), is there an example for this, also to use webpack in production mode?

[anton.bannykh]

Sorry, could you provide some context to your issue. I'm not sure I understand your project layout...

[Juanoterocas]

ok i have a project with modules(not mpp ), project called walllet, into this i have a module project( js browser project ) with its own gradle file, when I'm trying to run it npm install, create node_module on root build project

[Juanoterocas]

and I'm getting errors ( I'm guessing ) because is not in build module directory( js/nodemodules)

[anton.bannykh]

Seems like the issue relates to the new kotlin js plugin. cc @snrostov

[anton.bannykh]

(also cc @Ilya Goncharov [JB])

[Ilya Goncharov [JB]]

Could you please provide sample project for this?

[Juanoterocas]

hi you can check it with this small example with some react components https://github.com/steelxtreme/KotlinBrowserTest

[Ilya Goncharov [JB]]

It is related with how NodeJS finds node modules
Firstly it tries to find required node module in “local” folder node_modules, then find on upper level on parent’s node_modules, and then, and then…
It is reason, why in multi-module project, js output is collected on root build under common node_modules, so when you override output file path on project’s build, there is no node_modules to find required module
You can try to investigate some webpack’s options, like webpack.resolve.modules (https://webpack.js.org/configuration/resolve/#resolvemodules), if you want
You can affect weback’s configuration via plain js in webpack.config.d folder

[Juanoterocas]

Old frontend plugin resolve this automatically by npm install on module build directory, should be "like" the same way on new JS(frontend) approach, btw thanks I'll investigate this onon webpack's documentation , but it's a big delay on my project..

[Juanoterocas]

is there any documentation on how to write js files to webpack -kotlin? conversion guide?

[snrostov]

Old frontend plugin resolve this automatically by npm install on module build directory, should be "like" the same way on new JS(frontend) approach

Old frontend plugin will install copy of all transitive dependencies at each module build directory. To avoid duplicated common npm modules, we should have some common node_module where all such common modules are installed.

[snrostov]

is there any documentation on how to write js files to webpack -kotlin? conversion guide?

It is not ready, sorry

[snrostov]

Btw, why do you need to override outputFile property?

[snrostov]

I didn't think any of webpack options could help, configuration with overridden outputFile will just not work. We will hide them in feature versions.

Again, we building all js files to root project build directory to support multi project build with npm dependencies. Unfortunately, we have not found any other way to do it.

[Juanoterocas]

Btw, why do you need to override outputFile property?
You can get rid of that line and the output will be parentName-module-Name.js , I Just want to have module name.
kotlin/BrowserTest-FrontBrowser.js

[snrostov]

I see. Makes sense. Changing the generated npm package name is not supported yet. I think we can do something with it. I'm just filled issue for that: https://youtrack.jetbrains.com/issue/KT-34252

Just curious, what is your case, why you need a package with custom name? For now, the package name is more like an internal thing since you cannot do anything but requiring this module from another subproject (and that will be handled automatically, and you won't write this internal package name anywhere). It will make sense for me when we may able to publish that module to npm, but we are not there 🙂 And if you're curious, we choose this naming scheme bacause you may choose some usual module name which will be clash with some npm package that will be installed by default.

[Juanoterocas]

just copied and pasted code from some projects(is a kind of Frankenstein gradle), perhaps I need some guide to make it properly since there isn't full docs yet.

[snrostov]

Probably you can just remove line that updates outputFile. It should work without that

[Juanoterocas]

is it mandatory to have a nodejs target in separated project to make work browser target? I'm still getting :

ERROR in ./kotlin/BrowserTest-FrontBrowser.js
  Module not found: Error: Can't resolve 'react-chartjs-2' in '/home/devquilla/Downloads/kotlin/BrowserTest/build/js/packages/BrowserTest-FrontBrowser/kotlin'
   @ ./kotlin/BrowserTest-FrontBrowser.js 1027:148-174
   @ multi ./kotlin/BrowserTest-FrontBrowser.js source-map-support/browser-source-map-support.js

[snrostov]

No, it is not required

[snrostov]

Can you please share your project?

[Juanoterocas]

never mind, it was missing npm dependencies, but I have an issue with sass-loader. I had to apply a command on yarn to ignore engines : yarn config set ignore-engines true

[Juanoterocas]

I'm getting : Cannot GET /, I dont know if it is a webpack related issue, any way this is my example project: https://github.com/steelxtreme/KotlinBrowserTest

[snrostov]

@Juanoterocas, well there is couple of issues

If you want just to get started you are better to download latest eap ide plugin (https://discuss.kotlinlang.org/t/kotlin-1-3-60-early-access-preview/14579) and create new project using wizard: select Gradle on the right, uncheck "java" and check "Kotlin/JS for browser". Please don't use kts yet. Hello world browser project will be created. Wait for project import, and just type "./gradlew run -t" in terminal. Browser will open and "Hello, world!" will be displayed. You can change sources, save it and page will be reloaded automatically (-t mode). Also source maps should work out of the box.

tl;dr

issues in your project
- your https://github.com/steelxtreme/KotlinBrowserTest/blob/d48b93900951a1a3af0a6b2aa1f1032aebbaee5e/FrontBrowser/webpack.config.d/devServer.js will overwrite config.devServer object, not extending it. So, all properties like config.devServer.contentBase are lost. To extend object you may write something like this: config.devServer.historyApiFallback = true
- you are setting proxy = mapOf("/" to "<http://0.0.0.0:8080>"), which causes that all urls will be proxied to http://0.0.0.0:8080. including index.html and js bundle.
- for some reason bundle name is FrontBrowser-unspecified.js in run mode, not BrowserTest-FrontBrowser.js and it looks like an issue in our plugin. @Ilya Goncharov [JB] please take a look.
- There is no reason to set dev server contentBase. It is by default on resources folder.
- There is no reason to configure source maps. It should work out of the box.

With all that fixes it is work for me: https://github.com/steelxtreme/KotlinBrowserTest/pull/1

[Juanoterocas]

@snrostov thanks a lot , I will test it and try EAP version as well