Я пытаюсь представить Vue.JS через веб-пакет.Теперь я борюсь с ошибкой при выполнении bin/webpack
.
Проблема похожа на эту ( Невозможно использовать компонент vue в моем приложении Rails5 ), но выглядит немного иначе, так как ничего не изменится, если я удалю тэг в "/app/javascript/app.vue".
Файл гем ниже:
gem 'webpacker', github: 'rails/webpacker'
Иниже "/config/webpack/webpacker.yml":
# 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
Если у вас есть какие-либо советы, которые будут очень полезны.