First of all, I'd like to admit that I'm relatively new to react, node, npm and etc. And I learn it when I have free time. I saw similar topic but answers there don't work.
I use Visual Studio code. I created react app using create-react-app cli command.
To start debugging I use 'npm start' command and then I start debugger in visual studio code with following launch config:
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "https://localhost:3000/",
"webRoot": "${workspaceFolder}",
}
It works as expected - breakpoints work, VS code shows sources. But if I do any change in the sources and save it VS code starts showing main.chunk.js instead of my sources. main.chunk.js is understandable but I believe it can be fixed.
I have spent couple of weeks on this issue and you are my last hope :)
I guess after recompiling changed source file something breaks. Seems like it can't find sources or map to source file. I tried to find something that can point to sources. I found sourceMapPathOverrides property of launch config and set it to:
"sourceMapPathOverrides": {
"/src/*": "${workspaceRoot}/src/*"
}
But it didn't help.
I thought it might be related to src folder in the solution. I tried to change "webRoot" to "${workspaceFolder}/src" but it didn't help.
I tried to set root folder in the browser's dev tools as advised somewhere here.
Using .scripts in VS code debug console I checked loaded scripts, and it says that main.chunk.js is mapped to App.js.
When I do a change in App.js instead of main.chunk.js it maps hot-update.js file to App.js.
And looks like main.chunk.js isn't mapped to App.js anymore.
So how can I fix it?)
I followed the instructions of this tutorial (https://youtu.be/KFyRLxiRKAc) and rewatched it several times but somehow it won't work for me. After I reopen the folder in the devcontainer and run npm start, the app is loading for several minutes until the browser opens localhost:3000 and presents the app. Now if I'm editing Code of the app, like changing the text of the create-react-app it won't reload at all. To detect changes I would have to restart the container but even that would take several minutes.
How can I solve the issue?
EDIT: I already tried setting CHOKIDAR_USEPOLLING=true and FAST_REFRESH=false but neither of them makes a difference
.devcontainer/.env
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
.devcontainer/devcontainer.json
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "16-bullseye"
}
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
"forwardPorts": [
3000
],
"postCreateCommand": "npm install && npm start",
"runArgs": [
"--env-file",
".devcontainer/.env"
]
}
.devcontainer/Dockerfile
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
You should do little bit of search in this forum. I'm quoting the answer:
Adding a .env file in the base path of the project and inside add
FAST_REFRESH=false.
This disables fast refresh and returns to hot reload.
I learn React JavaScript and now I have this problem
I Fork the notistack library in GitHub then download my fork with Git Desktop so the project are on Windows 10 here D:/git/notistack.
After following npm-link doc it all work ok I can debug run the notistack library typescript project in VScode.
I "npm link" on my notistack library and "npm link notistack" in my ReactJs project all standard procedure and I can debug run the library ok.
I make changes and rebuild notistack library and I see it's working ok.
But when I set up launch.json like this, with the runtimeArgs, that suppose to enable debugging I can't make breakpoints work in the Library.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks"
],
}
]
}
I set breakpoints in the ReactJs project node_module/notistack library but VSCode is setting them as unbound breakpoints.
I suspekt it has something to do with that that notistack library is a Typescript project maybe and I link to a ReactJs project. any idea?
Please advice what I need to check and do?
I looked this up, and saw some possible fixes,
Did you try disabling this setting in VSCode?
"debug.javascript.usePreview": false
Try these properties to your launch.json file
{
"trace": true,
"sourceMaps": true,
"webRoot": "${workspaceFolder}/src",
}
Restarting VSCode or Downgrading the version
Run -> Disable All Breakpoints, then Enable All Breakpoints
None of the solutions I saw for this problem worked for me. I am a windows user ; I precise cause it works without this solution, on linux, for my colleagues.
So I tried to found a configuration that works, the important parameter is outFiles :
"outFiles": [
"${workspaceFolder}/**/*.js",
"**/my-npm-linked-library/**/*.js"
"!**/node_modules/**",
]
The second line of outFiles array is the most important. You can adapt the path to one who match better with the project you work on.
The order of the paths is important, here "!**/node_modules/**" is the last one cause we don't want to add "**/my-npm-linked-library/node_modules/*.js" in our outFiles.
! Important note ! : You must remove "--preserve-symlinks" and "--preserve-symlinks-main" inside runtimeArgs parameter. My understanding about that is limited, but it doesn't work whith these options.
Try adding the --preerve-symlinks-main to the runtimeArgs. It may solve the problem.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "https://localhost:6545",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--preserve-symlinks",
"--preserve-symlinks-main"
],
}
]
}
If you wanna read the docs before implementing, here is the link: https://nodejs.org/api/cli.html#cli_preserve_symlinks_main
This can be a difficult question to answer without an example repo to view your setup. For example we don't know if you're trying to debug something for SSR or Client.
First question, are you debugging this module because it's not showing up in your App? If that's the case, and you're using Webpack to compile you may need to try resolve.symlinks: true.
Generally speaking, I try to debug my code via the software I'm using to view the compiled code. For React projects, that's usually a Browser. For stuff like Unit tests, debugging within VSCode is handy. The below suggestions are for debugging via the Browser.
For SSR
Any node_modules should show up in your Sources panel, just as they would on your file system.
Here's an article on setting Chrome up to debug Server code.
Basically, start your Server with the --inspect flag.
In an empty Browser tab go to chrome://inspect
If the Server was started with --inspect, it'll be listening for a debugging session to connect, and you should see your Server listed under the Remote Target section.
Some articles suggest clicking on the item listed under Remote Target, but I just use that as an indicator that my Server is listening. Instead I click on the Open dedicated DevTools for Node. Doing that has the same result, with the benefit of not having to reopen a debugging window if your Server restarts via something like nodemon.
Navigate to the Sources tab, and you can search for a specific source file or module to place a breakpoint in.
For Client
You'll have to ensure that your compiler (Webpack, Rollup, Parcel - whatever you use), has source maps set up correctly. Also, compilers may have default settings to strip out any inlined debugger; statements, so you'll need to look into that and disable that when building for Local.
If your source maps are set up, you should be able to go to the Sources tab (in Chrome's Devtools) and search for the file you want to debug and place some breakpoints.
If source maps aren't set up, you most likely have a giant bundle file with all your node_modules and source files all compiled together (which could be why your breakpoints aren't firing currently).
In this case, you can try adding a debugger; line within your node_modules file, and see if the debugger stops now. Don't forget to reset the node_modules file after this testing step, it was purely for debugging and shouldn't remain of course.
I am creating comment component using Nextjs for server side rendering. everything works fine in dev mode but when I try to build the optimized production, next js complains about
Cannot read property 'byname' of undefined
this is my component:
import React from 'react'
import moment from 'moment-timezone'
export default function Comment({comment}) {
return (
<div>
<div>
<span>{comment.byName}</span>
<span> {moment(new Date(comment.createdOn)).format('ll')}</span>
</div>
{comment.comment}
</div>
);
}
and this is my scripts in package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
this is the error I get
> next build
info - Loaded env from /Users/aliemami/coco-project/coco/.env
Creating an optimized production build
Compiled successfully.
Automatically optimizing pages .
Error occurred prerendering page "/community/Comment". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot read property 'byname' of undefined,
I kind of understanding what's going on, probably Nexjs is trying to create a static page from this but cannot because of the variable which is passed to the component, how can I tell nextjs that to create the component on each call? what's the most efficient solution? and how is it that Next can deal with this during development and not production?
OK, reading the documents more carefully, it seems that components cannot be under the pages folder, you have to move all the page components outside of the folder.
I'm a newcomer to React, and I was wondering something. If a site has been built using React, will I always be able to see that in the source code from the developer tools? I installed the ReactJS Super-Powered extension for Chrome, but I don't know how reliable it is.
What should I be looking for if I want to spot React in the code?
There is:
React devtools has many features.
Show me the react extension is useful.
And react uses specific keys to keep track of the dom and keep it quick which could possibly be recognized in the dom.
Delete all the .map files /js and /css folder from your generated build.
Not always. You can make them not that visible.
There are many ways to encrypt and uglify the source code.
It will make the source code complicated, ununderstandable, unreadable for humans with only one click. It implied that it could still be decrpted but not that easy.
A simple Javascript Minifier Compressor Encryptor website
hope it helps
If you don't set the following option, your react source code (not minimized) will be visible. You need to turn off the GENERATE_SOURCEMAP flag.
in package.json
"scripts": { ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... }