諸行無常

IT色々お勉強中のブログ

recat-native link とはなんなのか

recat-native link

  • jsだけは実現できないos毎に分けて記述された、objective-cやjavaのコードを自動で設定してくれる便利コマンドらしい

  • Javascript オンリーのモジュールを利用する場合には link は不要だけど、NativeCode を利用する場合には必要

  • XCode / Android Studio のプロジェクトに対して、 npm モジュールが、 XCode / AndroidStudio のプロジェクトファイルに対して必要な変更を、 自動 で代わりに行ってくれるコマンド

Parsing error: Unexpected tokenで困ってる

javascript vue webpack 
yarn add -D eslint eslint-plugin-vue
yarn remove eslint-plugin-html
 module.exports = {
     root: true,
-    parser: 'babel-eslint',
     parserOptions: {
+        parser: 'babel-eslint',
         sourceType: 'module'
     },
     env: {
         browser: true,
     },
-    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-    extends: 'standard',
+    extends:[
+      'plugin:vue/recommended',
+      // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+      'standard'
+    ],
     // required to lint *.vue files
     plugins: [
-        'html'
+        'vue'
     ],

To v2 or v3 from v1 | webpack

babel-loader 'bindings' of nullエラー

javascript vue webpack 
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/usr/local/hoge/node_modules/@babel/traverse/lib/scope/index.js:864:13)

TypeError: Cannot read property 'bindings' of null · Issue #3937 · storybooks/storybook · GitHub

babel-preset-envが必要なのか

babeljs.io

qiita.com

yarn add @babel/preset-env --dev

まだ動かん

stackoverflow.com

よく読んでみよう

babeljs.io

@ babel / preset-envは、ターゲット環境に必要な構文変換（およびオプションでブラウザのポリフィル）を微調整する必要なく、最新のJavaScriptを使用できるようにするスマートプリセットです。

これはあなたの生活を楽にし、JavaScriptのバンドルを小さくします！

browserslist、compat-table、electron-to-chromのような素晴らしいオープンソースプロジェクトがなければ、@ babel / preset-envは不可能です。

@ babel / preset-envはあなたが指定したターゲット環境をすべて取り、プラグインのリストをコンパイルするためにそれらのマッピングと照らし合わせてチェックし、それをBabelに渡します。

yarn remove babel-preset-env
 {
   "presets": [
-    ["env", {
+    [
+      "@babel/preset-env", {
       "modules": false,
       "targets": {
         "browsers": "> 1%",
-        "IE": 11,
+        "ie": 11,
         "uglify": true
       },
-      "useBuiltIns": true
+      "useBuiltIns": "entry"
     }]
   ],

設定の仕方が変わってた。

"@babel/preset-env": "^7.4.4",

babel動いた

webpack3→4でエラーになった babel-core

react vue webpack javascript

babel-coreが読み込めないらしい

Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
yarn upgrade babel-core

こっちじゃダメだった

yarn add @babel/core --dev

こっちでいけた あかんやろ、開発以外にも反映せな

yarn add @babel/core
Move us to the @babel namespace by switching to using “scoped” packages (details). This helps differentiate official packages, so babel-core becomes @babel/core (and no squatting)

babel-coreから@babel/core に変わったらしい ので消した

yarn remove babel-core

.babelrcも変更

     "plugins": [
     "transform-runtime",
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }]
+    "@babel/syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
   ]

新しいのに変更

babeljs.io

new.babeljs.io

Module build failed: TypeError: this.setDynamic is not a function · Issue #560 · babel/babel-loader · GitHub まだエラーが出るので修正

   "plugins": [
-    "transform-runtime",
+    "@babel/plugin-transform-runtime",
yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/plugin-transform-runtime

こっちもね インストール 続く

webpack3→4でエラーになった Chunk

javascript react vue webpack

Chunk.jsでエラー

 10% building 3/3 modules 0 active(node:135) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
ℹ ｢wds｣: Project is running at http://0.0.0.0:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /usr/local/hoge/public/packs
 78% module and chunk tree optimization unnamed compat plugin/usr/local/hoge/node_modules/webpack/lib/Chunk.js:849
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/usr/local/hoge/node_modules/webpack/lib/Chunk.js:849:9)

webpack v4以降、extract-text-webpack-pluginはCSSには使用すべきでは無い。代わりにmini-css-extract-pluginを使用することらしい。。。

Webpack 4 compatibility · Issue #701 · webpack-contrib/extract-text-webpack-plugin · GitHub

yarn remove extract-text-webpack-plugin
yarn add mini-css-extract-plugin

mini-css-extract-pluginに変更

-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const vue = require('./loaders/vue')
@@ -60,7 +60,7 @@ module.exports = {
     ]
   },
   plugins: [
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({

読み込みも変更で動いた

続く

webpack3→4でエラーになった loaders

javascript react vue webpack

webpack3→4でエラーになった

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
error Command failed with exit code 1.

webpack.js.org

lodersがrulesに変更したらしい

-    loaders: [
+    rules: [
       vue,

webpack.js.org

module.exports = {
  test: /\.(scss|sass)$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

これで解決

続く