注目

新型コロナウィルスの対応について

当事務所は基本的にリモートワークで業務遂行を行うため、打ち合わせに関してもWeb会議ツールでの対応を行なっております。通常業務での感染の心配はございません。但し、打ち合わせなどで出社の必要がある場合は当面はマスクを着用させていただきます。

事務所を廃止しました

現在は会社員になり、事務所は必要ないため廃止しています。
システムエンジニア領域のお仕事に関しては副業規定にかかるためお受けできません。

直接関係のない動画制作分野に関してはご相談承ります。
よろしくお願いいたします。

npm ERR! Failed at the chromedriver@2.46.0 install scriptの解決法

npm install 時のchromedriverのエラーの解決方法を紹介します。

[エラー内容]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.46.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chromedriver@2.46.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.

[解決策]
npm install chromedriver
–chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

[参考元]
下記リンクのCustom binaries urlを参照してください
https://github.com/coreui/coreui-free-vue-admin-template/issues/168

起動時のnode-sassエラーの解決法（Windows）

とても以前からあるエラーで2016年頃から確認されているものを紹介します。
他の人のプロジェクトをnpm installする際によく見られるエラーです。
node-sassはネイティブモジュール（C++）であるためビルドされた当時のNodeのバージョンに関連付けられているため、基本的にNodeの変更があれば再構築が必要となります。

[エラー内容]
Module build failed: Error: ENOENT: no such file or directory, scandir
‘[APP_DIR]\node_modules\node-sass\vendor’

[解決策]
npm rebuild node-sass

[参考元]
Windowsマシンでコンパイルするには、node-gypの前提条件が必要となります。
https://www.npmjs.com/package/node-sass-vendor
SASS_BINARY_PATHが原因の場合もあるようです。
その場合は下記コマンドでどこをみているのか確認してください。
npm config get sass_binary_path
https://github.com/sass/node-sass/issues/1812

npm run buildした後にManifest: Line 1, column: 1, Unexpected token

これはcrossorigin記述が抜けている事で起こる問題です。
ユーザの資格情報を必要とするマニフェストを読み取るときには指定する必要があります。

// Location: public/index.html

// ERROR
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

// OK
<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json">

一年前のReact Appではこのエラーは起きません。
バージョンアップ時には気をつけましょう。

particles.js:668 Uncaught TypeError: Super expression must either be null or a function, not undefined

Uncaught TypeError: Super expression must either be null or a function, not
undefined　particles.js:668

一年前のReact Appをバージョンアップしようとしたが、
このエラーで本番環境のみ、白画面になり時間を消費しました。
検索しても情報が1件しかないので共有します。

結論を先に言うと問題は”react-particles-js”のバージョンをあげたことにより起きていました。
検証して広義ではコードの問題なんだけど、
単純にバージョンを下げれば動くということです。
私の場合はReact本体側の問題ではありませんでした。

時間があれば古い実装を改修しましょう。

It means that simply lowering the version will work.
In my case, it wasn’t a problem with React itself.
If you have a little time, let’s fix it according to the new version.

私のpackage.jsonの一部を紹介します。

// 2019.01 base dependencies [OK]
"material-ui": "^0.20.2",
"react": "^16.7.0",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.7.0",
"react-particles-js": "^2.4.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"rebass": "^3.0.0"
// Error dependencies [NG]
"material-ui": "^0.20.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-particles-js": "^2.7.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"rebass": "^3.0.0"
// OK dependencies [OK]
"material-ui": "^0.20.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-particles-js": "^2.4.2",
"react-router": "^5.2.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3",
"rebass": "^3.2.2"

React Appは開発環境では全く問題が起きなく、中々アバウトでも動くので早めにbuildして動作検証はした方が良いなと思いました。

他のバッケージのバージョンアップでも中々手がかかる印象でした。