I'm new to vue.js.
I'm trying to render vue component file but when I add to vue component, for example, app/javascript/packs/components/app.vue file, compiling error happens in babel-loader.
error log
ERROR in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/packs/app.vue?vue&type=script&lang=js
Module build failed: ReferenceError: [BABEL] /Users/shiho/dev/appname/app/javascript/packs/app.vue: Unknown option: base.omit. Check 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 http://babeljs.io/docs/plugins/#pluginpresets-options.
at Logger.error (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
at OptionManager.init (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/shiho/dev/appname/node_modules/babel-loader/lib/index.js:50:20)
at Object.module.exports (/Users/shiho/dev/appname/node_modules/babel-loader/lib/index.js:173:20)
@ ./app/javascript/packs/app.vue?vue&type=script&lang=js 1:0-178 1:199-374
@ ./app/javascript/packs/app.vue
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
loader
% cat config/webpack/loaders/vue.js
const { dev_server: devServer } = require('@rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
module.exports = {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: [
{ loader: 'babel-loader' }
]
}
}
}
confing/webpack/vue.js
const { dev_server: devServer } = require('@rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader'
}]
}
app.vue
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
Even when I remove presets from .babelrc, same error occurred.
import Vue from 'vue/dist/vue.esm'
import InfiniteLoading from 'vue-infinite-loading';
import Item from './components/Item.vue'
window.onload = function() {
var highlightViewModel = new Vue({
el: '#home-wrapper',
data: {
show: false,
loading: false,
message: '',
items: [],
message: 'helloooo',
},
beforeMount: function () {
var that = this
var params = {
url: '/items/get_timeline.json',
method: 'GET'
}
$.ajax(params).done(function(data){
console.log(data.items);
that.items = data.items;
Vue.nextTick(function () {
$('.timeago').timeago();
});
});
},
components: {
InfiniteLoading,
Item
},
...
app/javascript/packs/components/Item.vue
aaa
app/view/users/home.html.erb