Help us understand the problem. What is going on with this article?

Babel 6 + TS 環境に Stylelint を雑に入れると Jest が通らない

More than 1 year has passed since last update.

先日 Babel の v7.0.0 がついに 正式リリース されましたが、今自分がやっているプロジェクトでは訳あってもう少し 6 系を使う予定です。
そんな折、軽率に node_modules ディレクトリを削除して作り直したら Jest が通らなくなってしまい困ったので、おおまかな原因と解決方法をメモします。

前提

  • JavaScript と TypeScript で開発をしている
  • JS のトランスパイルには Babel 6 を使っている
  • Stylelint も使っている
  • Jest も使っている
  • ts-jest@23.1.4 を使っている

起きたこと

Jest が以下のようなエラーを吐くようになり、 TypeScript のテストをパス出来なくなってしまった。

 FAIL  path/to/test.spec.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'bindings' of null

      at Scope.moveBindingTo (node_modules/@babel/core/node_modules/@babel/traverse/lib/scope/index.js:867:13)
      at BlockScoping.updateScopeInfo (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
      at BlockScoping.run (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
      at PluginPass.BlockStatementSwitchStatementProgram (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
      at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)
      at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
      at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
      at TraversalContext.visitSingle (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)

node_modules/@babel/core

:thinking:

原因

  • stylelint をバージョン固定せずにインストールしたことで stylelint@9.5.0 がインストールされた。
  • stylelint@9.5.0 の依存パッケージである postcss-jsx@0.33.0 の依存関係により Babel 7 (@babel/core) がインストールされてしまった。
    • 6系と7系はディレクトリが違うので、トップレベルの node_modules で同時に存在できる。
  • Jest (ts-jest@23.1.4) は Babel の 6 でも 7 でも動くものの、7 があれあば先にそちらを参照する。

ここから先は追えてないんですが .babelrc なども Babel 6 を想定した記述になっているので、そこらへんでコケているんじゃないかと思います。

対応

とりあえずの対応として、Babel 7 がインストールされない Stylelint のバージョンを指定しました。
stylelint@9.4.0postcss-jsx に依存しておらず Babel 7 は入ってこないので、これを採用しました。

今後

ts-jest のこの見境ないバベり問題は ts-jest@23.10.1 で対応されるっぽいです :raised_hands:
roadmap to next version (probably `23.10.1`) · Issue #697 · kulshekhar/ts-jest

思ったこと (追記)

これって package-lock.json まで消さなければ起こらなかった問題では…?

shohei_ot
フリーのWebエンジニアです。フロントエンド、バックエンドをメインにやってます。動的に表示が切り替わるフロントエンドが好きです。 つまづいた事の共有とか情報整理に記事を書きます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away