RailsアプリへのVueJS導入ができず困っています、どなたか助けてください[bin/webpacker]
- 評価
- クリップ 0
- VIEW 1,866
前提・実現したいこと
Railsのアプリケーションにvuejsを導入したいと考えています。下記のリンクを参考にwebpackを導入しようとしましたが、 bin/webpackの実行でつまずいてしまっています。
なお、gemfile, "config/webpack/webpacker.yml"にはそれぞれ次のように書いてあります。
gem 'webpacker', github: 'rails/webpacker'
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .vue
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
エラー内容
$ bin/webpack
(node:24139) ExperimentalWarning: The fs.promises API is experimental
Hash: 609c54cf56c50ef7c14a
Version: webpack 3.12.0
Time: 1760ms
Asset Size Chunks Chunk Names
hello-3fc5abe86ea1eca80c8f.js 248 kB 0 [emitted] hello
application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application
hello-9cb5a7334a6577c3422968b9b9970b2f.css 134 bytes 0 [emitted] hello
hello-3fc5abe86ea1eca80c8f.js.map 293 kB 0 [emitted] hello
hello-9cb5a7334a6577c3422968b9b9970b2f.css.map 557 bytes 0 [emitted] hello
application-12a437e15157c0d4029c.js.map 3.19 kB 1 [emitted] application
manifest.json 402 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./app/javascript/app.vue?vue&type=script&lang=js 362 bytes {0} [built]
[2] ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=scrip
t&lang=js 1.66 kB {0} [built] [failed] [1 error]
[3] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--4-1!./node_modules/css-loader
??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/
lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 41 bytes {0} [built]
[4] ./app/javascript/packs/application.js 515 bytes {1} [built]
[5] ./app/javascript/packs/hello.js 1.93 kB {0} [built]
[10] ./app/javascript/app.vue 978 bytes {0} [built]
[11] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 212 bytes {0} [built]
[12] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app
/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 749 bytes {0} [built]
[13] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 896 bytes {0} [built]
+ 5 hidden modules
ERROR in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=scr
ipt&lang=js
Module build failed: ReferenceError: [BABEL] /Users/hogehoge/app/javascript/app.vue: Unknown option: base.omit. C
heck out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.
at Logger.error (/Users/hogehoge/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/hogehoge/node_modules/babel-core/lib/transformation/file/options/option
-manager.js:226:20)
at OptionManager.init (/Users/hogehoge/node_modules/babel-core/lib/transformation/file/options/option-manager
.js:368:12)
at File.initOptions (/Users/hogehoge/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/hogehoge/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/hogehoge/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/hogehoge/node_modules/babel-loader/lib/index.js:50:20)
at Object.module.exports (/Users/hogehoge/node_modules/babel-loader/lib/index.js:173:20)
@ ./app/javascript/app.vue?vue&type=script&lang=js 1:0-172 1:193-362
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello.js
ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--4-1!./node_modules/css-load
er??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loade
r/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css
Module build failed: ValidationError: Style Loader Invalid Options
options['ident'] is an invalid additional property
@ ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 1:0-439 1:460-896
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vu
e-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loade
r-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css:
[0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib?
?ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=c
ss 789 bytes {0} [built]
+ 1 hidden module
何か心当たりがある方、解決方法をご存知の方、是非とも教えてください。
よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる