Import React components using Emacs and import-js2.2.0



Hello everybody it’s me candle.
In this time we will import the component path with emacs and import-js.
React recommends to write one component in one file, when development becomes to be big, the number of component increase.

If you use 10 components with one Container, you need to write 10 import statements.
import-js helps us from such troublesome work.

It worked well on the react web but in react native import-js didn’t successfully find out the component. Probably I think that there are some lack of the setting of import-js.


Already exist React web environment
I recommend you use the react project created by create-react-app command which I wrote the before article.
You use melpa or el-get


Since the major version of import-js of emacs does not correspond to import-js 2.2.0 of node-js, I do a little tricky thing.
I recommend using el-get.

About import-js

The system which emacs uses import-js is like this.
In the same way as eslint, emacs uses impot-js by access the external API.

import-js will automatically get the information about the structure of the project and the location of the component and insert import statements into the file.
Well, import-js has changed quite a bit since 2.1.0.

We use the importjsd daemon to connect with the process of the current editor. importjsd checks the module under the current directory, save the path etc in the database of sqlite3 in cachepath, and pass the value to the editor.

The emacs import-js plugin does not yet support this importjsd (April 11, 2017).
Therefore, we get the source code from the github repository which is developed by a volunteer programmer and use it.

install import-js

First install javascript import-js.
You can install import-js with npm.

npm install -g import-js

After installation you confirm that you can use the command.


This import-js version is 2.2.0 .
It is ready to go.

Install import-js plugin of Emacs.

Install import-js plugin to use import-js of node from emacs.

In the case of mepla

There is no import-js plugin for emacs supporting node import-js 2.2.0 yet.
It is not merged to the master branch when April 14, 2017, you can not install from melpa package.
So, once installing the old version with mepla and download the latest version by yourself.

Display the emacs packages with “M-x package-list-packages”.
Next search import-js with “C-s import-js”.

Move the cursor to impor-js, type “i”, then type “x” to install.
You are asked whether you want to install it, you can install it by typing “y”.

And download the .el file supporting import-js 2.2.0.

Go to the melpa directory.
The directory name of import-js changes according to the time.

cd ~/.emacs.d/elpa/import-js-20161220.508

Remove the import-js.el and import-js.elc.

rm import-js.el import-js.elc

We pull the file from github.

curl -O

At last write the below code in .emacs.d/init.el

(require 'import-js)

melpa installation is over.

eInstall with el-get

The majar version import-js plugin of emacs doesn’t support node import-js2.2.0 yet.
We install import-js plugin with a little tricky way.

Open the .emacs.d/init.el and write the below code.

(el-get-bundle import-js
  :type github
  :name import-js
  :pkgname "kevinkehl/emacs-import-js"
  :branch "importjsd"
  :load "plugin/import-js.el"
  :depends (grizzl ))

With this command reload the init.el file and install the import-js plugin.

M-x eval-buffer

el-get installation is over.

Setting up import-js for emacs

The setting of import-js is divided into three.

1, import-js-import shortcut key
2, auto launching configuration of iimportjsd demon
3, Automatically stop the daemon when Emacs is quit with C-x C-c

1 and 2 configuration.

When impor-js-import is executed, the path of the module is automatically inserted into the file.
The allocation of “C-c i” has no reason. I used it because it was not allocated.

As I wrote it at the above, we need to launch the importjsd to use import-js.

Of course, you can start it manually with “M-x run-import-js”, but since it is troublesome, it will automatically start up.

For js2-jsx-mode

(add-hook 'js2-jsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)

For rjsx-mode

(add-hook 'rjsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)

In this setting you caught the message that you will kill the importjsd demon in each you quit the emacs.

Since it seems to be troublesome, we will set up it to be killed automatically.

(require 'cl-lib)
(defadvice save-buffers-kill-emacs (around no-query-kill-emacs activate)
  "Prevent annoying "Active processes exist" query when you quit Emacs."
  (cl-letf (((symbol-function #'process-list) (lambda ())))

This is the all code.

Put the .importjs.js file into a react project

The importjs command will do such a thing with reference to .importjs.js in the root of the react project.
Ok I prepared the react project that has such structure in this time.

├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg

Create the .importjs.js

touch .importjs.js

I don’t know about the setting of imporjs, so refer to the file on the github.

Write this.

module.exports = {
  environments: ['node'],
  ignorePackagePrefixes: ['lodash.'],
  declarationKeyword: 'import',
  logLevel: 'debug',
  excludes: [ './build/**' ]

Save it.

We use it

From this part, react development environment is different between each engineer. but I try to do at the above environment.

The code of src/App.js like this.

import React from 'react';

class App extends React.Component{
    this.state = {
      txt: 'hello world'


        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)}/>

export default App;

We try to insert the “Input component” from components/Input.js automatically.
Move the cursor on the <Input> jsx and execute “C-c i” or “M-x import-js-import”.

The first time importjsd does not recognize the module under the project, so nothing will come out.
Run “C-c i” or “M-x import-js-import” again.
Then, I think that the component will be inserted automatically.

It works good.


I tried and error pretty much before I let it auto insert.
Good react development on Emacs


If you think this article is good, share it please

-, ,



Your email address will not be published. Required fields are marked *


How to use f.lux, blue light cut software

Abstract Hello everyone. In this time I will explain how to use f.lux. f.flux can reduce the amount of blue light as much as possible. f.lux can adjust the blue light cut rate with the seek bar. Please try using it. Condition You use Mac or Windows I will explain it in Mac PC. Download f.lux Go to the blew site. Click the center “Download f.lux” button. Once you have downloaded the zip file, let’s double-click it and extract it. Since The executable file is expanded in the download folder, move it to the Application folder. It’s over. Use …

How to add extension to Ungoogled chromium

English 日本語 Abstract Hello everybody, It’s candle. I don’t use Google Chrome so much because I am firefox user, but sometimes I need to use Chrome for extensions. Google Chrome is slow, and there are some personal information protection is loose. Detail is here. So, I use ungoogled chromium. The problem of ungoogle chromium is that is not easy to install extensions. In this article, I’ll show you how to install plugins. This article is according to the under link. Premise Ungoogled chromium has been installed

How to invert photoshop brush

English 日本語 Abstract Hello everyone. It’s candle. In this time, I’ll show you how to invert brush effect. Precondition Nothing

Build PlantUML environment on Mac using brew

Abstract Hello everybody it’s me candle. In this article, I would like to build a plantUML environment which can make UML easily on Mac. I have been used starUML for making UML. plantUML seems to be much more useful than that. Precondition You already use brew. Check java version I think that java is already installed in your mac pc. PlantUML can be run with mac default java. So you launch terminal app and check the java version with the below command. java -version Probably it can be work in java version around 1.8.x . Install graphviz graphviz is a …

Build flycheck + eslint environment supporting to react + es6 in Emacs.

Abstract Hello everyone it’s me candle. In this time let’s build emacs + eslint. There are many other syntax check packages such as jsHint, jsxHint, etc which check the coding rule of javascript. According to web info, these packages seem to be unable to adapt well with the latest javascript writing format such as React and es6. Nowadays eslint became to be mainstream. It has become used not only in emacs but also everywhere. I’m also emacs user, try it! I’m not a node JS and Elisp professional, it may contains useless writing or wrong writing. Please go easy on …

I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.