Rendering problem in Vue ES Module

[nPaul]

Not working if use Vue ES Module

example:

import Vue from 'vue/dist/vue.esm'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css'

Vue.use(VueLayers)
import TpMap from '../components/tp_map.vue'

const app = new Vue({
    el: element,
    template: '<TpMap/>',
    components: { TpMap }
})

I got in browser error like:

pluggablemap.js:1139 Uncaught TypeError: view.isDef is not a function
    at _ol_Map_._ol_PluggableMap_.renderFrame_ (pluggablemap.js:1139)
    at _ol_Map_.<anonymous> (pluggablemap.js:87)

But if use Vue runtime module work fine

import Vue from 'vue/dist/runtime.esm'
const app = new Vue({
    el: element,
    render: h => h(TpMap)
})

but css styles in component TpMap not working
maybe in runtime mode styles in components not compilng

How i may fix this problem?

[ghettovoice]

Can you show me code of TpMap component? Then I'll try to reproduce the issue

[nPaul]

I'am sorry
Styles of component work fine
I forgot include main.css with rails helper stylesheet_pack_tag

<%= javascript_pack_tag 'main', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'main', 'data-turbolinks-track': 'reload' %>

[ghettovoice]

Ok, that's fine.
Take a note that recommended way to switch Vue build version is define alias through webpack config:

module.exports = {
  ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  ...
}

Then all code that imports Vue will use the same build version.

[zakst]

Hi,

I thought i will write here as i am getting the same error instead of starting a new issue.

I am getting the same error.

All i added is the following

appEntry.js

import VueLayers  from 'vuelayers'
import 'vuelayers/lib/style.css'
Vue.use(VueLayers);

Component.js
Add the following three properties in data() {return...}

      center: [0, 0],
      zoom: 3,
      rotation: 0,

Componment.pug

vl-map(:load-tiles-while-animating='true', :load-tiles-while-interacting='true', style='height: 400px')
  vl-view(:center.sync='center', :zoom.sync='zoom', :rotation.sync='rotation')
  vl-layer-tile
    vl-source-osm

am i missing anything?

[ghettovoice]

Hi, @zakst ! Your code looks right. Are you building rails app with webpacker?
And can you show me your webpack config? Or may be you have test repository that reproduce the issue

[zakst]

Hello @ghettovoice

I am building a nodejs app and below is the webpack.config.js

I also tried adding the following in the webpack.config.js

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {

  context: path.resolve(__dirname, './src'),
  watch: true,
  entry: {
    app: './app.js',
    bsjs: './mdb/js/bootstrap.js',
    vendor: './mdb/sass/mdb.scss',
    bootstrap: './mdb/css/bootstrap.css',
    mdb: './mdb/css/mdb.css'
  },
  output: {
    path: path.resolve(__dirname, './public/assets'),
    filename: '[name].bundle.js',
    publicPath: '/assets/',
  },

  devServer: {
    contentBase: path.resolve(__dirname, './src'),
    historyApiFallback: true,
    port: 3000,
    compress: isProduction,
    inline: !isProduction,
    hot: !isProduction,
    host: '0.0.0.0',
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true,
      colors: {
        green: '\u001b[32m',
      },
    },
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].bundle.css',
      allChunks: true,
    }),

  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: {presets: ['es2015']},
        }],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {importLoaders: 1},
          }],
        }),
      },
      {
        test: /\.scss/i,
        use: ExtractTextPlugin.extract([ 'css-loader', 'sass-loader' ])
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
      },
      {
        test: /\.vue$/,
        use:[{
          loader: 'vue-loader',
          options: {
            loaders: {
              js: 'babel-loader'
            }
          }
        }]
      },

    ]
  }
};

[ghettovoice]

Hmm, config looks good. Can you make test repo with your project setup, so I can deploy it locally?

[zakst]

That will be great!, will do so once back to my machine.
Am i supposed to include openlayers ? I see it part of the vuelayers dependencies but just making sure that will not be the issue?

[ghettovoice]

Yes, vuelayers depends on openlayers, it should be loaded by webpack automatically.
Ok, post link here when you will be ready

[zakst]

I thought of trying something out and it got rid of all the errors although the map is just not loading.

Attached is the errors that USED TO exist when i had import in my app.js once i changed it to require, the errors disappeared.

I am going to try a couple of things before creating the repo.

Problem is there is no map at all.

[zakst]

I kept the code as is with the import as shared when i started the conversation and just deleted the node_modules and npm i and all worked fine. Have no idea where the problem was but all is good now.

Thanks @ghettovoice

[ghettovoice]

That's good! Seems like broken npm cache or inconsistent packages versions.