How to use PocketBase in React - javascript

I am currently learning React and wanted to use PocketBase in my app. I installed PocketBase via npm i pocketbase --save yet when I try and run my React app, I get this message,
Cannot find module 'pocketbase' or its corresponding type declarations.
> 1 | import PocketBase from 'pocketbase'
| ^^^^^^^^^^^^
I have tried searching but the only thing I can find is deprecated. If anyone know how to do this, that would be great!

Looks like it may just lag from your IDE. I am getting the same thing but my app is not breaking and I also have installed pocketbase. Once I create an instance though it started working- I believe because VSCode refreshed after it had to try to fetch the type definitions.
After VScode fetches type definitions

Related

Unable to fix Node Path in packaged Electron App

I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save

index.tsx in package react-router has 152 problems

Everything seems to work fine, I just see those errors. Is this normal? How can i fix this.
My react application is written in Javascript, not in Typescript, but I do not think that this should matter, should it?
Are you using a package manager like npm/yarn/pnpm for installing react-router? Looking at that pathname it kinda looks like you're not and you should be.
If you're trying to import the index.tsx file directly in your JavaScript it won't work, you'll need the transpiled version which would be available automatically by installing it through a package manager (something like npm install react-router). The plain js files would then be available under node_modules/react-router in the root directory of your project.
To import it somewhere in a React project you could then use:
import { Route } from 'react-router'
(no need for the full path name including node_modules - more info on npm install here: https://docs.npmjs.com/cli/v6/commands/npm-install)
I've just restarted Visual Studio Code and the errors disappeared.
For context, I had Visual Studio running for some days now, so I can see how this could lead to some bugs.

The global CKEDITOR_VERSION constant has already been set on vue

I am creating Vue spa and integrating CKEditor here using this package I tried to do just like the tutorial by adding this to my app.js
import Vue from 'vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import documentEditor from '#ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const options = {
editors: {
classic: ClassicEditor,
document: documentEditor
},
name: 'ckeditor'
}
Vue.use(VueCkeditor.plugin, options);
and to make it work I doing NPM install to those 2 editors (ClassicEditor and documentEditor)
npm install --save #ckeditor/ckeditor5-build-decoupled-document
and since I also need CKEditor but with much more simpler or to being said without image upload features then I for the ckeditor5 build classic and remove those plugin from there and then NPM build and then I am doing this on my Vue spa
npm install --save #ckeditor/ckeditor5-build-classic
after that, I open #ckeditor folder on node_modules and find the ckeditor5-build-classic folder and replace build folder with my custom version of CKEditor build classic
but then I get this error
ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set.
even though the editor still working, but I don't like the idea my console showing error
This problem is precisely described in docs, you can't run two editors from different builds on the same page (or mixing builds and source code).
tl;dr; The easiest way to enable running two different editors on the same site is to create a custom build that will export these two builds. This is described in the above docs.
The behavior has changed ~3 months ago and the error has been added to such situation to prevent bugs and big size of the bundle. Therefore the author of the https://github.com/igorxut/vue-ckeditor5 can just update the readme to follow the latest version's API.
I recommend to create "super build".
For example you can clone repository of classic build and change 3 files.
Check my gits.
I updated example1 for using this build.

Error importing npm module in react-native

Currently creating an android app. I am simply trying to import the spotify-web-api-node module.
One line so far in my index.android.js to do this:
import SpotifyWebApi from 'spotify-web-api-node';
When I go to load the JS into my emulator I get the follow error:
602/603Error while persisting cache: SyntaxError /path/to/the/project/node_modules/restler/lib/multipartform.js: Invalid number (112:35)
I am using a mac, this occurs for android (have not tried ios yet).
react-native -v =
react-native-cli: 0.1.10
react-native: 0.21.0
Is this module surely not compatible with react-native or is there an edit I may need to make within restler to make it compatible? I see on the line it is complaining about, it is attempting to open/use the file system.
Line that is in the error description:
fs.open(this.value.path, "r", 0666, function (err, fd) {
First of all, I have never used this API. But after reading readme.md of spotify-web-api-node I found spotify-web-api-js
I assume you want to fire queries through spotify's API and display the results in your app. I'd suggest you to use spotify-web-api-js instead of spotify-web-api-node
You can call fetch() in your react-native app and use their API. Please let me know if this works. So that programmers who are facing the same problem will have an answer on this thread. Good luck!

Visual Studio Code - TypeScript Definitions for MongoDB

I'm trying to build a simple web application using Node.js and Express. After having installed both definitions using tsd as this guide shows.
Trying tsd query mongodb --action install it doesn't get error like zero result or something, but still can't show autocompletion on vscode.
I guess if it's posible to install even MongoDB definitions. Does it?
EDIT: mongodb.d.ts is in typings\mongodb folder in my project.
My ignorance in MongoDB induced me to miswrote module name. MongoDB tutorial shows require('mongoskin') instead of require('mongodb') I thought it could be the same thing but it isn't.
Luckily, replacing module name mongoskin with mongodb, it worked.

Categories

Resources