vue indev.html,webpack - Can't add <script> tag to Vue component files ( *.vue ) - Stack Overflow

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