Unable to use npm package in my gatsby (react) component - reactjs

Hello everyone i am trying to use this npm package i found in my gatsby js project https://www.npmjs.com/package/boxrec-client.
I have tried to import the library in my index.js file but seem to be getting this weird FS module error that cant be found. I have already added the package to yarn. below is my code
my imports look like this
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import boxrecClient from '../../node_modules/boxrec-client';
i am currently getting this error in my console and blank page in my localhost window.
ℹ 「wdm」: Compiling...
ERROR Failed to compile with 1 errors 7:18:28 PM
⠀
This dependency was not found:
⠀
* fs in ./node_modules/request/lib/har.js
⠀
To install it, you can run: npm install --save fs
✖ 「wdm」:
ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/Users/kevinlopez/Desktop/sample-site/node_modules/request/lib'
# ./node_modules/request/lib/har.js 3:9-22
# ./node_modules/request/request.js
# ./node_modules/request/index.js
# ./node_modules/boxrec-client/index.js
# ./src/pages/index.js
# ./.cache/sync-requires.js
# ./.cache/app.js
# multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ 「wdm」: Failed to compile.
i have also tried to install this fs package but the error consists would someone be able to guide me in the right direction ? Thanks

A BoxRec client which fetches data from the BoxRec boxing website via web scraping in Node.js. Fetches return promise objects which will resolve with the fetched data if successful.
'fs' is a backend Nodejs library (file-system), you cannot use that in the browser.

Related

Error at deploy a react project on vercel

I am receiving an error when i try to deploy using vercel, i created the app with vite
this is what i get:
vite v3.0.2 building for production...
transforming...
✓ 42 modules transformed.
[vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43558:19)
at onwarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43349:13)
at Object.onwarn (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:23177:13)
at ModuleLoader.handleResolveId (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22334:26)
at file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22295:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Command "npm run build" exited with 1```
Any suggestion on how to solve it?

Failled to Comply

I am working on a react app and when I try to start my project with npm start on the terminal I get this error message on the Browser
And this on the terminal
Failed to compile.
./src/App.tsx
Module not found: Can't resolve '#apollo/client' in 'C:\Users\user\index-ui\src'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
And the app.tsx is here
And the package.json file is on this pastebin link
App.tsx
You're trying to import the newer #apollo/client in App.tsx but installed the old "apollo-client": "^2.6.10". You need to remove apollo-client and add #apollo/client.
https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/

Realm and React error. Can't resolve 'react-native' in app created with create-react-app

I'm attempting to add the Realm package to a project created with create-react-app. I simply run the create script, install the project, then install realm. When I attempt to import or require 'realm' I get a Can't resolve 'react-native' error.
npx create-react-app my-app
cd my-app
npm i
npm i --save realm
npm start
At this point, if I attempt to import realm anywhere in the project, for instance by adding:
import Realm from 'realm';
or
Realm = require('realm');
to App.js or Index.js
I get the following error.
./node_modules/realm/lib/browser/index.js
Module not found: Can't resolve 'react-native' in '/Users/scolobey/Desktop/Projects/realm-blog/node_modules/realm/lib/browser'
As far as I have been able to tell, this seems to be related to webpack. Opening the console on this error page, I see:
./node_modules/realm/lib/browser/index.js
Module not found: Can't resolve 'react-native' in '/Users/scolobey/Desktop/Projects/javascript/my-app/node_modules/realm/lib/browser'
console.<computed> # index.js:1
r # backend.js:6
handleErrors # webpackHotDevClient.js:173
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:212
Create React App is for regular React apps (not mobile/“React Native” apps). Your app is complaining because it expects to find the “react-native” package, which doesn’t come included with Create React App.
You’ll note that Realm’s Installation Guide specifically instructs you to set up react native before installing the package.
As mentioned in the React Native Docs - Getting Started (which is linked to in the above Realm installation guide), you likely want to use expo instead of Create React App.
Once the React Native app is set up, you can proceed with installing Realm.

React webpack and redux add css and Components

I found on web this tutorial. I set react application according to tutorial and all is OK. But now i would like add css file and divide application on components how is in this tutorial . I would like show default page after run command npm start . But when I added css file and App.jsx and wrote: npm start I got error:
ERROR in ./src/App.js
Module not found: Error: Can't resolve './App.css' in '/Users/username/Documents/Projects/myApp/frontend/src'
# ./src/App.js 21:0-19
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/index.js
Thank you for your advice on how to set up your app to work properly.
Did you change the default folder structure you get when you use create-react-app. It looks like you have the location of the css file wrong.
The solution is:
npm install style-loader
npm install css-loader
and edit webpack.config.js how is in the link.

How repair error for node-config in typescript?

After installing node-config and #types/config:
npm install config
npm install #types/config
When I am trying to use in my app:
import config from 'config';
I am getting the error:
Module not found: Error: Can't resolve 'fs'
I installed the 'fs' module but still got this error.
Module not found: Error: Can't resolve 'fs'
It sounds like you are trying to use node-config in frontend code or React Native, where the fs module is not available. This is [not supported])https://github.com/lorenwest/node-config/issues/367).
There should be no need to install the fs module when using node-config with Node.js-- the fs module is built into Node.js.

Resources