カテゴリー: トラブルシューティング

[Windows] A language pack isn’t availableを回避

KAJIKEN コメントをする

A language pack isn’t available

Windows 10をHyper-Vでインストールした時に、なぜか英語表示しか出来ず、日本語に切り替えようとしてコントロールパネルのLanguage optionsを開いても、「A language pack isn’t available」と出て、言語パックのインストールすらできない状態になっていました。

手動で言語パックを落としてきてインストールすることで回避できたので載せておきます。

 

言語パックをダウンロード

怪しげなサイトに、Microsoftサイトにある言語パックの直リンクが載っているので、自分の環境にあったものをダウンロードしてきます。
https://www.itechtics.com/windows-10-version-1709-language-packs-direct-download-links/

 

lpksetup.exe

Win + Rでファイル名を指定して実行ダイアログを開き、下記を起動する。
lpksetup.exe

“C:\Windows\System32\lpksetup.exe”（言語パック インストーラー）を直接起動しても同じです。

lpksetupを起動したら、「Install display languages」（表示言語のインストール）をクリックし、「Browse…」（参照…）により先ほどダウンロードしておいた言語パックを指定します。
「Next」でインストールが開始されます。

ProgressがCompletedになり、インストールが完了したら「Close」ボタンでlpksetupを終了します。

コントロールパネルのLanguage optionsを開くと、「A language pack isn’t available」が「Available」に代わり、「Make this the primary language」というリンクが押せるようになっているので、それをクリックします。

サインアウトしろと出るので、サインアウトもしくはWindows再起動を行うと日本語になります。

riotjs-loaderを3.0.0->4.0.0に変更するとscoped cssがデフォルトになる

KAJIKEN コメントをする

riotjs-loaderの実態

別の記事で、riotjs-loaderを 3.0.0 から 4.0.0
に変更すると、真偽値属性が使えるようになると書きましたが、実際は riotjs-loader が依存している riot-compiler が 2.3.22 から 3.0.0 に変更になっただけでした。

つまり、どういうことかというと、自分のプロジェクトでriot v3を使っていたつもりだけど、今まではコンパイラがv2指定だったので、旧バージョンで動作していたということ。
件名の内容に戻ると、scoped css は riot v3 からデフォルトでした。
確かにコンポーネント志向なので、それで正しい動きですが、loaderから依存していたとは思っていませんでした…。

riot-compilerを最新版にする

riot-compiler の最新は現時点で 3.2.4 でした。
riotjs-loader は riot-compiler が dependencies に定義されている点が厄介で、自分のプロジェクトの node_modules\riot-compiler を使用してくれず、 node_modules\riotjs-loader\node_modules\riot-compiler が使用されます。

あまり自由が効かないので、この際自分でloaderを作ってみました。
ついでに、コンパイルオプションも使うつもりはなかったので、差別化としてシンプルなloaderにしました。

riot-simple-loader

riot-simple-loader
https://www.npmjs.com/package/riot-simple-loader

npmモジュールとして公開しているので、良かったら使ってやってください。

使い方は上記の公式npmページと、サンプルをgithubにあげていますので参考にしてください。
https://github.com/nekijak/riot-simple-loader-sample

Unexpected top-level property “ecmaFeatures”

KAJIKEN コメントをする

VS Codeでのエラー

少し前に Sublime Text 2 から Visual Studio Code (VS Code) に乗り換えました。
VSCodeが出てすぐに使ったことはあったのですが、当初はどうにも使いづらくてほったらかしにしていました。
最近何気なしにVSCodeを使ってみると、ずいぶんと使いやすくなっている。見た目も良くなっているし、拡張機能もたくさん出ていた。
 
そして、いざ乗り換えようと使っていたら、JavaScriptファイルを編集すると、やたらと「Unexpected top-level property “ecmaFeatures”」が出る。
 
 

エラーが出るのはES Lint

ES-Lintを使っているんですが、どうもエラーはこのプラグインから出ている。
setting.jsonをいじっても、プロジェクトの.eslintrc.jsonをいじっても、全然エラーが鳴りやまない。
ecmaFeaturesの指定を消しても、挙句の果てに全部の設定を消しても出てくるという状態。
 
 

犯人はユーザーディレクトリの .eslintrc

大混乱の中、以下の記述を見付けた。

Maybe this will be helpful for someone: in my case wrong .eslintrc has been located in c:\Users\[username]\ directory (.tslintrc, .coffeelintrc and .csslintrc also been there – i think that these files were created automatically after esint installation).

Looks like eslint loaded it first and failed. After removing this file eslint works fine.

https://github.com/eslint/eslint/issues/8726
 
c:\users\{username}\.eslintrc…だと？
 
確かに存在しており、「ecmaFeatures」がトップレベルでプロパティ定義されていた。
…昔に使ったときに設定されたファイルだろうか。
 
どうやら、ES-Lintがバージョンアップされ、ecmaFeaturesがparserOptionsになったが、このユーザーフォルダ直下のファイルの中身が昔の状態のまま放置されていたことが原因のようだ。
ecmaFeaturesをparserOptionsに書き換えて解決。

1. Remove all ecmaFeatures that are specific to ES6. Replace with ecmaVersion. Things like globalReturn, jsx, and experimental features would remain. This would also be a change in Espree.

2. Introduce sourceType that is “script” by default and can be set to “module”.

3. Move these fields into a new parserOptions field in configuration.

https://github.com/eslint/eslint/issues/4641

Riot.jsで真偽値属性(disabledなど)が「__disabled」になる問題

KAJIKEN コメントをする

Riot.jsについて

最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。
検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。
 
 

__disabled問題

Riot.jsでは、disabled=”{ !data.reference[0] }”のように判定式でdisabledが出来る。と公式ガイドに書いてある。

真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。
<input checked={ null }> は <input> になります。

http://riotjs.com/ja/guide/#真偽値属性

しかし、いざ使おうとすると、何故か「__disabled」になってしまい、全然機能してくれなかった。
どこで「__disabled」になっているかというと、コンパイル時に変換されているのだが、それでも普通はDOM評価時には「disabled」になるはずが、DOM評価されても、「__disabled」となっていた。
 
 

解決策

仕方がないのでdomReady後に無理やり「__disabled」を自前で置き換えて回避してましたが、別件でnpmモジュールを更新していたら、この問題が解決。
riotjs-loaderを3.0.0から4.0.0にしたら、ちゃんと「disabled」になりました。
単純な解決方法だけど、調べた限り全然情報が無かったので、同じようにハマっている人の救いになればと思います。

 
 

余談

これは私だけかもしれませんが、riotjs-loaderを4.0.0にしたら、webpack.config.jsの書き換えが必要でした。
type: 'babel' → type: 'none' に変更。


  {

    enforce: "pre",

    test: /\.tag$/,

    exclude: /node_modules/,

    use: [

      {

        loader: 'riotjs-loader',

        options: {

          type: 'none'

        }

      }

    ],

  }