Javascript

スポンサーリンク
Javascript

プロジェクトごとにNodeのバージョンを変更する「Volta」を使う

Nodeのバージョンアップが激しすぎて1年も立つと過去のプロジェクトは最新のNodeで動作しなくなる。プロジェクトを変えるたびにNodeのバージョンを切り替えのは大変手間だが、それを自動的にやってくれるのが「VOLTA」である。 ...
Javascript

create-react-app で作ったReactアプリにMapbox GL JSを使いビルドするとエラーになる

npm start でWebPack Dev Serverで動作させているぶんには問題ないのだが、いざBuildを行いWebサーバー上でモジュールをデプロイし実行させると以下のエラー An error occurred whi...
Javascript

reactで開発したアプリをWebサーバへ載せて動作させたら「Uncaught SyntaxError: Unexpected token ‘<'」エラーが発生

数時間ハマってしまったのでメモ。 原因はscriptタグによるjsファイルが読み込まれないこと 以下を見直す package.json "homepage": "***" React Routerを使っている場合...
react.js

create-react-appで作成したReactアプリのbuild出力先を変更する方法

npm run eject を実行することで隠蔽されていたWebPack関係のファイルが出現し設定を色々変更する事ができるようになる。
react.js

react にて npm run build実行時に出力先のディレクトリにあるファイルが削除されないようにする

npm run build を実行すると出力先ディレクトリのファイルがすべて削除されてしまう。 サーバーサイドのスクリプトなんかを同ディレクトリへ配置しておきたい場合困る。 /scripts/build.js を変更することで元フ...
react.js

ReactにてError: error:0308010C:digital envelope routines::unsupported エラーが発生

(node:43616) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. (Use `node --tra...
Javascript

axios で postしても中身が取れない

const res = await axios .post("/test.php", {aaa:"aaa",bbb:"bbb"}) .catch((err) => { return err....
react.js

react開発時に特定のリクエストを外部サーバへ転送する方法

create-react-app hogehoge cd hogehoge npm start Webpack dev serverが起動しホットリロードで開発ができるようになる。 フロント側の開発ならこれでいいのだが、サーバーサ...
react.js

MUI にてエラー「Module not found: Can’t resolve ‘@emotion/react’ in ‘***/node_modules/@mui/styine’」

./node_modules/@mui/styled-engine/index.js Module not found: Can't resolve '@emotion/react' in '***/node_modules/@mui/s...
react.js

ractでcssでコンパイルエラー「Error: Can’t resolve ‘./images/***.***’ in ‘***/src’ 」

Failed to compile. ./src/***.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader...
Javascript

Reactでエラー「Error: The `style` prop expects a mapping from style properties to values, not a string」

RactでJSXにStyleを記載する場合、HTML時代で書いていた以下のような書き方はNG。 <div id="hogehoge" style="width:600px;height:940px;"> 実行すると以下...
Javascript

MATERIAL-UIがVer5になってMUIと名称変更されている

ReactのUIライブラリであるMATERIL-UIがバージョンアップしてMUIと名称ごと変わっている。サンプルを動かしてみたがエラーが出て動作しなかった。 Ver4のURLは以下に変更となっている。 Ver4は...
FOSS4G

東京都の町丁目別 火災危険度をマッピングした

町丁目別 火災危険度マップを作った。 これは東京都消防庁が公開しているオープンデータを加工しマップアプリ化したもの。作り方をすぐ忘れるのでメモしておく。 【データソース】 ・e-Statから境界データ(国勢調査 小地域)...
Javascript

PHPStormでprettierを使ってコード整形をする

例:create-react-app でコードを作りコード保存時にprettierで自動整形させる。 # npx create-react.app hogehoge # cd hogehoge # npm install pretti...
Javascript

WEB IDEのCodeSandboxを使う

Web開発において開発環境の構築は非常に面倒で新しい言語にチャレンジしようとしてもそれが足かせになる事が多い そんなときはWEB IDEを使おう CodeSanbBoxであればメジャーなJavaScriptの開発環境が用意さ...
Javascript

Vue create で「Warning: name can no longer contain capital letter」 エラー

vue create で新規プロジェクトを作る際プロジェクト名へ大文字は入力出来ないようだ。 % vue create vuetifyTodo Invalid project name: "vuetifyTodo" Warni...
Javascript

PHPStormでESLintのチェックを有効にする

vueで開発をしているとeslintのフォーマットチェックでビルドがエラーとなりなかなか作業が捗らない。 PHPStormでのエディターでリアルタイムでeslintのチェックが実行され警告をだしてくれるようになるので手順をメモする。...
Javascript

Vue3でnpm run serve を起動してソースを変更してもコンパイルエラーとなる場合の対処法

Vue3でnpm run serveを起動しコーディングしていたらソースを変更するたびにコンパイルエラーとなり、毎回npm run serveを再起動しておりました。これは面倒なので、調べるとnodejsが古い可能性があるとのこと。...
Javascript

vue で buildした時CSSやJSファイルが絶対パスでリンクされない対処

vue.js にて npm run buildすると生成されるJSやCSSは/css/xxxx.css だったり /js/xxxx.js だったりしてドメイン直下に配置する前提でビルドされる。 アプリによっては/myapp/ な...
Javascript

npm install 時の –save オプションは不要

ネット上では npm install hogehoge --saveという記述を多数見かけるが、npmのver5以上は --save オプションが不要となったこれはもともと packege.json の dependencies へ...
スポンサーリンク
タイトルとURLをコピーしました