String functions not working in electron app - vue.js

I have a .js file inside an electron app that uses the quasar framework.
inside this file i have axios to make requests to my api to pull data
once i get the response i use the data for further processing. However i need some string functions to escape some strings and when i try .replace it just fails.
var t = JSON.parse(JSON.stringify(someObj))
console.log(t.message.replace(/"/g, '\\"');)
the app just fails to build and tells me there is some error in x line. if i use console.log(t.message) i see that it print the text in the terminal console, so i know the value is not null.
Also when i hover my mouse over the variable it tells me (any) not sure what this means.
image:
P.S: this is my first time working this tech stack.

turned out there was a configuration issue with babel inside electron that was using quasar framework, it didn't not accept commonjs as module and hence no vanilla javascript would work.

Just had this issue myself, I know you've answered your own question but if you can use nodejs you can install replace-string from npm and use it
command: npm install replace-string
link:
https://www.npmjs.com/package/replace-string
This issue has literally caused me a morning of work - but hope someone finds this post and fixes this issue quicker!

Related

Using bit.dev and react-native env, the build is giving error

I created two components in react-native, they are working fine in my dev environment, when I use bit compile and bit status, everything remains on track, no errors. But when i use bit build or bit tag, it starts giving me error
Validation Error: Preset react-native not found.
To counter this, I have added a new env extension that is using react-native and my components are using the env extension. I have overrided the jest config and added preset there. Nothing works. Any solution to this?
I have also confirmed that components are using the env extension only.
configured tester: teambit.defender/jest (Jest # 27.5.1) I tried overriding this jest version, which I was unable to.
I got the solution, for this we have to add react-native as dev-dependecies in workspace.jsonc file. Bit does't pick from the package.json.

How to debug neovim lsp custom command

I am attempting to get the volar vue language server to work in place of vetur for neovim's native lsp.
Using both lspconfig and lspinstall I was able to create a working custom install for sumneko_lua (unrelated but had to manually build due to some issues with the built-in :LspInstall lua). Below is that code duplicated and modified for an attempt at using this new vue server:
local vue_config = require'lspinstall/util'.extract_config('vuels')
vue_config.default_config.cmd = {'node', './node_modules/vscode-vue-languageservice/out/index.js', '--stdio'}
require'lspinstall/servers'.newvue = vim.tbl_extend('error', vue_config, {
install_script = [[
! test -f package.json && npm init -y --scope=lspinstall || true
npm install vscode-vue-languageservice#latest
]],
uninstall_script = nil
})
Running :LspInstall newvue installs properly, however :LspInfo shows this language server is attached to the buffer (of a .vue file) but not active. I believe the issue is with this path: ./node_modules/vscode-vue-languageservice/out/index.js. It exists, but may not be the correct entry point? The default vue ls simply has vls as the command because it provides a binary. Am I missing something in this package? I have yet to come across another language server without a single binary to pick out.
Thanks!
Can you try an absolute path to the out.js file? In my pretty elaborate config for a custom Volar install I'm using something just /home/myuser/dev/volar/packages/server/out/index.js (where the volar folder is just the whole volar cloned github repo). My full config is here
I don't think you can use relative paths like you did. I know you're assuming that the "./node_modules" means "workspace directory" but it's hard to tell in which directory nvim-lspconfig opens up those executables.
I have yet to come across another language server without a single binary to pick out.
Volar also provides a binary, it's volar-server (after running npm i -g #volar/server), it's just with a custom install (ie. alongside the real volar) you can't use it, because I assume you want to use your local install with custom code.
As for more indepth debugging/logging, you can check ~/.cache/nvim/lsp.log to see why the language server dies in detail.

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

ES6 import and npm packages

Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!