はじめに
Rails６で新しくアプリを作ろうと思ったがハマってしまったので、備忘録を残していきます。
アプリ作成開始
いつも通りrails newをしていきます。
$ rails new original
さてサーバー起動をさせよう。
$ rails s
するとエラー発生。
Traceback (most recent call last):
77: from bin/rails:3:in `<main>'
76: from bin/rails:3:in `load'
75: from /Users/???/projects/original/bin/spring:15:in `<top (required)>'
74: from /Users/???/.rbenv/versions/2.6.5/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
73: from /Users/???/.rbenv/versions/2.6.5/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
・
・
(省略)
・
・
/Users/？？？/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/webpacker-4.3.0/lib/webpacker/configuration.rb:95:in `rescue in load': Webpacker configuration file not found /Users/？？？/projects/original/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /Users/harimayugo/projects/original/config/webpacker.yml (RuntimeError)
下記コマンド実行しろと言われているので実行します。
$ rails webpacker:install
sh: node: command not found
sh: nodejs: command not found
Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/
Node.jsがインストールされてないと言われている
しかし、以前インストールしているが原因不明
vim ~/.zshrc
export PATH="/usr/local/opt/node@14/bin:$PATH" #パスを登録する
source ~/.zshrc #登録を反映する
再度webpackerをインストール
create config/webpacker.yml
Copying webpack core config
create config/webpack
create config/webpack/development.js
create config/webpack/environment.js
create config/webpack/production.js
create config/webpack/test.js
Copying postcss.config.js to app root directory
create postcss.config.js
Copying babel.config.js to app root directory
create babel.config.js
Copying .browserslistrc to app root directory
create .browserslistrc
The JavaScript app source directory already exists
apply /Users/harimayugo/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/webpacker-4.3.0/lib/install/binstubs.rb
Copying binstubs
exist bin
create bin/webpack
create bin/webpack-dev-server
append .gitignore
Installing all JavaScript dependencies [4.3.0]
run yarn add @rails/webpacker@4.3.0 from "."
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning @rails/webpacker > node-sass > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @rails/webpacker > node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @rails/webpacker > node-sass > request > har-validator@5.1.5: this library is no longer supported
warning @rails/webpacker > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @rails/webpacker > webpack > watchpack > chokidar > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
warning @rails/webpacker > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @rails/webpacker > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 597 new dependencies.
info Direct dependencies
├─ @rails/actioncable@6.1.0
├─ @rails/activestorage@6.1.0
├─ @rails/ujs@6.1.0
├─ @rails/webpacker@4.3.0
└─ turbolinks@5.2.0
info All dependencies
├─ @babel/code-frame@7.12.11
├─ @babel/compat-data@7.12.7
├─ @babel/core@7.12.10
├─ @babel/generator@7.12.11
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.10.4
├─ @babel/helper-compilation-targets@7.12.5
├─ @babel/helper-define-map@7.10.5
├─ @babel/helper-explode-assignable-expression@7.12.1
├─ @babel/helper-get-function-arity@7.12.10
├─ @babel/helper-hoist-variables@7.10.4
├─ @babel/helper-member-expression-to-functions@7.12.7
├─ @babel/helper-optimise-call-expression@7.12.10
├─ @babel/helper-plugin-utils@7.10.4
├─ @babel/helper-validator-option@7.12.11
├─ @babel/helper-wrap-function@7.12.3
├─ @babel/helpers@7.12.5
├─ @babel/highlight@7.10.4
├─ @babel/parser@7.12.11
├─ @babel/plugin-proposal-async-generator-functions@7.12.12
├─ @babel/plugin-proposal-class-properties@7.12.1
├─ @babel/plugin-proposal-dynamic-import@7.12.1
├─ @babel/plugin-proposal-export-namespace-from@7.12.1
├─ @babel/plugin-proposal-json-strings@7.12.1
├─ @babel/plugin-proposal-logical-assignment-operators@7.12.1
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.12.1
├─ @babel/plugin-proposal-numeric-separator@7.12.7
├─ @babel/plugin-proposal-object-rest-spread@7.12.1
├─ @babel/plugin-proposal-optional-catch-binding@7.12.1
├─ @babel/plugin-proposal-optional-chaining@7.12.7
├─ @babel/plugin-proposal-private-methods@7.12.1
├─ @babel/plugin-proposal-unicode-property-regex@7.12.1
├─ @babel/plugin-syntax-class-properties@7.12.1
├─ @babel/plugin-syntax-top-level-await@7.12.1
├─ @babel/plugin-transform-arrow-functions@7.12.1
├─ @babel/plugin-transform-async-to-generator@7.12.1
├─ @babel/plugin-transform-block-scoped-functions@7.12.1
├─ @babel/plugin-transform-block-scoping@7.12.12
├─ @babel/plugin-transform-classes@7.12.1
├─ @babel/plugin-transform-computed-properties@7.12.1
├─ @babel/plugin-transform-destructuring@7.12.1
├─ @babel/plugin-transform-dotall-regex@7.12.1
├─ @babel/plugin-transform-duplicate-keys@7.12.1
├─ @babel/plugin-transform-exponentiation-operator@7.12.1
├─ @babel/plugin-transform-for-of@7.12.1
├─ @babel/plugin-transform-function-name@7.12.1
├─ @babel/plugin-transform-literals@7.12.1
├─ @babel/plugin-transform-member-expression-literals@7.12.1
├─ @babel/plugin-transform-modules-amd@7.12.1
├─ @babel/plugin-transform-modules-commonjs@7.12.1
├─ @babel/plugin-transform-modules-systemjs@7.12.1
├─ @babel/plugin-transform-modules-umd@7.12.1
├─ @babel/plugin-transform-named-capturing-groups-regex@7.12.1
├─ @babel/plugin-transform-new-target@7.12.1
├─ @babel/plugin-transform-object-super@7.12.1
├─ @babel/plugin-transform-property-literals@7.12.1
├─ @babel/plugin-transform-regenerator@7.12.1
├─ @babel/plugin-transform-reserved-words@7.12.1
├─ @babel/plugin-transform-runtime@7.12.10
├─ @babel/plugin-transform-shorthand-properties@7.12.1
├─ @babel/plugin-transform-spread@7.12.1
├─ @babel/plugin-transform-sticky-regex@7.12.7
├─ @babel/plugin-transform-template-literals@7.12.1
├─ @babel/plugin-transform-typeof-symbol@7.12.10
├─ @babel/plugin-transform-unicode-escapes@7.12.1
├─ @babel/plugin-transform-unicode-regex@7.12.1
├─ @babel/preset-env@7.12.11
├─ @babel/preset-modules@0.1.4
├─ @babel/runtime@7.12.5
├─ @babel/traverse@7.12.12
├─ @npmcli/move-file@1.0.1
├─ @rails/actioncable@6.1.0
├─ @rails/activestorage@6.1.0
├─ @rails/ujs@6.1.0
├─ @rails/webpacker@4.3.0
├─ @types/json-schema@7.0.6
├─ @types/parse-json@4.0.0
├─ @types/q@1.5.4
├─ @webassemblyjs/floating-point-hex-parser@1.9.0
├─ @webassemblyjs/helper-code-frame@1.9.0
├─ @webassemblyjs/helper-fsm@1.9.0
├─ @webassemblyjs/helper-wasm-section@1.9.0
├─ @webassemblyjs/wasm-edit@1.9.0
├─ @webassemblyjs/wasm-opt@1.9.0
├─ @xtuc/ieee754@1.2.0
├─ abbrev@1.1.1
├─ acorn@6.4.2
├─ ajv-errors@1.0.1
├─ ajv-keywords@3.5.2
├─ ajv@6.12.6
├─ amdefine@1.0.1
├─ ansi-styles@3.2.1
├─ anymatch@3.1.1
├─ are-we-there-yet@1.1.5
├─ argparse@1.0.10
├─ arr-flatten@1.1.0
├─ array-find-index@1.0.2
├─ asn1.js@5.4.1
├─ asn1@0.2.4
├─ assert@1.5.0
├─ assign-symbols@1.0.0
├─ async-each@1.0.3
├─ async-foreach@0.1.3
├─ asynckit@0.4.0
├─ atob@2.1.2
├─ autoprefixer@9.8.6
├─ aws-sign2@0.7.0
├─ aws4@1.11.0
├─ babel-loader@8.2.2
├─ babel-plugin-macros@2.8.0
├─ base@0.11.2
├─ base64-js@1.5.1
├─ bcrypt-pbkdf@1.0.2
├─ binary-extensions@2.1.0
├─ bindings@1.5.0
├─ block-stream@0.0.9
├─ bluebird@3.7.2
├─ boolbase@1.0.0
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-rsa@4.1.0
├─ browserify-sign@4.2.1
├─ browserify-zlib@0.2.0
├─ buffer-xor@1.0.3
├─ buffer@4.9.2
├─ builtin-status-codes@3.0.0
├─ cacache@13.0.1
├─ cache-base@1.0.1
├─ caller-callsite@2.0.0
├─ caller-path@2.0.0
├─ callsites@2.0.0
├─ camelcase-keys@2.1.0
├─ camelcase@5.3.1
├─ caniuse-lite@1.0.30001173
├─ case-sensitive-paths-webpack-plugin@2.3.0
├─ caseless@0.12.0
├─ chokidar@3.4.3
├─ chownr@1.1.4
├─ chrome-trace-event@1.0.2
├─ class-utils@0.3.6
├─ clean-stack@2.2.0
├─ cliui@5.0.0
├─ clone-deep@4.0.1
├─ coa@2.0.2
├─ code-point-at@1.1.0
├─ collection-visit@1.0.0
├─ color-convert@1.9.3
├─ color-name@1.1.3
├─ color-string@1.5.4
├─ color@3.1.3
├─ combined-stream@1.0.8
├─ commander@2.20.3
├─ compression-webpack-plugin@4.0.1
├─ concat-map@0.0.1
├─ concat-stream@1.6.2
├─ console-browserify@1.2.0
├─ console-control-strings@1.1.0
├─ constants-browserify@1.0.0
├─ convert-source-map@1.7.0
├─ copy-concurrently@1.0.5
├─ copy-descriptor@0.1.1
├─ core-js-compat@3.8.2
├─ core-js@3.8.2
├─ core-util-is@1.0.2
├─ create-ecdh@4.0.4
├─ create-hmac@1.1.7
├─ cross-spawn@3.0.1
├─ crypto-browserify@3.12.0
├─ css-blank-pseudo@0.1.4
├─ css-color-names@0.0.4
├─ css-declaration-sorter@4.0.1
├─ css-has-pseudo@0.10.0
├─ css-loader@3.6.0
├─ css-prefers-color-scheme@3.1.1
├─ css-select-base-adapter@0.1.1
├─ css-select@2.1.0
├─ css-tree@1.0.0-alpha.37
├─ css-what@3.4.2
├─ cssdb@4.4.0
├─ cssnano-preset-default@4.0.7
├─ cssnano-util-raw-cache@4.0.1
├─ cssnano-util-same-parent@4.0.1
├─ cssnano@4.1.10
├─ csso@4.2.0
├─ currently-unhandled@0.4.1
├─ cyclist@1.0.1
├─ dashdash@1.14.1
├─ debug@2.6.9
├─ decamelize@1.2.0
├─ decode-uri-component@0.2.0
├─ delayed-stream@1.0.0
├─ delegates@1.0.0
├─ des.js@1.0.1
├─ detect-file@1.0.0
├─ diffie-hellman@5.0.3
├─ dom-serializer@0.2.2
├─ domain-browser@1.2.0
├─ domelementtype@1.3.1
├─ domutils@1.7.0
├─ dot-prop@5.3.0
├─ duplexify@3.7.1
├─ ecc-jsbn@0.1.2
├─ electron-to-chromium@1.3.634
├─ emoji-regex@7.0.3
├─ enhanced-resolve@4.3.0
├─ entities@2.1.0
├─ errno@0.1.8
├─ error-ex@1.3.2
├─ escalade@3.1.1
├─ escape-string-regexp@1.0.5
├─ eslint-scope@4.0.3
├─ esprima@4.0.1
├─ esrecurse@4.3.0
├─ estraverse@4.3.0
├─ esutils@2.0.3
├─ events@3.2.0
├─ expand-brackets@2.1.4
├─ expand-tilde@2.0.2
├─ extend@3.0.2
├─ extglob@2.0.4
├─ extsprintf@1.3.0
├─ fast-deep-equal@3.1.3
├─ fast-json-stable-stringify@2.1.0
├─ file-loader@4.3.0
├─ file-uri-to-path@1.0.0
├─ fill-range@4.0.0
├─ findup-sync@3.0.0
├─ flatted@2.0.2
├─ flatten@1.0.3
├─ flush-write-stream@1.1.1
├─ for-in@1.0.2
├─ forever-agent@0.6.1
├─ form-data@2.3.3
├─ from2@2.3.0
├─ fs.realpath@1.0.0
├─ fsevents@2.1.3
├─ fstream@1.0.12
├─ gauge@2.7.4
├─ gaze@1.1.3
├─ gensync@1.0.0-beta.2
├─ get-caller-file@2.0.5
├─ get-intrinsic@1.0.2
├─ getpass@0.1.7
├─ glob-parent@5.1.1
├─ glob@7.1.6
├─ global-modules@2.0.0
├─ global-prefix@3.0.0
├─ globule@1.3.2
├─ har-schema@2.0.0
├─ har-validator@5.1.5
├─ has-ansi@2.0.0
├─ has-unicode@2.0.1
├─ has-value@1.0.0
├─ hash.js@1.1.7
├─ hex-color-regex@1.1.0
├─ hmac-drbg@1.0.1
├─ hosted-git-info@2.8.8
├─ hsl-regex@1.0.0
├─ hsla-regex@1.0.0
├─ html-comment-regex@1.1.2
├─ http-signature@1.2.0
├─ https-browserify@1.0.0
├─ ieee754@1.2.1
├─ import-cwd@2.1.0
├─ import-fresh@2.0.0
├─ import-from@2.1.0
├─ import-local@2.0.0
├─ in-publish@2.0.1
├─ indent-string@2.1.0
├─ infer-owner@1.0.4
├─ inflight@1.0.6
├─ ini@1.3.8
├─ interpret@1.4.0
├─ is-absolute-url@2.1.0
├─ is-accessor-descriptor@1.0.0
├─ is-arrayish@0.2.1
├─ is-binary-path@2.1.0
├─ is-callable@1.2.2
├─ is-color-stop@1.1.0
├─ is-core-module@2.2.0
├─ is-data-descriptor@1.0.0
├─ is-date-object@1.0.2
├─ is-descriptor@1.0.2
├─ is-directory@0.3.1
├─ is-extglob@2.1.1
├─ is-finite@1.1.0
├─ is-glob@4.0.1
├─ is-negative-zero@2.0.1
├─ is-obj@2.0.0
├─ is-plain-obj@1.1.0
├─ is-plain-object@2.0.4
├─ is-resolvable@1.1.0
├─ is-svg@3.0.0
├─ is-symbol@1.0.3
├─ is-typedarray@1.0.0
├─ is-utf8@0.2.1
├─ is-windows@1.0.2
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ isexe@2.0.0
├─ isstream@0.1.2
├─ jest-worker@25.5.0
├─ js-base64@2.6.4
├─ js-tokens@4.0.0
├─ jsesc@2.5.2
├─ json-parse-better-errors@1.0.2
├─ json-parse-even-better-errors@2.3.1
├─ json-schema-traverse@0.4.1
├─ json-schema@0.2.3
├─ json-stringify-safe@5.0.1
├─ jsprim@1.4.1
├─ last-call-webpack-plugin@3.0.0
├─ lines-and-columns@1.1.6
├─ load-json-file@1.1.0
├─ loader-runner@2.4.0
├─ locate-path@3.0.0
├─ lodash.get@4.4.2
├─ lodash.has@4.5.2
├─ lodash.memoize@4.1.2
├─ lodash.template@4.5.0
├─ lodash.templatesettings@4.2.0
├─ lodash.uniq@4.5.0
├─ lodash@4.17.20
├─ loud-rejection@1.6.0
├─ make-dir@3.1.0
├─ map-obj@1.0.1
├─ map-visit@1.0.0
├─ mdn-data@2.0.4
├─ memory-fs@0.4.1
├─ meow@3.7.0
├─ merge-stream@2.0.0
├─ micromatch@3.1.10
├─ miller-rabin@4.0.1
├─ mime-db@1.45.0
├─ mime-types@2.1.28
├─ mini-css-extract-plugin@0.8.2
├─ minimalistic-crypto-utils@1.0.1
├─ minimatch@3.0.4
├─ minizlib@2.1.2
├─ mississippi@3.0.0
├─ mixin-deep@1.3.2
├─ mkdirp@0.5.5
├─ ms@2.0.0
├─ nan@2.14.2
├─ nanomatch@1.2.13
├─ nice-try@1.0.5
├─ node-gyp@3.8.0
├─ node-libs-browser@2.2.1
├─ node-releases@1.1.69
├─ node-sass@4.14.1
├─ nopt@3.0.6
├─ normalize-package-data@2.5.0
├─ normalize-range@0.1.2
├─ normalize-url@1.9.1
├─ npmlog@4.1.2
├─ nth-check@1.0.2
├─ num2fraction@1.2.2
├─ number-is-nan@1.0.1
├─ oauth-sign@0.9.0
├─ object-assign@4.1.1
├─ object-copy@0.1.0
├─ object.getownpropertydescriptors@2.1.1
├─ object.values@1.1.2
├─ optimize-css-assets-webpack-plugin@5.0.4
├─ os-browserify@0.3.0
├─ os-homedir@1.0.2
├─ os-tmpdir@1.0.2
├─ osenv@0.1.5
├─ p-limit@2.3.0
├─ p-locate@3.0.0
├─ p-map@3.0.0
├─ p-try@2.2.0
├─ pako@1.0.11
├─ parallel-transform@1.2.0
├─ parent-module@1.0.1
├─ parse-asn1@5.1.6
├─ parse-json@4.0.0
├─ parse-passwd@1.0.0
├─ pascalcase@0.1.1
├─ path-browserify@0.0.1
├─ path-complete-extname@1.0.0
├─ path-dirname@1.0.2
├─ path-exists@3.0.0
├─ path-is-absolute@1.0.1
├─ path-key@2.0.1
├─ path-parse@1.0.6
├─ path-type@4.0.0
├─ performance-now@2.1.0
├─ picomatch@2.2.2
├─ pinkie@2.0.4
├─ pnp-webpack-plugin@1.6.4
├─ posix-character-classes@0.1.1
├─ postcss-attribute-case-insensitive@4.0.2
├─ postcss-calc@7.0.5
├─ postcss-color-functional-notation@2.0.1
├─ postcss-color-gray@5.0.0
├─ postcss-color-hex-alpha@5.0.3
├─ postcss-color-mod-function@3.0.3
├─ postcss-color-rebeccapurple@4.0.1
├─ postcss-colormin@4.0.3
├─ postcss-convert-values@4.0.1
├─ postcss-custom-media@7.0.8
├─ postcss-custom-properties@8.0.11
├─ postcss-custom-selectors@5.1.2
├─ postcss-dir-pseudo-class@5.0.0
├─ postcss-discard-comments@4.0.2
├─ postcss-discard-duplicates@4.0.2
├─ postcss-discard-empty@4.0.1
├─ postcss-discard-overridden@4.0.1
├─ postcss-double-position-gradients@1.0.0
├─ postcss-env-function@2.0.2
├─ postcss-flexbugs-fixes@4.2.1
├─ postcss-focus-visible@4.0.0
├─ postcss-focus-within@3.0.0
├─ postcss-font-variant@4.0.1
├─ postcss-gap-properties@2.0.0
├─ postcss-image-set-function@3.0.1
├─ postcss-import@12.0.1
├─ postcss-initial@3.0.2
├─ postcss-lab-function@2.0.1
├─ postcss-load-config@2.1.2
├─ postcss-loader@3.0.0
├─ postcss-logical@3.0.0
├─ postcss-media-minmax@4.0.0
├─ postcss-merge-longhand@4.0.11
├─ postcss-merge-rules@4.0.3
├─ postcss-minify-font-values@4.0.2
├─ postcss-minify-gradients@4.0.2
├─ postcss-minify-params@4.0.2
├─ postcss-minify-selectors@4.0.2
├─ postcss-modules-extract-imports@2.0.0
├─ postcss-modules-local-by-default@3.0.3
├─ postcss-modules-scope@2.2.0
├─ postcss-modules-values@3.0.0
├─ postcss-nesting@7.0.1
├─ postcss-normalize-charset@4.0.1
├─ postcss-normalize-display-values@4.0.2
├─ postcss-normalize-positions@4.0.2
├─ postcss-normalize-repeat-style@4.0.2
├─ postcss-normalize-string@4.0.2
├─ postcss-normalize-timing-functions@4.0.2
├─ postcss-normalize-unicode@4.0.1
├─ postcss-normalize-url@4.0.1
├─ postcss-normalize-whitespace@4.0.2
├─ postcss-ordered-values@4.1.2
├─ postcss-overflow-shorthand@2.0.0
├─ postcss-page-break@2.0.0
├─ postcss-place@4.0.1
├─ postcss-preset-env@6.7.0
├─ postcss-pseudo-class-any-link@6.0.0
├─ postcss-reduce-initial@4.0.3
├─ postcss-reduce-transforms@4.0.2
├─ postcss-replace-overflow-wrap@3.0.0
├─ postcss-safe-parser@4.0.2
├─ postcss-selector-matches@4.0.0
├─ postcss-selector-not@4.0.1
├─ postcss-svgo@4.0.2
├─ postcss-unique-selectors@4.0.1
├─ prepend-http@1.0.4
├─ process-nextick-args@2.0.1
├─ process@0.11.10
├─ prr@1.0.1
├─ pseudomap@1.0.2
├─ psl@1.8.0
├─ public-encrypt@4.0.3
├─ pump@3.0.0
├─ pumpify@1.5.1
├─ punycode@2.1.1
├─ q@1.5.1
├─ qs@6.5.2
├─ query-string@4.3.4
├─ querystring-es3@0.2.1
├─ querystring@0.2.0
├─ randomfill@1.0.4
├─ read-cache@1.0.0
├─ read-pkg-up@1.0.1
├─ read-pkg@1.1.0
├─ readable-stream@2.3.7
├─ readdirp@3.5.0
├─ redent@1.0.0
├─ regenerate-unicode-properties@8.2.0
├─ regenerator-runtime@0.13.7
├─ regenerator-transform@0.14.5
├─ regexpu-core@4.7.1
├─ regjsgen@0.5.2
├─ regjsparser@0.6.4
├─ remove-trailing-separator@1.1.0
├─ repeat-element@1.1.3
├─ repeating@2.0.1
├─ request@2.88.2
├─ require-directory@2.1.1
├─ require-main-filename@2.0.0
├─ resolve-cwd@2.0.0
├─ resolve-dir@1.0.1
├─ resolve-url@0.2.1
├─ resolve@1.19.0
├─ ret@0.1.15
├─ rgb-regex@1.0.1
├─ rgba-regex@1.0.0
├─ run-queue@1.0.3
├─ sass-graph@2.2.5
├─ sass-loader@7.3.1
├─ sax@1.2.4
├─ schema-utils@2.7.1
├─ scss-tokenizer@0.2.3
├─ semver@5.7.1
├─ set-blocking@2.0.0
├─ set-value@2.0.1
├─ setimmediate@1.0.5
├─ shallow-clone@3.0.1
├─ shebang-command@1.2.0
├─ shebang-regex@1.0.0
├─ simple-swizzle@0.2.2
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ sort-keys@1.1.2
├─ source-list-map@2.0.1
├─ source-map-resolve@0.5.3
├─ source-map-support@0.5.19
├─ source-map-url@0.4.0
├─ spark-md5@3.0.1
├─ spdx-correct@3.1.1
├─ spdx-exceptions@2.3.0
├─ split-string@3.1.0
├─ sprintf-js@1.0.3
├─ sshpk@1.16.1
├─ ssri@7.1.0
├─ stable@0.1.8
├─ static-extend@0.1.2
├─ stdout-stream@1.4.1
├─ stream-browserify@2.0.2
├─ stream-each@1.2.3
├─ stream-http@2.8.3
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.3.0
├─ strip-bom@2.0.0
├─ strip-indent@1.0.1
├─ style-loader@1.3.0
├─ stylehacks@4.0.3
├─ svgo@1.3.2
├─ tar@2.2.2
├─ terser-webpack-plugin@2.3.8
├─ terser@4.8.0
├─ through2@2.0.5
├─ timers-browserify@2.0.12
├─ timsort@0.3.0
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@2.0.0
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ tough-cookie@2.5.0
├─ trim-newlines@1.0.0
├─ true-case-path@1.0.3
├─ ts-pnp@1.2.0
├─ tslib@1.14.1
├─ tty-browserify@0.0.0
├─ tunnel-agent@0.6.0
├─ turbolinks@5.2.0
├─ tweetnacl@0.14.5
├─ typedarray@0.0.6
├─ unicode-canonical-property-names-ecmascript@1.0.4
├─ unicode-match-property-ecmascript@1.0.4
├─ unicode-match-property-value-ecmascript@1.2.0
├─ unicode-property-aliases-ecmascript@1.1.0
├─ union-value@1.0.1
├─ unique-slug@2.0.2
├─ unquote@1.1.1
├─ unset-value@1.0.0
├─ upath@1.2.0
├─ uri-js@4.4.0
├─ urix@0.1.0
├─ url@0.11.0
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util.promisify@1.0.1
├─ util@0.11.1
├─ uuid@3.4.0
├─ v8-compile-cache@2.2.0
├─ validate-npm-package-license@3.0.4
├─ vendors@1.0.4
├─ verror@1.10.0
├─ vm-browserify@1.1.2
├─ watchpack-chokidar2@2.0.1
├─ watchpack@1.7.5
├─ webpack-assets-manifest@3.1.1
├─ webpack-cli@3.3.12
├─ webpack@4.44.2
├─ which-module@2.0.0
├─ which@1.3.1
├─ wide-align@1.1.3
├─ worker-farm@1.7.0
├─ wrap-ansi@5.1.0
├─ xtend@4.0.2
├─ yaml@1.10.0
└─ yargs-parser@13.1.2
✨ Done in 12.18s.
Installing dev server for live reloading
run yarn add --dev webpack-dev-server from "."
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > webpack-dev-server@3.11.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 104 new dependencies.
info Direct dependencies
└─ webpack-dev-server@3.11.1
info All dependencies
├─ @types/glob@7.1.3
├─ @types/minimatch@3.0.3
├─ @types/node@14.14.20
├─ accepts@1.3.7
├─ ansi-colors@3.2.4
├─ ansi-html@0.0.7
├─ array-flatten@1.1.1
├─ array-union@1.0.2
├─ array-uniq@1.0.3
├─ async-limiter@1.0.1
├─ async@2.6.3
├─ batch@0.6.1
├─ body-parser@1.19.0
├─ bonjour@3.5.0
├─ buffer-indexof@1.1.1
├─ compressible@2.0.18
├─ compression@1.7.4
├─ connect-history-api-fallback@1.6.0
├─ content-disposition@0.5.3
├─ cookie-signature@1.0.6
├─ cookie@0.4.0
├─ deep-equal@1.1.1
├─ default-gateway@4.2.0
├─ del@4.1.1
├─ destroy@1.0.4
├─ detect-node@2.0.4
├─ dns-equal@1.0.0
├─ dns-packet@1.3.1
├─ dns-txt@2.0.2
├─ ee-first@1.1.1
├─ eventemitter3@4.0.7
├─ eventsource@1.0.7
├─ execa@1.0.0
├─ express@4.17.1
├─ finalhandler@1.1.2
├─ follow-redirects@1.13.1
├─ forwarded@0.1.2
├─ get-stream@4.1.0
├─ globby@6.1.0
├─ handle-thing@2.0.1
├─ hpack.js@2.1.6
├─ html-entities@1.4.0
├─ http-deceiver@1.2.7
├─ http-parser-js@0.5.3
├─ http-proxy-middleware@0.19.1
├─ http-proxy@1.18.1
├─ internal-ip@4.3.0
├─ ip-regex@2.1.0
├─ ip@1.1.5
├─ ipaddr.js@1.9.1
├─ is-absolute-url@3.0.3
├─ is-arguments@1.1.0
├─ is-path-cwd@2.2.0
├─ is-path-in-cwd@2.1.0
├─ is-path-inside@2.1.0
├─ is-stream@1.1.0
├─ json3@3.3.3
├─ killable@1.0.1
├─ loglevel@1.7.1
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ methods@1.1.2
├─ mime@2.4.7
├─ multicast-dns-service-types@1.1.0
├─ multicast-dns@6.2.3
├─ negotiator@0.6.2
├─ node-forge@0.10.0
├─ npm-run-path@2.0.2
├─ object-is@1.1.4
├─ obuf@1.1.2
├─ on-headers@1.0.2
├─ opn@5.5.0
├─ original@1.0.2
├─ p-finally@1.0.0
├─ p-map@2.1.0
├─ p-retry@3.0.1
├─ path-is-inside@1.0.2
├─ path-to-regexp@0.1.7
├─ portfinder@1.0.28
├─ proxy-addr@2.0.6
├─ querystringify@2.2.0
├─ raw-body@2.4.0
├─ regexp.prototype.flags@1.3.0
├─ retry@0.12.0
├─ select-hose@2.0.0
├─ selfsigned@1.10.8
├─ serve-index@1.9.1
├─ serve-static@1.14.1
├─ sockjs-client@1.5.0
├─ sockjs@0.3.21
├─ spdy-transport@3.0.0
├─ spdy@4.0.2
├─ strip-eof@1.0.0
├─ thunky@1.1.0
├─ type-is@1.6.18
├─ unpipe@1.0.0
├─ url-parse@1.4.7
├─ utils-merge@1.0.1
├─ wbuf@1.7.3
├─ webpack-dev-middleware@3.7.3
├─ webpack-dev-server@3.11.1
├─ websocket-driver@0.7.4
├─ websocket-extensions@0.1.4
└─ ws@6.2.1
✨ Done in 6.71s.
Webpacker successfully installed 🎉 🍰
webpackerがインストール出来たので、もう一度サーバーを起動してみる。
$ rails s
無事いつもの画面がでました！
まとめ
Node.jsは元々インストールされていたが、うまく読み込むことができていなかったと思われる。
なので、vim ~/.zshrcにexport PATH="/usr/local/opt/node@14/bin:$PATH"を登録することし、Node.jsのバージョンを指定してあげることでうまくwebpackerをインストールすることができたのではないかと思われる。
もし、指摘箇所がありましたら、ご意見のほどよろしくお願いします。