Failing vue-cli with vuetify project to run with IE 11 polyfilling issue? - vue.js

My application doesn't work in IE11, in Chrome in FF works correctly.
In IE11 it is displayed blank page. Result from IE debugger is below. Tried to solve it so many ways
like by this. It's look like problem with polyfilling of vuetify but I'm not sure. Do you have any suggestions?
vue cli
3.8.2
build
npx vue-cli-service build --mode development --modern
result from debugger:
SCRIPT1003: Expected ':'
val("webpack_require.r(webpack_exports);\n/* harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! ../../../src/components/VApp/VApp.sass / \"./node_modules/vuetify/src/components/VApp/VApp.sass\");\n/ harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0___default = /#PURE/webpack_require.n(_src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__);\n/ harmony import / var _mixins_themeable__WEBPACK_IMPORTED_MODULE_1__ = webpack_require(/! ../../mixins/themeable / \"./node_modules/vuetify/lib/mixins/themeable/index.js\");\n/ harmony import / var _util_mixins__WEBPACK_IMPORTED_MODULE_2__ = webpack_require(/! ../../util/mixins / \"./node_modules/vuetify/lib/util/mixins.js\");\n// Styles\n // Mixins\n\n // Utilities\n\n\n/ #vue/component /\n\n/ harmony default export */ webpack_exports[\"default\"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_mixins_themeable__WEBPACK_IMPORTED_MODULE_1__[\"default\"]).extend({\n name: 'v-app',\n props: {\n dark: {\n type: Boolean,\n default: undefined\n },\n id: {\n type: String,\n default: 'app'\n },\n light: {\n type: Boolean,\n default: undefined\n }\n },\n computed: {\n isDark() {\n return this.$vuetify.theme.dark;\n }\n\n },\n\n beforeCreate() {\n if (!this.$vuetify || this.$vuetify === this.$root) {\n throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');\n }\n },\n\n render(h) {\n const wrapper = h('div', {\n staticClass: 'v-application--wrap'\n }, this.$slots.default);\n return h('div', {\n staticClass: 'v-application',\n class: {\n 'v-application--is-rtl': this.$vuetify.rtl,\n 'v-application--is-ltr': !this.$vuetify.rtl,\n ...this.themeClasses\n },\n attrs: {\n 'data-app': true\n },\n domProps: {\n id: this.id\n }\n }, [wrap
webpack.config.js
module.exports = {
resolve: {
alias: {
"#": require("path").resolve(__dirname, "src") // change this to your folder path
}
},
publicPath: "/dms-gui/",
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
]
};
vue.config.js
const path = require('path');
module.exports = {
transpileDependencies: ['vue-router', 'vuetify', 'axios'],
...
}
babel.config.js
module.exports = {
presets: [
['#vue/app', { useBuiltIns: 'entry' }]
]
}
main.js
import 'core-js/stable'
import Vue from "vue";
import Vuetify from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store/store";
import VueCookies from "vue-cookies";
import AsyncComputed from 'vue-async-computed'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.css';
import { BNav, BNavItemDropdown, BDropdownItem, BNavItem } from 'bootstrap-vue'
import vuetify from '#/plugins/vuetify'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.use(VueCookies)
Vue.use(Vuetify)
Vue.use(AsyncComputed)
Vue.component('b-nav', BNav)
Vue.component('b-nav-item-dropdown', BNavItemDropdown)
Vue.component('b-dropdown-item', BDropdownItem)
Vue.component('b-nav-item', BNavItem)
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: function(h) {
return h(App);
}
}).$mount("#app");
Vue.use(Vuetify, {
iconfont: 'md'
})

Related

Nuxt: Module should export a function: #turf/helpers [ERROR]

Does anyone know why am I getting Module should export a function: #turf/helpers when I add #turf/helpers to my buildModules in nuxt.config.js?
nuxt.config.js
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#turf/helpers'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
Am I adding the module to the wrong array?
FYI: the module is present within my package.json / dependencies. Thus, the installation went through.
// Component where import { point } from '#turf/helpers' returns undefined
<script>
import { defineComponent } from '#vue/composition-api';
import mapboxgl from 'mapbox-gl';
import { point } from '#turf/helpers'
export default defineComponent({
data () {
return {
geojson: {
'type': 'FeatureCollection',
'features': []
},
map: null,
}
},
mounted() {
this.initMapBox();
},
methods: {
// Initialize MapBox map
initMapBox: function() {
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleGFuZHJ1YW5hIiwiYSI6ImNrZTl3NzJ3bzIxNG4yc2w2aG03dHNkMDUifQ.xaSxrVMLZtfGAlWoGvB1PQ';
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/alexandruana/cksxeq0637zjy17tcvd4h919d',
center: [22.253, 45.419],
zoom: 4
});
this.map.on('load', () => {
console.log('Map loaded.')
let point = point([22.253, 45.419]);
console.log(point)
this.map.addSource('points', {
type: 'geojson',
data: this.geojson
});
this.map.addLayer({
id: 'points',
type: 'circle',
source: 'points',
paint: {
'circle-radius': 8,
'circle-color': '#00a9e2'
},
filter: ['in', '$type', 'Point']
});
});
},
}
})
Importing it as a regular NPM package and using it without colliding with the same variable name fixed the issue!
Indeed, this was not a Nuxt module.

Reduce bundle size of Vuetify

I am using Vue 2.6.12 + Vuetify 2.4.2 with Webpack 4.46.0
Project structure:
/dist
/media - here is .png and other media
/src
/src/plugins/vuetify.js
/src/penalty_frame.html
/src/penalty.js
vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
penalty.js
import Vue from 'vue'
import vuetify from './plugins/vuetify.js'
var app = new Vue({
el: '#app_penalty',
vuetify,
...
})
Webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
penalty: path.resolve(__dirname, './src/penalty.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: ({ chunk: { name } }) => {
return name === 'main' ? '[name].bundle.js': '[name].[contenthash].js';
},
},
optimization: {
minimize: false
},
module: {
rules: [
// CSS, PostCSS, Sass
{
test: /\.(scss|css|sass)$/,
use: ['vue-style-loader', 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
},
},
],
},
],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
}
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/penalty_frame.html'), // шаблон
filename: 'penalty.html', // название выходного файла
chunks : ['penalty']
}),
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin(),
],
}
After I run webpack, Vuetify takes too many size from bundle file: 1.5 MB penalty bundle size
How to reduce bundle size of Vuetify in my case?
You can use the option of Vuetify "Treeshaking". It can drastically lowering your build size.
Share with you, a link where you can find more information about it:
https://vuetifyjs.com/en/features/treeshaking/
Good luck!

error "window is not defined " when using plugin Vue.js

Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,{});
nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'stud-cit',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Stud-cit site' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: 'blue'},
plugins: [
'~/plugins/vuetify',
'~/plugins/vue-awesome-swiper' ,
'~/plugins/vuePose'
],
build: {
vendor :['vue-awesome-swiper/dist/ssr'],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
});
}
}
}
};
This library has special build for SSR.
Reference
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

Exporting Vue components as npm module

I have problem to make Vue component export work properly.
I can export the component successfully and when I try to import it in different project I get this error:
[Vue warn]: Failed to mount component: template or render function not defined.
This is the Webpack config that I use for export:
const webpack = require('webpack');
const path = require('path');
const utils = require('./utils');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
var config = {
entry: path.resolve(__dirname + '/../src/components/index.js'),
output: {
path: path.resolve(__dirname + '/../dist/timer-comp/'),
filename: 'timer-component.js',
},
resolve: {
extensions: ['.vue', '.js', '.json']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: false,
mangle: true,
compress: {
warnings: false
}
})
]
};
module.exports = config;
This is the code that I use to export the components:
import TimerComponent from './timer-component';
export {
TimerComponent,
};
And finally the component code:
<template>
<div>
<div class="time">{{time}}</div>
</div>
</template>
<script>
export default {
name: 'TimerComponent',
data() {
return {
time: ''
};
},
created() {
setInterval(() => {
let now = new Date();
this.time = now.getHours() + " : " + now.getMinutes() + " : " + now.getSeconds();
}, 1000);
}
}
</script>
<style scoped>
</style>
Does someone have a clue why I get this error Failed to mount component ?
by the way this is how I call the component in a different project:
import TimerComponent from 'timer-comp';
It seems that the issue is caused by the build somehow, but I can't figure out what could be the exact problem.
add output property in production webpack config file:
output: {
path: path.resolve(__dirname + '/../dist/timer-comp/'),
filename: 'timer-component.js',
libraryTarget: 'umd',
libraryExport: 'default',
library: 'TimerComponent',
umdNamedDefine: true
}

Cannot Find Children When Using Enzyme JS Mount

My expectation is that when I use Enzyme's mount function, I should be able to not only query for nodes in the top level element, but also nodes/elements that are rendered in child components.
Here are the tests exhibited in the matter:
import React from 'react';
import chai from 'chai'
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme());
const expect = chai.expect;
import {
shallow,
mount
} from 'enzyme';
class Child extends React.Component {
render() {
return <div id='child'>
CHILD
<button onClick={() => console.log('hit me')}>HIT ME</button>
</div>
}
}
class Parent extends React.Component {
render() {
return <div id='root'>
<Child aprop={1}/>
</div>
}
}
describe('example', function() {
describe('mounted', function() {
it('should find the button', function() {
const wrapper = mount(<Parent/>);
expect(wrapper.find('button').length).to.equal(1);
});
it('should find Child component', function() {
const wrapper = mount(<Parent/>);
console.log(wrapper.debug());
expect(wrapper.find(Child).length).to.equal(1);
});
});
describe('shallow', function() {
it('should not find the button', function() {
const wrapper = shallow(<Parent/>);
expect(wrapper.find('button').length).to.equal(0);
});
it('should find Child component', function() {
const wrapper = shallow(<Parent/>);
expect(wrapper.find(Child).length).to.equal(1);
});
});
});
The output is:
example
mounted
✗ should find the button
expected 0 to equal 1
AssertionError#webpack:///~/assertion-error/index.js?6193**:74:0 <- test/components/mount.spec.js:373:25
assert#webpack:///~/chai/lib/chai/assertion.js?fee1**:107:0 <- test/components/mount.spec.js:4705:32
assertEqual#webpack:///~/chai/lib/chai/core/assertions.js?b343**:487:0 <- test/components/mount.spec.js:5222:19
webpack:///~/chai/lib/chai/utils/addMethod.js?ca90**:41:0 <- test/components/mount.spec.js:4292:31
webpack:///test/components/mount.spec.js:35:53 <- test/components/mount.spec.js:153:54
LOG LOG: '<Parent />'
✗ should find Child component
expected 0 to equal 1
AssertionError#webpack:///~/assertion-error/index.js?6193**:74:0 <- test/components/mount.spec.js:373:25
assert#webpack:///~/chai/lib/chai/assertion.js?fee1**:107:0 <- test/components/mount.spec.js:4705:32
assertEqual#webpack:///~/chai/lib/chai/core/assertions.js?b343**:487:0 <- test/components/mount.spec.js:5222:19
webpack:///~/chai/lib/chai/utils/addMethod.js?ca90**:41:0 <- test/components/mount.spec.js:4292:31
webpack:///test/components/mount.spec.js:41:50 <- test/components/mount.spec.js:159:51
shallow
✓ should not find the button
✓ should find Child component
Either mount is not working as expected, or my understanding isn't correct.
Here is my Karma/Webpack file if it helps:
const webpack = require('webpack');
var argv = require('yargs').argv;
var path = require('path');
let srcPath = path.join(__dirname, '/../src/');
const webpackConfig = {
devtool: 'inline-source-map',
resolve: {
// allow us to import components in tests like:
// import Example from 'components/Example';
root: path.resolve(__dirname, './src'),
// allow us to avoid including extension name
extensions: ['', '.js', '.jsx', '.css', '.scss', '.json'],
// required for enzyme to work properly
alias: {
'sinon': 'sinon/pkg/sinon',
}
},
module: {
// don't run babel-loader through the sinon module
noParse: [
/node_modules\/sinon\//
],
isparta: {
embedSource: true,
noAutoWrap: true,
// these babel options will be passed only to isparta and not to babel-loader
babel: {
presets: ['es2015', 'stage-0', 'react']
}
},
// run babel loader for our tests
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel',
exclude: path.resolve(__dirname, 'node_modules'),
query: {
plugins: ['transform-decorators-legacy'],
presets: ['es2015', 'airbnb', 'stage-1', 'react']
}
},
{
test: /\.json$/, loader: 'json'
},
{
test: /\.scss$/,
exclude: /[\/\\](node_modules|bower_components|public)[\/\\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[local]',
'postcss',
'sass'
]
},
{
test: /\.css$/,
exclude: /[\/\\](node_modules|bower_components|public)[\/\\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[local]'
]
}
],
preLoaders: [ { //delays coverage til after tests are run, fixing transpiled source coverage error
test: /\.(jsx|js)$/,
include: path.resolve('src/'),
loader: 'isparta',
} ]
},
plugins: [
new webpack.IgnorePlugin(/node-fetch/)
],
// required for enzyme to work properly
externals: {
'jsdom': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': 'window',
'react/addons': true
},
};
module.exports = function(config) {
config.set({
browsers: ['PhantomJS'],
singleRun: !argv.watch,
frameworks: ['mocha', 'chai'],
reporters: ['spec', 'coverage'],
// include some polyfills for babel and phantomjs
files: [
'node_modules/whatwg-fetch/fetch.js',
'node_modules/babel-polyfill/dist/polyfill.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js',
'test/**/*.js'
],
preprocessors: {
// add webpack as preprocessor
'src/**/*.js': ['webpack', 'sourcemap'],
'test/**/*.js': ['webpack', 'sourcemap']
},
// A lot of people will reuse the same webpack config that they use
// in development for karma but remove any production plugins like UglifyJS etc.
// I chose to just re-write the config so readers can see what it needs to have
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'html' },
{ type: 'text' }
]
},
// tell karma all the plugins we're going to be using to prevent warnings
plugins: [
'karma-mocha',
'karma-chai',
'karma-webpack',
'karma-phantomjs-launcher',
'karma-spec-reporter',
'karma-sourcemap-loader',
'karma-coverage'
]
});
};