Clean project built using latest VueCli, added Vuetify using vue add vuetify. Every thing works, added authentication script with i have used 3 times this year successfully i now get this error
ERROR Failed to compile with 1 errors 7:26:18 PM
error in ./src/auth/authService.js
Module parse failed: Unexpected token (18:10)
File was processed with these loaders:
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| class AuthService extends EventEmitter {
> idToken = null;
| profile = null;
| tokenExpiry = null;
# ./src/router.js 6:0-38 42:52-56 46:2-6
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.0.15:3000/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Stumped, been at this all day with no joy. Is that i need additional processing or config? Is so i can see what.
Any help?
Many thanks
Rolling pack npm packages, deleting Node_modules (getting desperate), reading everything i can find
/auth/authService.js
const localStorageKey = "loggedIn";
const loginEvent = "loginEvent";
class AuthService extends EventEmitter {
idToken = null;
profile = null;
tokenExpiry = null;
login(customState) {
webAuth.authorize({
appState: customState,
});
}
vue.config.js
const webpack = require("webpack");
module.exports = {
devServer: {
port: 3000
},
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
jQuery: "jquery"
})
]
}
};
.eslint.js
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "#vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"comma-dangle": [
"error",
{
arrays: "only-multiline",
objects: "only-multiline",
imports: "only-multiline",
exports: "only-multiline",
functions: "ignore"
}
]
},
parserOptions: {
parser: "babel-eslint"
},
overrides: [
{
files: ["**/__tests__/*.{j,t}s?(x)"],
env: {
mocha: true
}
}
]
};
package.json
{
"name": "admin-sept-2019",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"auth0-js": "^9.11.3",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^2.0.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-transform-classes": "^7.5.5",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-plugin-unit-mocha": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"chai": "^4.1.2",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"prettier": "^1.18.2",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
npm run serve will build my vue app
Related
Embarrassingly, this problem has been holding me up for days, and I must, must get on with my task for work, so I'm reaching out for help.
When running Cypress, I get said error: process is not defined and it points to a JavaScript file in the client portion of my project (shown below). I understand process is a nodeJS property, but I can obviously call this on the FE of my application, and must, so I don't understand why Cypress is throwing an error here. Any help would be much appreciated. I'm running node v14.x.x.
vue.config.js
const { defineConfig } = require('#vue/cli-service')
// const { VueLoaderPlugin } = require('vue-loader')
module.exports = defineConfig({
css: {
loaderOptions: {
sass: {
additionalData: '#import src/styles/base/entry.scss',
},
},
},
lintOnSave: false,
publicPath: '/',
transpileDependencies: true,
})
Package.json
{
"name": "test2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#sentry/apm": "^5.27.1",
"#sentry/browser": "^7.28.1",
"#sentry/integrations": "^7.28.1",
"auth0-js": "^9.20.0",
"axios": "^1.2.2",
"axios-retry": "^3.3.1",
"big.js": "^6.2.1",
"core-js": "^3.8.3",
"css-loader": "^6.7.3",
"moment": "^2.29.4",
"moment-timezone": "^0.5.40",
"style-loader": "^3.3.1",
"toastr": "^2.1.4",
"uuid": "^9.0.0",
"vue": "^2.6.14",
"vue-router": "^3.5.2"
},
"devDependencies": {
"#babel/core": "^7.20.7",
"#babel/eslint-parser": "^7.19.1",
"#babel/preset-env": "^7.20.2",
"#cypress/webpack-preprocessor": "^5.16.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"babel-loader": "^8.0.2",
"cypress": "^9.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"node-sass": "^4.14.0",
"sass-loader": "^12.6.0",
"ts-jest": "^27.0.4",
"vue-loader": "^15.0.1",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.75.0"
}
}
Cypress webpack config
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
const { VueLoaderPlugin } = require('vue-loader')
const webpackPreprocessor = require('#cypress/webpack-preprocessor')
/**
* #type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
const defaults = webpackPreprocessor.defaultOptions
// Add to existing rules
defaults.webpackOptions.module.rules.push(
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.sass$/i,
use: [
// creates 'style' nodes from JS strings
"vue-style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
{
loader: "sass-loader",
options: {
additionalData: '#import src/styles/base/entry.scss',
// sass-loader >= 8
sassOptions: {
indentedSyntax: true,
},
},
},
],
}
)
// Add first plugin
defaults.webpackOptions.plugins = [ new VueLoaderPlugin() ]
console.log(defaults)
on('file:preprocessor', webpackPreprocessor(defaults))
}
sentryMixin.js
...
const environment = process.env.VUE_APP_ENV
^ this is where it points to the error
...
I am new to graphql and I have been getting this error when trying to use .graphql file inside vue apollo. while using gql tag , it works fine , but while importing graphql file this error is showing up.
i have tried to use graphql loader but it doesnt seems to be working.
Failed to resolve loader: cache-loader
You may need to install it.
ERROR in ./src/client/pages/Clients.vue?vue&type=script&lang=js&
(./node_modules/babel-loader/lib/index.js??clonedRuleSet-
40.use[0]!./node_modules/#vue/cli-service/lib/config/vue-loader-v15-resolve-
compat/vue-loader.js??vue-loader-options!./src/client/pages/Clients.vue?
vue&type=script&lang=js&) 100:15-55
Module not found: Error: Can't resolve 'cache-loader' in '/home/noakash/temp/gym-
client'
# ./src/client/pages/Clients.vue?vue&type=script&lang=js& 1:0-246 1:262-265 1:267- 510 1:267-510
# ./src/client/pages/Clients.vue 2:0-59 3:0-54 3:0-54 9:2-8
# ./src/router/index.js 5:0-50 31:13-20
# ./src/main.js 3:0-30 18:2-8
webpack compiled with 1 error
my Clients.vue file look like this
apollo: {
clients() {
return {
query:require('../../graphql/clients.graphql'),
result({ loading }) {
this.loading = loading;
},
};
},
},
i am using vue-cli
my vue.config.js look like this
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
configureWebpack:{
module:{
rules:[
{
test: /\.graphql$/,
use: 'graphql-tag/loader'
}
]
}
},
transpileDependencies: [
'vuetify'
],
})
my package.json
{
"name": "gym-client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"apollo": "vue-cli-service apollo:dev --generate-schema",
"apollo:schema:generate": "vue-cli-service apollo:schema:generate",
"apollo:schema:publish": "vue-cli-service apollo:schema:publish",
"apollo:start": "vue-cli-service apollo:start"
},
"dependencies": {
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-http": "^1.5.17",
"core-js": "^3.25.0",
"graphql": "^15.8.0",
"graphql-tag": "^2.12.6",
"jspdf": "^2.5.1",
"lowdb": "^1.0.0",
"mkdirp": "^0.5.1",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"shortid": "^2.2.8",
"vue": "^2.6.14",
"vue-apollo": "^3.1.0",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-apollo": "~0.22.2",
"vue-cli-plugin-vuetify": "~2.5.5",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I'm trying to build an electron app from a vue-cli3 project. The vue project itself works fine both in development and production. Everything works as well if I run a dev mode with npm run electron:serve. But the built electron app would give a Uncaught TypeError: Cannot read property 'webpackJsonp' of undefined in each packed js file.
vue.config.js:
module.exports = {
configureWebpack: config => {
const tsLoader = config.module.rules.find((loader) => loader.test === /\.ts$/);
const tsLoaderIndex = config.module.rules.indexOf(tsLoader);
const webWorkerLoader = {
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
filename: 'WorkerName.[hash].js',
inline: 'fallback',
}
}
]
}
config.module.rules = [...config.module.rules.slice(0, tsLoaderIndex-1), webWorkerLoader, ...config.module.rules.slice(tsLoaderIndex-1)]
// console.log(config.module.rules);
if (process.env.NODE_ENV === 'production') {
config.mode = 'production'
// pack dependencies separately
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'font-size-base': '18px'
},
javascriptEnabled: true
}
}
}
},
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
package.json:
{
"name": "testApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"#ant-design/icons-vue": "^6.0.1",
"#kyvg/vue3-notification": "^2.3.4",
"ant-design-vue": "^2.2.8",
"bioseq": "^0.1.5",
"core-js": "^3.6.5",
"echarts": "^5.3.3",
"idb-keyval": "^5.1.3",
"jszip": "^3.7.1",
"lodash": "^4.17.21",
"pako": "^1.0.11",
"pdfmake": "^0.2.5",
"vue": "^3.2.4",
"vue3-infinite-scroll-good": "^1.0.2",
"xlsx": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#types/electron-devtools-installer": "^2.2.0",
"#types/node": "^16.0.0",
"#types/pako": "^1.0.2",
"#types/pdfmake": "^0.2.1",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"#vue/eslint-config-typescript": "^7.0.0",
"electron": "^13.6.9",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^4.1.2",
"less-loader": "^7.3.0",
"style-resources-loader": "^1.4.1",
"typescript": "~4.1.5",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"worker-loader": "^3.0.8"
}
}
There are some instructions that it may be caused by something wrong with the webpack configuration. But I can only find examples in vue-cli2 webpack.prod.conf.js. How do we modify that in vue-cli3?
Find the clue at https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1706
There was a mistype 'this' in one of my vue templates causing the error. Removing that fixed the problem.
I have a new Vue/Electron app just built using vue-cli-plugin-electron-builder and which will utilize sqlite.
The base install runs fine in development until I run yarn add sqlite3. I'm then presented with the aws-sdk missing dependency error.
Research suggests it's a webpack issue that can be fixed using webpack externals.
And, from the vue-electron-builder docs a similar explanation and fix.
I've updated my vue.config.js and webpack.config.js files based on this but am a few hours in now without resolution.
Any help or suggestions appreciated. Thanks.
[webpack node externals thread on github] (https://github.com/liady/webpack-node-externals)
Reading on webpack with backend apps
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
externals: [ 'sqlite3' ],
},
// If you are using Yarn Workspaces, you may have multiple node_modules folders
// List them all here so that VCP Electron Builder can find them
nodeModulesPath: ['../../node_modules', './node_modules']
}
}
//webpack.config.js
// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
const nodeExternals = require('webpack-node-externals');
let service = process.VUE_CLI_SERVICE
if (!service || process.env.VUE_CLI_API_MODE) {
const Service = require('./lib/Service')
service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}
module.exports = {
service.resolveWebpackConfig(),
externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
}
//package.json
{
"name": "spectral",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"sqlite3": "^5.0.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"webpack-node-externals": "^2.5.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-eslint": "^4.5.0",
"#vue/cli-plugin-router": "^4.5.9",
"#vue/cli-service": "^4.5.0",
"babel-eslint": "^10.1.0",
"electron": "^9.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
//sqlite connection setup
const path = require('path');
const sqlite3 = require('sqlite3').verbose()
const dbPath = path.resolve('src/db/spectral.db');
let db
export const conn = () => {
if (!db || !db.open) {
db = new sqlite3.Database(dbPath)
}
return db
}
More research led me to this thread which solved the 'sqlite3 not defined error' but created a new error 'require not found' which required adding nodeIntegration = true into vue.config.js.
// working solution vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['sqlite3'],
nodeIntegration: true
},
}
};
Additional references
vue-electron-builder native modules
I'm working on a SPA with Vue.js and Django.
I run npm run build to generate the bundle files that will be used in production. I was expecting to only generate two files: dist/bundle.js and dist/bundle.css. However, besides the aforemetnioned files, a third js file is also being generated: dist/js/about.add8abe8.js.
Why is this?
In my Django project, inside the frontend/src/views/ directory I have 3 Vue components: Home.vue, List.vue and About.vue.
EDIT:
I don't have a webpack.config file. But these are some other files that may be relevant:
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.19",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-tracker": "^0.4.2-beta"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
// on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
chainWebpack: config => {
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
config.devServer
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
},
// uncomment before executing 'npm run build'
css: {
extract: {
filename: "bundle.css",
chunkFilename: "bundle.css"
}
}
};