DEV Community: dotorimook

What is wrong with `export` and `export default`?

dotorimook — Fri, 03 Jul 2020 04:11:13 +0000

I have been using export and export default together, and there is no much difference in the usage but aliasing to import the module. In fact, I was thinking that they are just same when I import them.
However, I found there is a difference between export and export default. Let me show an simple example.

TestModule.js

let a = 0;

const test = () => a++;

export {a, test};
export default ({a, test});

index.js

import module, { a, test } from './TestModule';

const check = () => console.log(a, module.a);

check();
module.test();
check();
module.test();

I expected that the console would be like this because index.js import just same reference:

0 0
1 1

BUT, the what the console really says is:

0 0
1 0

I think the references of theme are different each other, but I don't understand why? Is there some one explain about why, please let me know.

Anyway, I think I have to use them becarefuly.

Important to know for Ionic AppFlow's Live Update

dotorimook — Thu, 25 Jun 2020 01:25:49 +0000

When you decided to develop a hybrid app, it could be the one of the advantages of hybrid app that you can update the app right away without updating through App Store or Play Store.
I investigated the live update feature of Ionic AppFlow, and the AppFlow service itself is pretty much neat and looking-good and the process of deploying and live-updating looks so much easy. So I chose to use Ionic AppFlow for live updating.
BUT, for almost more than a week, I was in trouble making the live update to work, and the support department in Ionic was not helpful so much. So I decided to write What the problem I met was and share to solve the problem.

I tried the live update feature from the instruction from appFlow page like following: linking with ionic link ${your_app_id} and ionic deploy add to set up Ionic Deploy.

Then you can meet the following errors.

1. Missing values

Then you can see some added text in the android/app/src/main/res/values/strings.xml:

...
  <string name="ionic_app_id">${your_app_id}</string>
  <string name="ionic_channel_name">Master</string>
  <string name="ionic_update_method">auto</string>

If you chaned the channel name and update method, it would be different.
Then if you run the application from Android Studio, you will meet the following error:

E/m.midas.jobfle: Invalid ID 0x00000000.
E/PluginManager: Uncaught exception from plugin
    android.content.res.Resources$NotFoundException: String resource ID #0x0
        at android.content.res.Resources.getText(Resources.java:363)
        at android.content.res.Resources.getString(Resources.java:456)
        at android.content.Context.getString(Context.java:580)
        at com.ionicframework.common.IonicCordovaCommon.getStringResourceByName(IonicCordovaCommon.java:341)
        at com.ionicframework.common.IonicCordovaCommon.getNativeConfig(IonicCordovaCommon.java:425)
        at com.ionicframework.common.IonicCordovaCommon.getPreferences(IonicCordovaCommon.java:384)
        at com.ionicframework.common.IonicCordovaCommon.execute(IonicCordovaCommon.java:92)
        at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
        at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
        at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:69)
        at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:45)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:326)
        at android.os.Looper.loop(Looper.java:181)
        at android.os.HandlerThread.run(HandlerThread.java:65)
E/Capacitor/Console: File: capacitor-runtime.js - Line 2654 - Msg: Uncaught (in promise) String resource ID #0x0

You can see the error message related in chrome inspector Uncaught (in promise) String resource ID #0x0. It means that live update didn't make due to the error.
In the process of loading and live updating the app, it checks some environmental values from strings.xml or SharedPreference. However, if there is some missing values, the process will stop and just go to the next step.
I found some missing value keys: ionic_max_versions, ionic_update_api, ionic_min_background_duration.
So, what you have to do is adding some additional values in strings.xml:

<resources>
...
  <string name="ionic_app_id">${your_app_id}</string>
  <string name="ionic_channel_name">Master</string>
  <string name="ionic_update_method">auto</string>
  <string name="ionic_max_versions" >2</string>
  <string name="ionic_update_api">https://api.ionicjs.com</string>
  <string name="ionic_min_background_duration">30</string>
</resources>

Then the error will be resolved and live update will done.
Next is additional information while I was solving the problem.

2. `ionic_update_api`

First, I've got the missing key values from debugging and tracking the code IonicCordovaCommon.java inside the Android proejct, so I did not know what that mean and what is the appropriate values for that keys. I found a hint from the merged commit (https://github.com/ionic-team/ionic-cli/pull/4065/files), but it was not helpful to find the appropriate value.
Then I typed the value for ionic_update_api like following:

<string name="ionic_update_api">https://api.ionicjs.com</string>

and the error happened:

Uncaught SyntaxError: Unexpected token < in JSON at position 0

After I resolved the problem, I now know that the api address for checking the update is wrong. I fond the appropriate value https://api.ionicjs.com googling almost a week. It means that you can manipulate the api address.
I don't understand why this important information cannot be found anywhere.

Anyway, now the live update is perfectly done.

you can find the post in the Ionic Forum here: https://forum.ionicframework.com/t/appflow-live-update-cant-make-it-work/185996/9?u=dotorimook

Using absolute path import with Typescript + babel + nodemon in Your Node Project

dotorimook — Mon, 28 Oct 2019 04:46:10 +0000

Developing with Node Project, it could be difficult to read your code, and it really feel irritating while importing somany .. in your import code. When you see the path like ../../../../../../models/post, could you even guess where the file is?

Recently I found various ways to import with absolute path rather than relative path in Typescript Node project, and I finally found simplest configuration for my own.

You can do this with just babel-plugin-module-resolver, and tsconfig.json or @babel/preset-typescript.

There are 2 ways to use absolute path in your import. Each of them has pros and cons:

Typescript-transpile with tsc, then babel-transpile with babel-plugin-module-resolver

Pros

You do not worry about support of latest grammar because it is official way to transpile typescript.
You do not need @babel/preset-typescript. tsc will transpile your typescript code.

Cons
You have to transpile twice.
You have to write path alias information twice, in tsconfig.json and .babelrc. It is redundant.

Configure .bablerc with @babel/preset-typescript and module-resolver, then transpile your typescript with babel.

Pros

Simple configuration. You can write path alias information in .babelrc only.
You can transpile only one time with babel.
Furthermore, you can use babel plugin you want (like @babel/plugin-proposal-optional-chaining. This is one of the features that I want to use with typescript but I can't.)

Cons
Some of Typescript Grammar is not supported.( like !, null assertion operator)

From now, I will show you how to configure each of them. I will suppose to use nodemon in both ways.

0. File Structure

I will suppose the file structure like following:

├─src
│├─hello
││ └─abc.ts
│└─index.ts
├─.babelrc
├─nodemon.json
├─package.json
└─tsconfig.json

abc.ts and index.ts will be like this:

src/index.ts

import abc from 'hello/abc';
console.log(`Hello, ${abc}`);

src/hello/abc.ts

export default 'abc';

package.json

Some of the packages is not needed by the way you use. You don't need @babel/preset-typescript if you transpile with tsc like so forth.

{
  "name": "path_hell",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/node": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-typescript": "^7.6.0",
    "@types/jasmine": "^3.4.4",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.2.0",
    "jasmine-core": "^3.5.0",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-webpack": "^4.0.2",
    "nodemon": "^1.19.4",
    "ts-loader": "^6.2.0",
    "ts-node": "^8.4.1",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.8.2"
  }
}

1. Typescript-transpile with `tsc`, then babel-transpile with `babel-plugin-module-resolver`

First, you can write start script like follow in your package.json.

package.json

...
"scripts": {
    "start": "tsc && nodemon"
  },
...

and other configuration file like follow:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",      
    "module": "commonjs",   
    "outDir": "./dist",     
    "strict": true,              
    "moduleResolution": "node",   
    "baseUrl": "src",              
    "paths": {
      "hello": ["./hello"]
    },                         
    "esModuleInterop": true     
  },
}

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "hello": "./dist/hello",
      }
    }]
  ],
}

nodemon.json

{
  "ignore": [
    "node_modules"
  ],
  "watch": [
    "src",
    "yarn.lock"
  ],
  "exec": "babel-node dist/index.js",
  "ext": "ts"
}

If you npm start or yarn start, then tsc will transpile your typescript the way you wrote in tsconfig.json. the baseUrl and paths will help resolve your absolute path while tsc transpile. Then, your transpiled code will be run by babel-node. Wile transpiling with babel, you have to specify given absolute path into what babel can understand, so you have to specify the alias in the .babelrc with babel-plugin-module-resolver.

2. Configure `.bablerc` with `@babel/preset-typescript` and module-resolver, then transpile your typescript with babel.

You can make similar effect while configuring only .babelrc with @babel/preset-typescript and babel-plugin-module-resolver. You can write path alias information only 1 time in your .babelrc, which is very simple.

First of all, the start script in package.json will be different from the first.

package.json

...
"scripts": {
    "start": "nodemon"
  },
...

Then, you have to configure .babelrc and nodemon.json like follow:

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-env"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "hello": "./src/hello",
      }
    }]
  ],
}

nodemon.json

{
  "ignore": [
    "node_modules"
  ],
  "watch": [
    "src",
    "yarn.lock"
  ],
  "exec": "babel-node --extensions \".ts\" src/index.ts",
  "ext": "ts"
}

Done!

In the code, please focus that alias field in module-resolver: from dist to src. This way only transpiles your code 1 time, so you don't have to reference tsc-transpiled code path, and you don't have to define paths in your tsconfig.json. Please be careful with nodemon option --extensions ".ts" that let you transpile your .ts code right a way. If you write '.ts' rather than typing \".ts\" , then the error comes. Be careful.

I prefer the second one because it is simple and capable of using other babel plugins like @babel/plugin-proposal-optional-chaining.

Let's simplify your path with either way!

You can check the working example in my github repository: https://github.com/dotorimook/ts-babel-abs-path

DEV Community: dotorimook

What is wrong with `export` and `export default`?

TestModule.js

index.js

Important to know for Ionic AppFlow's Live Update

1. Missing values

2. ionic_update_api

Using absolute path import with Typescript + babel + nodemon in Your Node Project

0. File Structure

1. Typescript-transpile with tsc, then babel-transpile with babel-plugin-module-resolver

2. Configure .bablerc with @babel/preset-typescript and module-resolver, then transpile your typescript with babel.

2. `ionic_update_api`

1. Typescript-transpile with `tsc`, then babel-transpile with `babel-plugin-module-resolver`

2. Configure `.bablerc` with `@babel/preset-typescript` and module-resolver, then transpile your typescript with babel.