React app failed to load content to browser - node.js

I am trying build cbioportal-frontend on my system but getting error when used webpack --watch:
"ERROR in /home/trainee_biocos/RecatApp_Examples/cbioportalTestRun/cbioportal-frontend-1.16.0/node_modules/typescript/lib/lib.dom.d.ts(15165,15):
TS2451: Cannot redeclare block-scoped variable 'name'.
Version: typescript 2.7.2"
but reactapp is build in dist/ folder
when "npm run start" is used same error appears but gives "build successfully completed". when browsed to "localhost:3000/" no content gets loaded.

try to restart yarn/npm from cmd for the project after following below steps.
it may be solve your issue.
Another suggestion you can try.
- Rename the variable to be something else, other than name.
The error arises because the variable 'name' already exists on the global
scope
Check for duplication of variable name.
Check TypeScript version.
use export {}; put export in your class if it is missing.

Related

I am getting the "document is not defined" error when using webpack to bundle some package for node

I am using webpack5 to bundle some packages together as an online lib and using eval in Nodejs to execute the code after fetching it.
But it seems that all the packages assume they are running in the browser environment not in Nodejs because of so many document is not defined errors. I had set the externalsPresets.node: true and output.libraryTarget: "commonjs". It's ok if I require them directly in Nodejs.
just set webpack.config.js
{
...
target: 'your target env'
...
}
I thought webpack5 does not support the target attribute, which was obviously my mistake
see https://webpack.js.org/configuration/target/

'C:\Users...' is not recognized as an internal command when starting a project with Yarn

I'm trying to start a project with Yarn using the command yarn create react-app ReportingApp --template typescript however it says that my user is not recognized:
I also tried adding the path in my windows variables (path). However, I still get the error.
I saw this issue in the past and I fixed it by replacing my user name "Gabriel Donada" with the user ID from Windows, but I have not found how to make that again.
Not sure what happened, but I used as workaround start the app using npx create react-app ReportingApp --template typescript

Error: Cannot find module 'C:\Users\Elie\Projects\MEAN\task-manager\api\index.js'

I have been following along this youtube playlist: https://www.youtube.com/watch?v=P3R-8jj3S7U. We got to the part where we finished a model and are ready to test. Run nodemoncommand to start the API and I get this error
Here is the file in question as well
Thanks for the help
UPDATE: In the package.json file i changed main to the exact file path of index.js you can see the package.json file here. This seemed to produce a better result but still didnt fix the issue. The error now reads clean - exit waiting for changes before restart and seems like it should be working but it isnt. I attached a sceengrab to have a better look. View Error
UPDATE #2: I changed the main property in the package.json file to app.js and ran nodemon command and produced this error. A bit of progress?
UPDATE #3: Here is my app.js file for reference
UPDATE #4: I updated my express property verision to include an actual verison number then ran npm install which seemed to be sucessful. I then ran nodemon again. Here are the results
Based on the information you've provided, I would guess you are executing nodemon by just typing the nodemon command without any arguments. This only works if your entry point is named index.js, but in the screenshot you provided it's clear that your entry point is named app.js, so you should be running nodemon with the following command:
nodemon app.js

VSCode and starting a project with launch.json

I installed VScode, but when I try to debug it has giving me an error msg.
Can not find runtime 'node' on PATH. Is 'node' installed?
I don't know what to do. I installed node js and what needed in it's instruction
If you have installed nodejs then you can build the project. You are trying to debug so i think you have done installlation step right. If you try to run a starter project then its version maybe higher then your node. In this state you should install last version of the node.
I think your problem is that your path is wrong.
The file path that project's itself and the compiler looking for, should not contain any invalid character, like empty ş, i, ü, etc..
Your project has to read and write permission to that directories.
You should try aboves, your error may be change or if your launch.json is right then it will work out
try to check
run cmd => 'node --version'
if it is installed well, you can check the version.
if you cant check the version, add a environment variable
bascially node.js path is ''C:\Program Files\nodejs\'
Add the path into 'Path' of 'System variable'

How to use js-cookie in a TypeScript project?

I want to use the js-cookie library in my TypeScript project.
First, I installed the library and the typings by running npm install js-cookie #types/js-cookie --save-dev in the directory that contains node_modules and package.json. package.json now contains "#types/js-cookie": "^2.1.0" and there is a folder js-cookie in node_modules.
Then I added
import * as Cookies from "js-cookie";
[...]
Cookies.remove("token");
to my TypeScript file. WebStorm doesn't show any errors.
When I run the server, I get the following error:
fetch.js:32 GET http://localhost:8080/ui/js-cookie 404 (Not Found)
common.js:85 Uncaught (in promise) Error: Fetch error: 404 Not Found
Instantiating http://localhost:8080/ui/js-cookie
Loading http://localhost:8080/ui/src/auth/userStore.tsx
Loading src/app.tsx
at fetch.js:37
at <anonymous>
What exactly did I wrong in importing js-cookie and how can I fix it?
This problem is normally fixed by using a Task Runner to shift the actual JavaScript file from:
./node_modules/js-cookie/js-cookie.js
To (for example):
./ui/js-cookie.js
(Or a location of your choice)
This is because node_modules is normally FULL of things you wouldn't want to publish to your web server, so you shift the bits you do want to publish into a folder that you will reference at runtime.

Resources