I got package.json:
"devDependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery": "^3.3.1",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
}
with webpack.mix:
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
and resource file:
so those files, looks like compiled properly by webpack >> npm run dev
then I load it to blade template, but then in browser it show me that: jQuery is not defined...
Uncaught ReferenceError: jQuery is not defined
what's possibly went wrong here, why It can load jQuery while i have define it in package.json?
THanks!
few mins later after I posted the question...
here is the answer...
add this to your webpack:
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
]
};
});
Related
My Source code is:
import Vue from "vue";
console.log('Vue', Vue)
With this packages versions:
"#vue/cli": "4.5.15",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
"#vue/component-compiler-utils": "^3.1.2",
But it shows me an error when i mount app.js file to html.
Uncaught TypeError: Cannot convert undefined or null to object
at hasOwn (<anonymous>)
at t.exports (well-known-symbol.js:16:26)
at Object.c04e (to-primitive.js:10:20)
at a (bootstrap:79:22)
at Object.a04b (to-property-key.js:1:19)
at a (bootstrap:79:22)
at Object.06cf (object-get-own-property-descriptor.js:6:21)
at a (bootstrap:79:22)
at Object.23e7 (export.js:2:32)
at a (bootstrap:79:22)
May be it problem with ES versions or something else, idk how to google it, help pls with any proposals
I've changed my package.json from
"vuex": "^4.0.2",
"vue-cli": "^2.9.6",
"#vue/cli": "4.5.15",
"vue-loader": "^16.0.0-beta.8",
"vue-router": "^4.0.13",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
to
"vue": "2.6.*",
"vue-template-compiler": "^2.0.0",
"webpack-cli": "^4.9.2",
"webpack-dev-middleware": "^5.3.1",
"#vue/cli": "^5.0.1",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "^5.0.1",
"babel-loader": "^8.2.3",
And app complied without this error.
Hi I am using custom components on Vuetify v2.2, which are throwing error during build.
I can't figure out, what's the problem with Vuetify v2.2
because Vuetify v2.1.15 was working well.
Thrown error message:
ERROR in ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
at /home/ubuntu/chainflix-nuxt-tar/node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass:1:257
at stringifyNode (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:2:19)
at Function.stringify (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:45:10)
at Gradient.colorStops (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:503:26)
at Gradient.oldWebkit (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:396:10)
at Gradient.replace (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:89:30)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/value.js:148:20)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:570:35)
at Gradient.process (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/prefixer.js:155:16)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/processor.js:379:36
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:190:18
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:135:18
at Rule.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:148:24
at Root.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Root.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
# ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass 4:14-213
# ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./components/inc/vuetifyCustom/CTextarea/CTextarea.js
# ./components/inc/vuetifyCustom/CTextarea/index.js
# ./plugins/GlobalComponent.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
In CTextarea I imported VTextarea and VInput like this:
import { VTextarea, VInput } from 'vuetify/lib'
import 'vuetify/src/components/VTextarea/VTextarea.sass'
import { CTextField } from '../CTextField'
export default Vue.extend({
name: 'CTextarea',
extends: VTextarea.extend(),
///// etc custom codes
})
I think this error has some correlation with sass & postcss.
I hope to Build Successfully.
I must using Vue.config.optionMergeStrategies options in custom components.
My package dependencies & devDependencies
{
"dependencies": {
"#babel/runtime-corejs3": "^7.6.3",
"#nuxtjs/axios": "^5.8.0",
"#nuxtjs/moment": "^1.4.0",
"#nuxtjs/style-resources": "^1.0.0",
"base64toblob": "0.0.2",
"bigdecimal": "^0.6.1",
"camelcase-keys": "^5.2.0",
"core-js": "^3.3.6",
"cross-env": "^5.2.1",
"crypto": "^1.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.4",
"filestream": "^4.1.3",
"firebase": "^7.5.2",
"form-data": "^2.5.1",
"intersection-observer": "^0.7.0",
"ip-regex": "^4.1.0",
"morgan": "^1.9.1",
"nuxt": "^2.10.2",
"qrcode": "^1.4.3",
"snakecase-keys": "^2.1.0",
"socket.io-client": "^2.3.0",
"uuid": "^3.3.3",
"vue-clipboard2": "^0.3.1",
"vue-drag-drop": "^1.1.4",
"vue-google-charts": "^0.3.2",
"vue-i18n": "^8.15.0",
"vue-lottie": "^0.2.1",
"vue-ls": "^3.2.1",
"vue-qrcode": "^0.2.2",
"vuedraggable": "^2.23.2",
"vuejs-logger": "^1.5.3"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.6.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.6.0",
"#babel/plugin-transform-regenerator": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/plugin-transform-template-literals": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"#babel/register": "^7.6.2",
"#babel/runtime": "^7.6.3",
"#nuxt/babel-preset-app": "^2.10.2",
"#nuxtjs/eslint-config": "^0.0.1",
"#nuxtjs/vuetify": "^1.10.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"nodemon": "^1.19.4",
"prettier": "^1.16.4",
"regenerator-runtime": "^0.13.2",
"sass": "^1.23.3",
"vue-style-loader": "^4.1.2",
"webpack-bundle-analyzer": "^3.6.0"
},
}
If you need more informations, comment please. I really hope to fix it.
You do not have a postcss-loader package in your dependencies.
Have you tried installing it?
npm i -D postcss-loader
Personally i would prefer using the node-sass and sass-loader package as suggested in the nuxt docs: https://nuxtjs.org/faq/pre-processors/
npm install --save-dev node-sass sass-loader
Hope it helps!
I finally fixed.
This problem was my mistakes with Treeshakes.
so I fixed variable scss files and components direct import.
I hope someones are helpful with this.
In components
// wrong
import { VTextField } from 'vuetify/lib'
// Correct
import { VTextField } from 'vuetify/lib/components/VTextField'
In variable scss files. May you imported #import 'vuetify/src/styles/styles.sass';
That is need just a time in root file ( In webpack guild's options.prependData or options.data. )
#import 'vuetify/src/styles/styles.sass';
// some global values
// some components values
And... Use map-deep-merge, when you should fix color or such value in Object type(?).
$purple: ();
$purple: map-deep-merge(
(
'base': #6255c5
),
$purple
);
$shades: ();
$shades: map-deep-merge(
(
'black': #2D2935,
'white': #FFFFFF
),
$shades
);
Happy coding!
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
Here is my package.json:
{
"name": "DFS",
"version": "1.0.0",
"description": "DFS App",
"author": "asd",
"private": true,
"nodemonConfig": {
"delay": "2500"
},
"scripts": {
"postinstall": "npm run build",
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"deploy": "git subtree push --prefix dist heroku master"
},
"dependencies": {
"axios": "^0.16.2",
"connect-history-api-fallback": "^1.5.0",
"express-sslify": "^1.2.0",
"global": "^4.3.2",
"heroku-ssl-redirect": "0.0.4",
"less": "^3.0.1",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"npm-watch": "^0.3.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"vee-validate": "^2.0.0-rc.14",
"vue": "^2.3.3",
"vue-router": "^2.3.1",
"vuetify": "^1.0.3",
"vuex": "^3.0.1",
"webpack-dev-server": "^3.0.0",
"webpack-watch": "^0.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^3.5.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eslint-plugin-vue": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^2.0.0",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.15",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"sw-precache-webpack-plugin": "^0.11.4",
"ts-loader": "^3.5.0",
"uglify-es": "^3.0.25",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-cli": "^2.0.9",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
My main.js:
import Vue from 'vue'
import Vuetify from 'vuetify' // eslint-disable-line no-unused-vars
// import App from './App'
// import router from './router'
Vue.use(Vuetify)
// Vue.config.productionTip = false
new Vue({ // eslint-disable-line no-new
el: '#app',
// router,
template: '<div>hi there</div>'
// components: { App },
// template: '<App/>'
})
My App.vue
<template>
<div>
123
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
I am using Heroku for the app hosting. When I try to visit site with desktop browser all is okay, but when I try to load it via mobile browser it shows the blank page.
For the other hand deploying this repo: https://github.com/deepak-singh/vue-blog-pwa
is successfully done and loading via mobile or desktop browser is successful.
Also I found that this line causes blank page in my vue app:
Vue.use(Vuetify)
But! This line is present in vue-pwa-blog repo file. So I can not understand what may I doing wrong?
This is happening because when a PWA is installed and opened on a phone it rewrites the URL to /index.html whereas the vuetify app is rendered at /.
Just re-adjust your vue-router to load the component at /index.html too and it should work.
Your router.js could look something like this:
{
path: '/',
name: 'App',
component: App
},
{
path: '/index.html',
name: 'App',
component: App
}
My routers are like this:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index.html',
name: 'HelloWorld',
component: HelloWorld
}
]
})
Still blank page.. If i remove my Vue.use(Vuetify) from main.js works..
Package.json ->
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuetify": "^1.1.6"
},
I use laravel 5.3 and vue.js 2
My package.json like this :
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"accounting": "^0.4.1",
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"next-tick": "^1.0.0",
"pusher-js": "^4.0.0",
"vue": "^2.1.6",
"vue-resource": "^1.0.3",
"vuex": "^2.0.0"
},
"dependencies": {
"laravel-echo": "^1.1.4",
"pusher-js": "^4.0.0",
"vee-validate": "^2.0.0-beta.17",
"vuejs-paginator": "^2.0.0"
}
}
I want to add vue-router in package.json
How can I do it?
The simplest solution might be using NPM or Yarn for this:
npm install vue-router --save-dev
yarn add vue-router --dev