Qiitaはじめました。
最近Qiitaはじめました。
上のような感じでコード中心のポストはこちらに書いていこうと考えています。
でも器用に書き分けるのが苦手なタイプなので、こちらにも今までのようにコードは書いていくかも。ま、そこら辺は適当にやっていきます。
SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"'ってエラー出て困ったけど、まずはエラーの内容を確認しろよって話
こんなエラーが出ました。
ログは割愛しています。
SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"' (2:0)
このエラー文に解決法がすでに載っているのですが、アホなので、最初になんでエラーなの！？となってしまい、ちょっと時間を食ってしまいました。。。いやいや、エラーの内容を読めよって話です。
ちなみにエラーを出したコードは下記。
const babylon = require('babylon'); const actions = `import { CREATE, SELECT, UPDATE, DELETE } from './mutation-types';` console.log(babylon.parse(actions));
下記のようにコードを変更することで解決です。
ちなみに解決の糸口はエラー読んだから、、、ではなく、下記のリンクです。
const babylon = require('babylon'); const actions = `import { CREATE, SELECT, UPDATE, DELETE } from './mutation-types';` console.log(babylon.parse(actions, {sourceType: 'module'}));
これについては本当に反省した。
予期せぬエラーが出て動揺しようが何しようが、まずはテメーの目の前に表示されているエラーを読めよって話でした。反省。
babel7を使用したとき、jestのテストがTypeError: Cannot read property 'loose' of undefinedでコケたので、その対応をメモ
babel7を使ってプラグインを試しに書いてみようとした際、jestのテストがTypeError: Cannot read property 'loose' of undefinedでコケたので、そのときの対応と原因を自分への備忘録としてメモする。
結論
最初に結論から書くと、babel-core@7.0.0-bridge.0を入れていなかったことが原因のため、npmなりyarnなりでこちらをインストールすることで解決した。
問題が起きたときのpackage.json
元々のpackage.jsonが下記。
{ /* 省略 */ "dependencies": { "@babel/cli": "^7.0.0-beta.36", "@babel/core": "^7.0.0-beta.36", "@babel/preset-env": "^7.0.0-beta.36", "babel-jest": "^22.0.4", "babel-plugin-tester": "^5.0.0", "jest": "^22.0.4" } }
実行時のログ
実行時のログがこんな感じ。
$ jest
FAIL src/index.test.js
● Test suite failed to run
TypeError: Cannot read property 'loose' of undefined (While processing preset: "/Users/{{ username }}/babel-plugin-sample/node_modules/@babel/preset-env/lib/index.js")
対応策
babel-core@7.0.0-bridge.0を入れる
yarn add babel-core@7.0.0-bridge.0
package.jsonがこういう形となる。
{ /* 省略 */ "dependencies": { "@babel/cli": "^7.0.0-beta.36", "@babel/core": "^7.0.0-beta.36", "@babel/preset-env": "^7.0.0-beta.36", "babel-core": "7.0.0-bridge.0", "babel-jest": "^22.0.4", "babel-plugin-tester": "^5.0.0", "jest": "^22.0.4" } }
2018年元旦、コーディングタイムコンパイルにメタプログラミング、トランスパイルという単語が、僕の心を捉えて離さない件
そもそものきっかけは先月、下記の記事を見たことでした。
ここで書かれている内容は、これからの時代においてとても大事なものになるだろう、と記事を読んで感じました。
私は経験も技術力もまだまだ乏しい人間ではありますが、コーディング時に生じるヒューマンエラーが生産性に大きな影響をもたらすことは何度も経験してきましたし、
技術力や知識をつけていくことでコーディング時間の短縮を図ろうとしても、途中で頭打ちになるのは目に見えています。
よって、コーディング量の削減と、エラーがそもそも発生しない仕組みを作ってしまったほうが合理的だと思います。
その合理的な方法として私はこの記事に書かれている内容が使えると思いました。
さて、上の記事を読んだ後、その記事内でも書かれていた下記の記事も読みました。
2017年に初めてReduxを触り始めた私が感じていた、"ボイラープレートが多くて面倒だな〜"という静かに降り積もりつつあった心の澱はこれで解消されるようです。
正直、すげーなと思いました。
個人的にはRadioheadがThe King of Limbsを出して夏の夕立のようなアフロビートでFuji Rockを沸かしたときぐらいのすげーなでした。
ま、ここらへんの知識は私には皆無なので、あまり喋りすぎて無知を露呈させるよりも、ここで書かれているs2sを試してみて、この世界に足を一歩踏み入れてみようと思います。
s2sのexampleを試してみる。
ここから備忘録になります。s2sのrepositoryをcloneしてexampleを試してみようと思います。
git clone https://github.com/akameco/s2s.git # shopping-cartサンプルを触ってみます cd examples/shopping-cart # 依存インストール yarn # 実行 yarn start
おっと、ここでエラーが発生しました。Redux関連のエラーのようです。。。
エラーログを貼っておきます。
TypeError: Cannot read property 'apply' of undefined
(anonymous function)
node_modules/redux/es/compose.js:29
26 |
27 | return funcs.reduce(function (a, b) {
28 | return function () {
> 29 | return a(b.apply(undefined, arguments));
30 | };
31 | });
32 | }
このエラーについては、既にissueで上がっており、Redux DevTools Extensionを入れることで解決するようでした。
というわけで、下記の拡張機能をChromeに入れ、再度yarn run startを実行すると正常に動作します。
では、いよいよお待ちかねのs2sを試してみます。
yarn run s2s
module.js:538
throw err;
^
Error: Cannot find module '../lib/cli'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/yukishindo/Desktop/try-s2s/s2s/packages/s2s-cli/bin/s2s.js:10:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
error Command failed with exit code 1.
ありゃ、何かエラーが出てしまったようです。
調べてみると、どうやら、yarn run s2sコマンドを打つ前に、s2sのルートにてyarn run buildを実施する必要があるようでした。
# s2sルートにて yarn run build
すると、上でcannot find module...と言われている箇所にlibディレクトリが作られ、下にbuildされたソースが吐き出されます。
さて、この状態で、再度s2sを実行してみます。
# shopping-cartサンプルに再度移動 cd examples/shopping-cart # s2s実行 yarn run s2s
早速触ってみます。。。す、すげー！
とりあえずやってみたことといえば、記事に書かれている通りの内容でApp以下にActionTypes.jsを新規作成し、Addアクションを追加だけなのですが、勝手に生成されていく様は、予想以上に感動を呼びました。
今年はさよならボイラープレートを胸に刻んでコードを書いていこうと思います。
書き初め代わりに2018を🐶🐶🐶🐶に変換するコンテンツフィルタを書こうとした(未完)
今年は戌年なので、書き初め代わりに2018を🐶🐶🐶🐶に変換するコンテンツフィルタを書こうとしました。
手元のポート8080でproxy serverとして動くので、ブラウザのネットワークプロキシ設定でlocalhost:8080を設定すると、取得したコンテンツ内の2018の文字が🐶🐶🐶🐶に変換されます。
上はABC Newsのトップページの一部分。
このプロキシサーバを通すことで下記のように変換されます。
書き初め代わりにちゃちゃっと書いてやろうと意気込んで書き始めたのですが、実際に動かすと落ちます。。。
落ちないように今後修正していこうと思います。
ソースは下記↓
package main import ( "bytes" "github.com/elazarl/goproxy" "io/ioutil" "log" "net/http" "strings" ) func main() { proxy := goproxy.NewProxyHttpServer() proxy.Verbose = true dogEmoji := "\U0001F436" println(dogEmoji) proxy.OnResponse().DoFunc(func(resp *http.Response, ctx *goproxy.ProxyCtx) *http.Response { body, err := ioutil.ReadAll(resp.Body) if err != nil { log.Fatal(err) } resp.Body.Close() b1 := strings.Replace(string(body), "2018", "\U0001F436\U0001F436\U0001F436\U0001F436", -1) resp.Body = ioutil.NopCloser(bytes.NewBufferString(b1)) return resp }) log.Fatal(http.ListenAndServe(":8080", proxy)) }
今年もよろしくお願いします。
yarn add @babel/babel-cliでインストールできない
babel7のcliを試そうとしたところ、ちょっと躓いたので、発生した事象と対応策を書いていく。
下記のコマンドを叩くと、エラーとなり、インストールできない。
yarn add @babel/babel-cli
下記のコマンドを実行することでインストールできる。
(npmでも同様の事象が起きることは確認済み。)
yarn add @babel/cli # npmの場合は npm install --save @babel/cli
2017年12月に書かれているbabel cli関連の記事を見ながら実施したら上記の事象に当たったので、もしかしたら最近変更があったのかもしれない。
(そこについては追って調べてはいない)
