Main.js is not executing


#1

I have a webpack config and my entry is main.js. For some reason, it is not being executed. Here is webpack.config.js.

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Any my main.js is as follows. Any reason why it is not being executed. It is directly going to index.html

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
//import vueResource from 'vue-resource'
import MainPage from './components/MainPage'
import index from './components/index'
import AMTSSearch from './components/AMTSSearch'
import AMTSViewDetail from './components/AMTSViewDetail'
import Deals from './components/Deals'
import VehicleDetails from './components/VehicleDetails'
import AuctionBlockDetail from './components/AuctionBlockDetail'
import Vcr from './components/Vcr'
import Calendar from './components/Calendar'
import Test from './components/Test'
//import Vue2Fileters from 'vue2-filters'
//import VMoney from 'v-money'
import store from './store'
//require('../main.css')
require('../StyleSheet.css')
Object.defineProperty(Vue.prototype, '$globalVin', { value: '' });
//Object.defineProperty(Vue.prototype, '$moment', { value: moment });

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/' },
	{ path: '/search', component: AMTSSearch},
    { path: '/amts/:acctNbr', component: AMTSViewDetail},
    { path: '/deal/:acctNbr', component: Deals},
    { path: '/deal', component: Deals},
	{ path: '/vehicle/:vrmsVehId', component: VehicleDetails},
	{ path: '/vehicle', component: VehicleDetails},
	{ path: '/vcr', component: Vcr},
	{ path: '/calendar', component: Calendar},
  { path: '/Test', component: AuctionBlockDetail}
  ]
})
export const bus = new Vue();
console.log("In main.js");
/* eslint-disable no-new */
new Vue({
  router,
  store,
  template: `
    <div id="app">
      <header id="remarketnavbar" >
        <div >
          <div id="branding">
            <img :src="setflogo" style="width:auto;height:46px;background-color:#35424a;padding:0px"></img>
          </div>
          <nav>
            <ul>
              <li><router-link to="/" class="target"  id="target1"><i class="fa fa-home">&nbsp;</i>Home</router-link></li>
			  <li><router-link to="/search" class="target" id="target2"><i class="fa fa-search">&nbsp;</i>Search</router-link></li>
              <li><router-link to="/deal" class="target" id="target3" onclick="checkKeyValue();"><i class="fa fa-handshake">&nbsp;</i>Deals</router-link></li>
              <li><router-link to="/amts"><i class="fa fa-file-contract">&nbsp;</i>Contract&nbsp;Info</router-link></li>
              <li><router-link to="/vehicle"><i class="fa fa-car">&nbsp;</i>Vehicle&nbsp;Details</router-link></li>
              <li><router-link to="/vcr"><i class="fa fa-align-justify">&nbsp;</i>VCR</router-link></li>
              <li><router-link to="/calendar"><i class="fa fa-calendar">&nbsp;</i>Calendar</router-link></li>
              <!--li><router-link to="/AuctionBlock"><i class="fa fa-boxes">&nbsp;</i>Auction Block</router-link></li-->
            </ul>
			<input type="hidden" id="keyType" value="">
			<input type="hidden" id="keyValue" value="">
          </nav>
        </div>
      </header>
      <router-view></router-view>
    </div>
  `,
  data: {
		setflogo : require("./assets/abc.png"),
		jmlogo: require("../images/one50.png"),
		parmDate : null,
  },
}).$mount('#app')

#2

#3

James,
I tried to just test the simple html with vue and it is failing with Uncaught SyntaxError: Unexpected identifier at import Vue. It is not recognizing Vue. I uninstalled vue-cli globally and reinstalled. When I type vue -V at command prompt, it is showing 3.2.1. I am not sure why this is not working. Here is a simple html file I have.

<!DOCTYPE html>
<head>
</head>
<body >
  <div id="app">{{message}}</div>
<script>
import Vue from 'vue'
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

#4

Is this a default Vue project? And you’re running it through the transpiler? i.e. npm run serve?


#5

I initiated project using webpack and running using npm run dev.


#6

Any update


#7

Where are you seeing this?

<!DOCTYPE html>
<head>
</head>
<body >
  <div id="app">{{message}}</div>
<script>
import Vue from 'vue'
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

If I spin up a default vue scaffolded app

vue create simple-app
> default
and run yarn serve (npm run serve)
and open localhost:8080 in the browser. All works. So you must be doing something that’s not part of the guidelines


#8

sudo npm run dev ?