Having issues reading an excel file (fs readFilesync error) - reactjs

I am stuck on this error from quite sometime. I am trying to read an excel file (.xlsx file) using the xlsx package.
import XLSX from 'xlsx'
This is how I read the excel file
var workbook = XLSX.readFile('./file.xlsx');
This file is in the same folder as the code is in. So the path seems to be right as well.
I do not get any compile time errors, but when I go on the UI and click the download button, the above line is triggered (reading from an excel file), and this is the error that is seen:
Looks like xlsx package is trying to use fs package from #types/node module.
I have also installed #types/node package which is required for fs.
I even tried to check if file sync works and tried reading a file via fs.readFileSyn ... but I keep getting an error during compile time (when I do npm run start), that Module not found: Error: Can't resolve 'fs' in ...
I tried importing fs in these two ways:
import * as fs from 'fs'
import fs from 'fs' I tried with require as well.
but none of those these worked.
note: My webpack file has css loader and a ts loader. I'm not too sure if webpack(loaders) could be the issue. Let me know if this could be the issue and why?
Can someone please help me resolve the above error mentioned? I'm trying to figure this one out from quite sometime.

Related

Module not found: Error: Package path ./compat is not exported from package

I'm working on my project and all of a sudden, I got the following message from the compiler and don't know how to solve the problem:
ERROR in ./src/frontend/service/AuthService.ts 8:0-39
Module not found: Error: Package path ./compat is not exported from package /Users/chuben/Desktop/Coding_Projects/ecommerce-react-node/final.frontend.project/node_modules/firebase (see exports field in /Users/chuben/Desktop/Coding_Projects/ecommerce-react-node/final.frontend.project/node_modules/firebase/package.json)
ERROR in ./src/frontend/ui/page/RegisterPage/index.tsx 14:0-39
Module not found: Error: Package path ./compat is not exported from package /Users/chuben/Desktop/Coding_Projects/ecommerce-react-node/final.frontend.project/node_modules/firebase (see exports field in /Users/chuben/Desktop/Coding_Projects/ecommerce-react-node/final.frontend.project/node_modules/firebase/package.json)
I don't understand what the problem is and how should I export the path correctly? I will really appreciate anyone who can help solve this problem. Thanks in advance!
Hopefully, I don't have to do everything from scratch by starting a new project.
I found the issue there. I shouldn't set the following in my React page, or else the system will try to search the module for the variable or sth.
const [firebaseUid,setFirebaseUid]=useState<String|undefined>(undefined);

Why can't the Web Browser find these modules, resolve, and compile the page?

In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.

Module not found. Can't resolve 'assets/styles/constants'

I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any

Cant use 'fs' in my react-native project.. don't know how to solve

Hi im trying to use the fs.createReadStream() function in 'fs' however i cant seem to use this module as i keep getting this build error.
bundling failed: Error: While trying to resolve module fs from file /Users/bentait/Desktop/memriio/memriio_app/src/datapass.js, the package /Users/bentait/Desktop/memriio/memriio_app/node_modules/fs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/bentait/Desktop/memriio/memriio_app/node_modules/fs/index.js. Indeed, none of these files exist:
Im almost at my end trying to learn js, react, react-native.. i seem to spend 90% of time trying to solve these sorts of problems and 10% of time writing actual code..
anyway - not really expecting a response on this but cool, if you know how to help..
You're not able to use node's fs because it is part of nodejs environment. As you surely know your application code is not running on nodejs but rather directly on your smartphone (besides debug mode but even there you cannot use node's fs package).
To access and manipulate smartphone's filesystem take a look at react-native-fs or rn-fetch-blob package.

failed to compile React projects

I am busy with a project of React and
When I want run a browser I get this error.
./src/Components/ui/icons.js
Module not found: Can't resolve './src/Resources/images/logos/manchester_city_logo' in 'C:\Users\Daniel\Desktop\mancity\src\Components\ui'
This error occurred during the build time and cannot be dismissed.
I made sure of correct names of folders. Is it a npm webpack?
You are most probably referring to a non-existed media file or using wrong file extension when importing manchester_city_logo (probably in icons.js)
Doublecheck the source path for desired media file in icons.js

Resources