vue-cli-service serve and buid generating different styles - javascript

I'm not sure how to show it but for some reason after vue-cli-service build and vue-cli-service serve page looks different. In the case of build all is fine but in the case of serve styles are messed, but there are no errors while building and no error in the browser console. I can share the package.json if it can help and some other configuration files I have...
package.json
{
"name": "newlanding",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.11"
},
"devDependencies": {
"#mdi/js": "^5.4.55",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
I know it's hard to find the reason without the actuall code... but maybe you have some suggestion, I do not know where else to look, as I told before no errors while building and in browser, also no errors in yarn-error.log.

Related

Error when Deploying Electron app with vue cli

I followed this tutorial : https://buddy.works/tutorials/building-a-desktop-app-with-electron-and-vue-js
i install electron-builder but my exe show an empty screen ( in dev mod i see the normal page of vue-cli)
thank for your help
there is my package.json
{
"name": "electron-vue",
"version": "0.1.0",
"private": true,
"main": "main.js",
"scripts": {
"start": "vue-cli-service build && electron .",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"app:dist": "electron-builder ",
"app:dir": "electron-builder --dir"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"babel-eslint": "^10.1.0",
"electron": "^17.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"electron-builder": "^22.14.13"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

(plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions

I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```
Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel
I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files

Cannot use statement outside a module and Must use import to load ES Module

I'm trying to build a .exe file of my VueJS project.
For that, I want to use Electron and electron-packager.
I'm facing some issues when launching the .exe app created with the command : electron-packager . --all. The first one was:
I found on the internet that I had to add "type":"module" and "module":"es2015" in my package.json file. I added it and then I have another problem which is:
I really don't know what to do with this.
Here is my package.json file:
{
"name": "hihihihi",
"version": "0.1.0",
"type":"module",
"module":"es2015",
"description": "hihihihi",
"author": "Hihihi Hihihi <hihi.hihi#hihi.com>",
"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": "src/background.js",
"dependencies": {
"#mdi/js": "^5.9.55",
"core-js": "^3.6.5",
"nedb": "^1.8.0",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vuetify": "^2.5.2",
"vuex": "^3.6.2"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^1.5.2",
"electron": "^13.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.34.0",
"sass-loader": "^10.2.0",
"vue-cli-plugin-electron-builder": "~2.1.1",
"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"
]
}

Which is the entry file used by vue-cli-service?

Got a project using vue, webpack, babel, npm.
Could start it via npm run server, when trying to figure out how this command work, I saw vue-cli-service serve from package.json.
But, how does vue-cli-service start the program? I saw main.js which in turn render Vue.vue, both of which are under src/.
Didn't see anywhere config the entry file, so is main.js the default entry for vue-cli-service?
Code
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue-cli-service uses Webpack with a default configuration of
entry: {
app: [
'./src/main.js'
]
}
This can be altered in vue.config.js if you wish. See https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack will build a JS bundle, starting at the entry then inject that into the index.html file and that's how your app starts.
You can see the entire configuration for your app using
vue inspect
See https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config
It is hardcoded in #vue.
Relative Path: node_modules/#vue/cli-service/lib/config/base.js
Line 28-37:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)

Categories