Develop Reference

Imported component from local vite+vue library not updating

I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.
I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.
The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.
Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342
I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.
Any help is greatly appreciated.

I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:
node_modules
|
--components
|
--node_modules <-- the culprit here
Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.
To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.
Solution:
In your package folder components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.
Now in your test project my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"
Run yarn to install the package and yarn dev to run the app and see if your components work.
Every time you make a change on your package, don't forget to pack the package again and re-install it. You might want to increase your package version to invalidate the yarn cache

In your components folder run :
yarn build
then run :
yarn link
in my-vite-app folder run :
yarn link "components"
in the maint.ts import the style :
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')

Javascript file cause React (Typescript) fail to start

I have a React project with Typescript. One day I create a javascript file in src/ and then my React app failed to start on localhost. Any explanation about this would be appriciated.
Evironment: Node 16.13.1
Step to reproduce:
git clone git#github.com:manaclan/fun-pms-frontend.git
cd fun-pms-frontend
git checkout vinhngo
Inside package.json remove:
"#types/react-facebook-login": "^4.1.4"
"react-facebook-login": "^4.1.1"
Then npm install and npm start will notify that localhost:3000 failed to connect. Removing src/setupProxy.js will make the server start as normal

That's because JavaScript is not allowed in Typescript projects, you would need to modify your Typescript config, add the following flag to to the config file
--allowJs
Depending on the module bundler you probably also have to set the output directory for the transpiled Typescript files.

How do you add Node to the frontend?

I have been coding with a React frontend and a Node/Express backend. But sometimes, I only need some plain Javascript without React, but still want the benefit of NPM and other Node modules. What is a way to do this?

You'll need a module bundler of some kind. There are many options including Webpack, Browserify, Gulp, and Parcel.
For Webpack, for example, from their example docs, the process could be:
Install webpack with npm install webpack and install webpack-cli
Install a module you want to use on the frontend, eg lodash
In src/index.js, import lodash: import _ from 'lodash'; and use it as needed. (You can also import other modules from NPM or from other places in your source code)
Set up webpack.config.js if you need custom build configuration settings
Run webpack to build the project: npx webpack. A single bundled JavaScript file will be created which contains all your source code and the imported Lodash's source code.

How to create a local module in TypeScript

I have created in folder src/modules/my-module/ which has package.json and defined the main file which exports everything we need.
I can import from it now import {A} from '../../modules/my-module'
I want to change the syntax into import {A} from 'my-module' and I have a few reasons for it:
When I move the module to another folder, I do not want to change all the code calling this module.
Later, I would like to have the possibility to move the module to a separate repository as the npm package and reuse it in multiple projects. I do not want to change all calling code later.
I have managed to compile it by adding to tsconfig.json
"paths": {
"my-module": ["src/modules/my-module"]
}
But I can't run the result via node.js as the node can't find the module. Is there any way to use non-realtive module reference in such scenario.

TS doesn't convert that "my-module" when transpiling your ts files to js.
Using module-alias package might solve your problem.
Add this configuration below into package.json:
"_moduleAliases": {
"my-module": "<your_build_folder>/modules/my-module"
},
And this code on first line of your main file (server.ts/index.ts)
import 'module-alias/register';

By the sounds of it, what you're wanting to do is package up your local my-module so that it can be used in the same way you'd install and use a package from the npm registry.
When you're doing local development, its easy to configure a dependency to reference to your module as a file path - though you need to have your typescript transpiled for it to work in your case.
Here's the method I'm using for local development, in an environment where we have many utility modules for a microservices architecture. I package the module into an archive and install it using npm install:
Use npm pack to package the module into a .tgz. Our package.json defines the target directory to be packaged, and the build script performs the transpile into the target (obviously adjust for your needs):
...
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "npx babel src --out-dir dist --extensions .ts,.tsx,.js --ignore **/*.test.ts,**/*.test.tsx",
...
Run npm pack and install the generated package in your application
/my-module/> npm pack
/my-module/> cd ../my-app
/my-app/> npm install --save ../my-module/my-module-0.0.1.tgz
Or as an all-in-one (builds tgz in my-app dir):
/my-app/> && npm pack ../my-module && npm i -s my-module-0.0.1.tgz
Once you're done with development, you'll probably want to publish your module in a way that its available to your project(s) on deployment.
Your options are along the lines of:
Publish to your local system using npm link
Publish to a private registry
Publish to the npm registry (as either a public or private module)
Here's a good resource for these options: https://medium.com/#debshish.pal/publish-a-npm-package-locally-for-testing-9a00015eb9fd

Add local module as dependency to package.json (in the root of your project):
"dependencies": {
"my-module": "file:src/modules/my-module",
...
}
Configure your typescript settings like here #tsconfig/recommended
Run npm install my-module in your root folder
Then you can do:
import {A} from 'my-module'

You can transpile your external local project (reference project) since Typescript 3 in July 2018.
See: How to share code between TypeScript projects?

Import elasticsearch module in Ember.js

I'm trying to import a browser build for the elasticsearch.js client. I'm using npm as my package manager since EmberJS (v2.13.1) is moving away from bower:
npm install elasticsearch-browser
Few questions:
Can I directly import the module as it is "built for the browser" and probably doesn't use any CommonJS syntax? If yes, what would the import statement look like?
Am I required to use browserify to import any module I install from the npm registry? Why? How do I know which packages are browser-ready?
I could install the module through bower and then do an app.import in the ember-cli-build.js file. Would that work?
As I understand, it finally comes down to using bower vs installing browserify, correct? But I still don't understand why I should have to use a transpiler.