Vite + Vue3 + Fontawesome cauging syntax error - vue.js

I migrated my vue3 project today from Webpack to Vite.
To make font awesome work I used the SVG plugin for vite and everything works correct in dev mode.
As soon as I want to build my project I get an syntax error
SyntaxError: Unexpected token
Which is caused by the fontawesome-svg-core package in line 463 which is the following
if (!promise._handled && isNode) {
global.process.emit('unhandledRejection', promise._data, promise);
}
This error makes no sense to me, anybody knows how to fix is or where I went wrong during my migration?
Thanks in advance

Related

Nuxt + Typescript + Jest fails to run tests

I am using NuxtJS + TypeScript + Jest and trying to create simple test that checks if div exists. However, I encounter the error displayed bellow. I cannot seem to figure out what exactly is going wrong since I've followed official jest docs on how to install. My OS is Windows, just in case this has something to do with paths to files..
Error message:
SyntaxError: Unexpected token ] in JSON at position 819
at JSON.parse (<anonymous>)
at parse (node_modules/tsconfig/dist/tsconfig.js:135:17)
Link to repo to reproduce: https://github.com/qvorvasilev/nuxt-jest
I have also tried following step-by-step these examples:
Jest encountered an unexpected token for NUXT typescript - Throws error that cannot parse "<template>"
https://v1.test-utils.vuejs.org/ - cannot find module path at all
https://vueschool.io/lessons/installing-vue-test-utils?friend=vuejs - same as 1.
Please let me know if any more steps/info to reproduce are needed and I will gladly provide.

ESlint problem with Cypress while using Vite

I wanted to try automated testing with Vue3 for my next project.
When I created my app using Vite and selected that I would like to test with Cypress everything seems to work fine but...
Although project starts like it suppose to when i type in console npm run lint I receive an error message saying:
C:\Users\myname\Desktop\vue-project\cypress\support\component.js
27:1 error 'Cypress' is not defined no-undef
and this is the line in which error occurs:
Cypress.Commands.add("mount", mount);
Any help from you guys would be appreciated
Ok so maybe someone will find it helpful.
It appears that problem with this one considers mainly ESlint.
If you can not run Cypress with command npm run test:unit:
make sure Cypress is also installed globally.
Then simply ignore ESlint errors considering cypress and don't change this line - const { defineConfig } = require("cypress"); even if lint suggest
doing it.
Congrats, you now should be able to run tests with Cypress :)
Bonus: if you do mind errors in your console and wanna keep it clean you search for some lint setup considering Cypress, to find a good setup for your lint if you do mind errors in your console.'eslint-plugin-cypress' didn't do the trick for me.

Vue Cli remote preset crashes on Invoking Generators

i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file

react-flexbox-grid gives error in testing in node_modules how to solve it

I'm using react 16.6.3, react-flexbox-grid 2.1.2 and webpack version 4.25.1 and for test cases jest 23.6 and enzyme. While running my tests I get the following error:
/home/sanju/Quizetencyplayground/quizetencyplatform/webapp/node_modules/flexboxgrid2/flexboxgrid2.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.container {
^
SyntaxError: Unexpected token .
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (node_modules/react-flexbox-grid/lib/classNames.js:8:20)
can anyone tell me solution why it is how to remove this
It looks like Webpack doesn't know how to handle CSS files.
You probably have to add a CSS loader like this one.
If it is an option for you I would suggest to use create-react-app so you don't have to configure Webpack.

VueJS Compiles Production with Syntax Error

I'm using vue-cli (v2). The dev build works fine, but when I compile to production (npm run build), Chrome is throwing a syntax error in the vendor js file.
I don't even know where to start with debugging this. Help!
Error:
Uncaught SyntaxError: Unexpected end of input (/static/js/vendor.bcf4af616d173011918b.js)
Update: It looks like the JS file is being truncated for some reason. How to fix this?