We Keep Coding

How to import Kotlin/JS generated module in a separate npm-based project

I would like to create a js library with Kotlin Multiplatform (an example of which is this project, where we have a webscocket server and a js client) which I will then build as a npm package and import in my Vue project (could be any other framework).
what I managed to do with chat project is:
build js sources with ./gradlew build
publish that via yarn publish (setting up remote registry url ofc)
add published package to package.json with (needed to update project name to #chat/client by hand in the generated package.json):
{
"name": "#chat/client",
"version": "0.0.1",
"private": false,
"workspaces": [
"packages/chat-frontend",
"packages/chat-frontend-test",
"packages_imported/kotlin/1.6.21",
"packages_imported/ktor-ktor-client-core-js-ir/2.0.0",
"packages_imported/kotlin-test-js-runner/1.6.21"
],
"resolutions": {},
"devDependencies": {},
"dependencies": {},
"peerDependencies": {},
"optionalDependencies": {},
"bundledDependencies": []
}
added #JsExport annotation on writeMessage in src/frontendMain/kotlin/main.kt
what I didn't manage is (in my Vue project):
import writeMessage, I exported in .kt file (it's visible in source, not exported though)
import anything via import * from '#chat/client'
or any other folder along '#chat/client/*'
use the generated files in any other way
The generated package structure is very odd:
~ ls build/js/*
build/js/package.json build/js/yarn.lock
build/js/node_modules:
... (npm dependencies from Kotlin/JS module)
build/js/packages:
chat-frontend chat-frontend-test
build/js/packages_imported:
... (Kotlin/JS dependencies)
~ ls build/js/packages/chat-frontend/*
build/js/packages/chat-frontend/package.json build/js/packages/chat-frontend/webpack.config.js
build/js/packages/chat-frontend/kotlin:
chat-frontend chat-frontend.js chat-frontend.js.map chat-frontend.meta.js
(chat-frontend contains package dir tree and a file frontend.kjsm)
build/js/packages/chat-frontend/kotlin-dce:
chat-frontend.js
ktor-*.js
kotlinx-*.js
... (compiler output ???)
build/js/packages/chat-frontend/node_modules:
... (webpack cli and dev-server files)
Do you have any clues, tips or an example project which does that? I've processed whole section of Kotlin/JS docs but there is no information on how to import Kotlin generated .js files in a js/ts project.
EDIT:
I've updated my fork of ktor-samples with Kotlin/JS build files: build-js folder and src/backendMain/resources/chat.js. Here's the link to chat folder of the fork project

I will try to help
Kotlin/JS has 2 kinds of compiler: legacy and IR. #JsExport affects only IR compiler. But from kotlin-dce folder, you use legacy compiler backend. In IR compiler, DCE (dead code elimination) is included into compiler and there is no folder kotlin-dce. You can change compiler kind in gradle.properties with kotlin.js.compiler=ir|legacy.
When you build project with IR, packages/*/kotlin will fully contain your library (similar with legacy's kotlin-dce)
Then you need to prepare appropriate package.json file with name and main fields (task :publicPackageJson could help with that, but check, if it is ok for your case)
Now in Kotlin/JS export works with packages. It means, that if you export io.ktor.samples.chat.frontend.writeMessage, it will be exported as io.ktor.samples.chat.frontend.writeMessage in js. So to import it, you need import io and then find necessary declarations.
import { io } from '#chat/client`
io.ktor.samples.chat.frontend.writeMessage("hello")

In the case of classical (non-IR) js backend usage and you use only non-private NPM dependencies then the only thing that you need is to compile your Kotlin/js library (via :compileKotlinJs task), generate package.json for your library (via :publicPackageJson) and your package could be published to NPM or another private repository (by yarn publish).
After publication, you will have the ability to set your library as a dependency in any js project. (Note that the name and version of your library will be placed inside package.json (generated by :publicPackageJson task)).
Also, you can check this discussion. Hope it will help you.

Import components outside the root folder with babel

I have multiple projects in react in a monorepo: app1 app2 app3, and each app is built with webpack and babel.
I want to create a shared directory with shared components between the apps, so I created in the monorepo another directory shared.
( I executed in each project npm i ../shared )
But when I import componets from shared inside one the of the apps, babel throws an exception: Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
NOTE: if I import simple functions from shared it works, only when importing components it does not work.
What configuration can I add so I can create a shared directory with shared components?
The .babelrc file I have in each app looks like this
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"browsers": ["chrome >= 50"]
},
"useBuiltIns": "usage",
"corejs": 3
}
],
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": ["#babel/plugin-syntax-jsx", "#babel/plugin-transform-react-jsx", "#babel/plugin-transform-runtime"]
}

It appears, this is more of a webpack and less of a babel problem. The error pops up, because your babel-loader is not configured correctly.
When adding "external folders/modules" to your build, you usually want to do (or at least check) the following:
Add the shared folder's src folder to your babel-loader's include (if it is not already included)
-> This makes sure, things get babel'ed nicely, and your preset-react will actually work).
-> Make sure not to include too much (e.g. never include any node_modules folder in its entirety, or things will slow down abysmally).
You might also have to add the shared folder to your babel-loader's babelrcRoots, because else, it will ignore its .babelrc.js file (if it is different from your babel-loader's default config), and thus only use default settings, ignoring your preset-react.
Often times, you also need to add the shared folder's src folder to your webpack.config's resolve.modules:
-> This allows webpack to do it's resolve magic inside that folder as well.
If it has its own node_modules, also add that to resolve.modules.
For more info on this particular issue, see here.

You can create a link to an external package:
Installing a local module using npm
Another possibility if you are working in a team is the more sophisticated approach:
Get npm module via Git
As for the declarations of the plugins, see documentation (you need a "plugins" array, see link):
babel js plugins

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.

Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.

Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

How to use node_modules on a "traditional website"?

I have used node to manage dependencies on React apps and the like, in those you use package.json to keep track of libs and use them in your scripts using ES6 import module syntax.
But now I'm working on a legacy code base that uses a bunch of jQuery plugins (downloaded manually and placed in a "libs" folder) and links them directly in the markup using script tags.
I want to use npm to manage these dependencies. Is my only option:
run npm init
install all plugins through npm and have them in package.json
link to the scripts in the node_modules folder directly from the markup:
<script src="./node_modules/lodash/lodash.js"></script>
or is there a better way?

Check out this tutorial for going from using script tags to bundling with Webpack. You will want to do the following: (Do steps 1 and 2 as you mentioned in your question then your step 3 will change to the following 3 steps)
Download webpack with npm: npm install webpack --save-dev
Create a webpack.config.js file specifying your entry file and output file. Your entry file will contain any custom JS components your app is using. You will also need to specify to include your node_modules within your generated Javascript bundle. Your output file will be the resulting Javascript bundle that Webpack will create for you and it will contain all the necessary Javascript your app needs to run. A simple example webpack.config.js would be the following:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
resolve: {
alias: {
'node_modules': path.join(__dirname, 'node_modules'),
}
}
};
Lastly, add a <script> tag within your main HTML page pointing to your newly generated Javascript bundle:
<script src="dist/my-first-webpack.bundle.js"></script>
Now your web application should work the same as before your refactoring journey.
Cheers

I recommend Parcel js.
Then you only need:
Run npm init
Install dependency, for example npm install jquery
Import with ES6 syntax: import $ from "jquery";
And run with parcel

How do I use a NodeJS package with RequireJS?

I would like to use the the node-bencoding package with my current RequireJS project setup, but I have been unable to get it configured.
I have followed these instructions and have ran:
npm install requirejs
npm install node-bencoding
Then in my app.js file I had changed it:
var requirejs = require('requirejs');
// Place third party dependencies in the lib folder
//
// Configure loading modules from the lib directory,
// except 'app' ones,
requirejs.config({
nodeRequire: require,
"baseUrl": "assets/js/lib",
"paths": {
"app": "../app",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"angularjs": "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min"
},
});
However when I load the page I get the error:
Error: Module name "requirejs" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
I'm not exactly sure where I should have my node_modules directory. My directory structure is as follows: all my JS files are contained within src/assets/js - there is assets/js/app and assets/js/lib as is the RequireJS convention. Currently I have put my node_modules directory in src/.

Looks like you are trying to use it in a browser. And your application is not server side JavaScript, so RequireJS usage sample in a Node does not apply. In this case you would like to use node only to optimize your scripts.
I recently blogged about Understanding AMD & RequireJS, it might be useful.