Hello,
Im having trouble "cleaning up the collection before test". I've tried the following:

1. mongo issuetracker --eval "db.employees.removed({})"
   1a. error message [js] uncaught exception: SyntaxError: unexpected token: identifier :
   @(shell):1:6
2. mongo mongodb+srv://cluster0-IssueTrackerMERN.mongodb.net/issuetracker --USERNAME atlasUser --PASSWORD atlasPassword --eval "db.employees.remove({})"
   2a.Error message: [js] uncaught exception: SyntaxError: unexpected token: string literal :
   @(shell):1:6
3. mongo "mongodb+srv://issuetrackermern-kut6p.mongodb.net/test" --username USERNAME --password PASSWORD --eval "db.employees.remove({})"
   3a. Error message: [js] uncaught exception: SyntaxError: unexpected token: identifier :
   @(shell):1:6
   3b. the above code is the connection string from MongoDB.

Im stuck. Any direction would be helpful.
Thank you,
Thomas

On refreshing the page, I lose persistence of my authentication. I believe it could be possible due a new update " https://reactjs.org/docs/legacy-context.html", although I am not sure. All I do know is that my super(props) has a strikethrough the super. My code is uploaded to github, and below I included a link to my UI repo.

UI repo - https://github.com/siricoa94/tracker-ui

P.S. I forgot to mention, I just completed the "Proxy Mode" section of chapter 15 just as a point of reference. Also, the application seems to work just fine when I run it locally on my machine. This is only an issue on Heroku so far.

This Command does not work for some reason:

npm install graphql@0 apollo-server-express@2

Error:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: [email protected] npm ERR! node_modules/graphql npm ERR! graphql@"0" from the root project npm ERR! peer graphql@"^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected] npm ERR! node_modules/apollo-server-express npm ERR! apollo-server-express@"2" from the root project npm ERR! 7 more (apollo-server-core, apollo-server-types, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer graphql@"^14.2.1 || ^15.0.0" from [email protected] npm ERR! node_modules/apollo-server-core/node_modules/apollo-graphql npm ERR! apollo-graphql@"^0.9.0" from [email protected] npm ERR! node_modules/apollo-server-core npm ERR! apollo-server-core@"^2.25.2" from [email protected] npm ERR! node_modules/apollo-server-express npm ERR! apollo-server-express@"2" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /_logs/2021-06-26T18_11_02_139Z-debug.log

When should the new version be sold?

In the solution to question number 2,
It is written that:
app.use('/public', express.static('/public'))

but this cause an error and the right answer is

• inserting a dot "." before the back-slash "/". As the path that you provide to the express.static function is relative to the directory from where you launch your node process.
• app.use("/public", express.static("./public"))
• OR,
• without the back-slash "/" in the argument to "express.static" function
  app.use('/public', express.static('public'))

Upon checking to see if my edited issue was updated I was greeted with the following error.

Not quite sure what I am doing wrong. I have a screenshot providing my code where the changes are made as well as my google developer console. I also included a screenshot of the error google sends back when attempting to sign in.

Also, the error in the developer console states -

"Access to fetch at 'http://api.promernstack.com:3000/auth/signin' from origin 'http://api.promernstack.com:8000' has been blocked by CORS policy".

I believe I made all the necessary changes but I might have overlooked something.

There is a single quote around status: 'New' which I am suggesting will be corrected in future editions of pro-mern-stack.

Amazing book, but could use help to understand how to upload and manage files like images with this stack. Thanks in advance!

When i try to hydrate it says ..bootstrap:27 Uncaught Error: Target container is not a DOM element.
at Object.hydrate (react-dom.development.js:29654:1)..but it works well in CSR and i tried evrything can someone guide me here

When using a new GraphQL version and click the "Select" button from the issues, an error was showed in the command line like this below:

When I checked your code, I found that in the IssueDetail.jsx, at the loadData function, you write the query like this:

const query = `query issue($id: Int!) {
      issue (id: $id) {
        id description
      }
}`;

To fix this, you need to change the query syntax into:

const query = `query { issue(id: ${id}) {
      id description
    }
}`;

This will show the issue's description and fix the GraphQL error when using a newer version (my version was 14.4.2 and your was 0.13.2).

toDateString function is called in line 30 and 32. I need to pass a reference to functions to work for me rather than call them.

In this section of the chapter you say to create a domain and two sub domains, both of which point to localhost. You say this can be done by editing the hosts file and adding the following line: "127.0.0.1 api.promernstack.com ui.promernstack.com". Should I add this above my current "127.0.0.1 localhost"? or should it go below? Also, how will this change affect future development on my machine?

Also, how should this file be opened and saved. When opening "c:\Windows\System32\Drivers\etc\hosts", I opened it as a text document, should I also save it as a text document in the same directory?

Furthermore, I am not permitted by my machine to save a text file in that directory, I have not attempted to do so yet with administrator privileges.

I closed this issue thinking I was not logged in as administrator, which I was. So windows still does not grant me access to edit/save the hosts file in the same directory.

on Windowns

"scripts": {
"#start": "UI server. HMR is enabled in dev mode.",
"start": "node dist/server.js",
"#lint": "Runs ESLint on all relevant files",
"lint": "eslint server src browser --ext js,jsx",
"#compile": "Generates JS bundles for production. Use with start.",
"compile": "webpack --mode production",
"#watch-server-hmr": "Recompile server HMR bundle on changes.",
"watch-server-hmr": "webpack -w --config webpack.serverHMR.js",
"#dev-all": "Dev mode: watch for server changes and start UI server",
"dev-all": "del dist\* && npm run watch-server-hmr & timeout 5 && npm start"
}

And the npm start , "never start"

Hey, thanks for the tip. Ran db.employees.remove({}) in Mongo shell and it returned in shell WriteResult({ "nRemoved" : 0}). Then ran node scripts/trymongo.js in Mongo shell and got error message uncaught exception: syntaxError: unexpected token: identifier: @(shell): 1:5.
Please help.
Thomas

I've worked my way through your book which for the most part I have found very good, but do have a couple of problems. The edit reads the id as a string, I've done my best to change it to int and then on my localhost it gives read only. A similar problem arises with the search filter. Any help would be appreciated, thank you.

[GraphQLError [Object]: Variable "$id" got invalid value "7"; Int cannot represent non-integer value: "7"] {
message: 'Variable "$id" got invalid value "7"; Int cannot represent non-integer value: "7"',
locations: [ { line: 1, column: 13 } ],
path: undefined,
extensions: { code: 'INTERNAL_SERVER_ERROR', exception: { stacktrace: [Array] } }
}

So I am switching over to Mongo Atlas from the local database I have been using on my machine. I was able to connect in the command prompt fine and was also able to populate my database, but when it came to using the script as an environment variable in my .env file I ran into the following error. I would also like to mention I whitelisted my IP address and made sure that I am using the proper user and password to connect to my database.

Command npm install react-router-bootstrap@0 produced an unable to resolve dependency tree error and should probably be replaced with npm install react-router-bootstrap@rr-v4 in the Navigation Bar section of Ch11.

At least this seemed to work for me.

Hi,
Since we implemented SSR and SPA simultaneously, I am wondering what the advantage have the Next.js over the approach we implemented. Are these two approaches are comparable at all? What is the pros and cons of each?
Thanks in advance

Not sure where my problem is, attached
here is a screenshot of my server.js file and my package.json.

I am having an error in chapter 7.
The error says: Localhost:8000 says Error in sending data to server: Cannot read properties of undefined (reading 'UI_API_ENDPOINT')

Do I need to add anything on the env.js file to fix the issue or something else?

Thank you.

So I am almost complete with the chapter when I noticed that when I clicked "Select" to show the description that the title would show but not the actual description. This prompted me to check my init.mongo.js and I noticed that no edits I made in this file were being displayed in the browser. I have read over every file in both the API and UI structure line for line besides the bundle.js files. I could not find much of a difference besides spacing preference. Also I am able to add new issues still via the browser. I have checked in graphql to make sure my new additions via the browser are going through and they are.

So I realized since i posted above that I have to do the following to have my browser reflect the changes in init.mongo.js -

• Run using the mongo shell. For remote databases, ensure that the
• connection string is supplied in the command line. For example:
• localhost:
• mongo issuetracker scripts/init.mongo.js

I have ran the command in my mongo shell and in my intergrated terminal with no results, I have added new issues via the GraphQL playground to ensure my details are working, which they are. So I think the source of my confusion is due to my lack of knowledge on where to run the command for init.mongo.js.

I completed the Data from API section and now when i run the application it throws an error "Unable to Fetch data". Looking in the Chrome dev tools shows that it is blocking it because of the CORS policy. However the cors policy is set to false in the api? Is there something else I am missing?

Note that the application ran fine up to this point. and that the about page renders properly with the unknown

When I run the command, I receive the following issue.

npm ERR! code EEXIST
npm ERR! path C:\Program Files\nodejs\npm.cmd
npm ERR! Refusing to delete C:\Program Files\nodejs\npm.cmd: is outside C:\Program Files\nodejs\node_modules\npm and not a link
npm ERR! File exists: C:\Program Files\nodejs\npm.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

I worry about forcing it, however that seems to be the agreement online. I have also seen it break on some people.

In Section: Nested Routes, the website code says to put the Atlas:

• mongo mongodb+srv://user:[email protected]/issuetracker scripts/init.mongo.js in command line. Which command line? bash? mongo shell? node?
  Thanks!

As you can see on the image I was having problems with cors privacy.

Solution: editing env.js file

File content described in book:
window.ENV = {
UI_API_ENDPOINT: "http://localhost:3000"
}

Edited:
window.ENV = {
UI_API_ENDPOINT: "http://localhost:3000/graphql"
}

I getting the message "Uncaught ReferenceError: message is not defined at App.js:4"

In Index.html I have "<script src="App.js"></script>". In App.js I have
"const element = /#PURE/React.createElement("div", {
title: "Outer div"
}, /#PURE/React.createElement("h1", null, message));
ReactDOM.render(element, document.getElementById('contents'));"

Nothing is rendered to the UI. Do i need to add the public/app.js to the a .gitignore file?
Thanks!

From Chapter 5, making changes to server.js (I think that it is because of ApolloServer import) it is impossible to run server.js. It crashes with following error:

It is not a problem with my code as it occurs even when I clone your repository and checkout to branches after 4.X.

Hi, let me explain further. Of course, I see the commit history. But please take a look at the attached picture. That's what I want to say.

Originally posted by @mr-correct in #23 (comment)

I use react 17 and I have the following case:

<Redirect exact from="/" to="/issues" />
This does not work. The following case doesnt work too. The point is that context does not set apparantly in SSR Render midlleware

<Route path="/" exact>
        <Redirect to="/issues" />
      </Route>

Thanks in advance

You wrote to refer to your repository for the correct code, but I can't find the completed/finished versions for each chapter and section. I recommend making git repository again to show clear code changes over sections of the book.

Since making changes beginning in Chapter 7 (Architecture and ESLint) i have been having problems getting the ui to load in the browser. Initially i was getting 'unexpected token < in JSON at position 0' (after creating separate ui and api servers). Then failing to fix this i continued with the chapter hoping more changes might resolve the issue. Now i have completed everything up to and including Ch7 Proxy-Based-Architecture. The ui will still not load in the browser and i'm getting the above (404) error. Everything else appears to be working fine: both servers are running in the terminal and the graphql playground is loading fine.

The code should be fine as i've even gone over it and even copied and pasted from this Git repository just to be double sure. I've also checked the file structure. The only difference is my package.json, as due to dependancy issues i've encountered, some of the package versions are different, so i'm wondering if this could be the problem. But it is unclear to me as i'm getting no issues in the terminal when i run the servers.

{
"name": "pro-mern-stack-2-ui",
"version": "1.0.0",
"description": "Pro MERN Stack (2nd Edition) - UI",
"main": "index.js",
"scripts": {
"start": "nodemon -w uiserver.js -w .env uiserver.js",
"compile": "babel src --out-dir public",
"watch": "babel src --out-dir public --watch --verbose"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vasansr/pro-mern-stack-2.git"
},
"author": "[email protected]",
"license": "ISC",
"homepage": "https://github.com/vasansr/pro-mern-stack-2",
"dependencies": {
"dotenv": "^6.2.0",
"express": "^4.16.4",
"http-proxy-middleware": "^0.21.0",
"nodemon": "^1.18.9"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0"
}
}

I am reading your book. I normally do not like much books in Programming (and usually quit reading them after one chapter!). But your book is really type of me! I just want to say thank you for that book specifically when you speak about React. Insists on doing things from the ground to know what happen behind the scene even where there is ready alternatives in npm packages or considering multiple ways for doing something and expressing all pros and cons of them and selecting the recommended way at the end or considering all the rainy cases that may encounter are only just samples of what make this book really great and distinct. Thanks again

When learning the "Older Browsers Support", I copied your code from the App.jsx from Git and type "$ npx babel src --out-dir public" in npm, it showed the following error:

When I click Edit I keep getting INTERNAL_SERVER_ERROR.
[GraphQLError: Variable "$id" got invalid value "2"; Expected type Int; Int cannot represent non-integer value: "2"]
As a result the page says 'Issue with ID 2 not found'.
In every Chapter I get this. I'm in Chapter 11 now. The code is from the web site.

My application is not working as intended. No error message, app.bundle.js is in the network console but vendor.bundle.js is not. Although my nodemon version is different due to a Prototype Pollution vulnerability alert when I used the referenced version. When I did this said update, I made sure my application worked as intended and it did. It was not until I removed all the CDN's from my index.html that I encountered this problem.

So I am having a problem with running this command in my terminal. When I type this directly into my terminal it returns saying "bash: mongo: command not found". I also tried typing this into my mongo shell to no avail. I am not quite sure what may be wrong but I will include some screen shots here of what my shells are returning. Also, I have mongodb version 3.5.9 installed in my package.json with 4.2 being the version on my machine which is located within my program files directory in my C drive.

Mongo Shell:

Command Prompt

Terminal

I am in Chapter 5 working through creating custom scalar types and create api sections. When ever I implement the scalar type in server.js and app.jsx I get the below error

`react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Wed Sep 23 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead.
in td (created by IssueRow)
in tr (created by IssueRow)
in IssueRow (created by IssueTable)
in tbody (created by IssueTable)
in table (created by IssueTable)
in IssueTable (created by IssueList)
in IssueList
at throwOnInvalidObjectType (react-dom.development.js:13548)
at reconcileChildFibers (react-dom.development.js:14448)
at reconcileChildren (react-dom.development.js:16897)
at updateHostComponent (react-dom.development.js:17437)
at beginWork (react-dom.development.js:18762)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22289)
throwOnInvalidObjectType @ react-dom.development.js:13548
reconcileChildFibers @ react-dom.development.js:14448
reconcileChildren @ react-dom.development.js:16897
updateHostComponent @ react-dom.development.js:17437
beginWork @ react-dom.development.js:18762
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22289
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
scheduleUpdateOnFiber @ react-dom.development.js:21334
enqueueSetState @ react-dom.development.js:12774
Component.setState @ react.development.js:557
_callee$ @ App.js:177
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t. @ polyfill.min.js:1
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
(anonymous) @ App.js:5
(anonymous) @ App.js:5
loadData @ App.js:190
componentDidMount @ App.js:145
commitLifeCycles @ react-dom.development.js:19949
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ App.js:221
react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Tue Jun 16 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead.
in td (created by IssueRow)
in tr (created by IssueRow)
in IssueRow (created by IssueTable)
in tbody (created by IssueTable)
in table (created by IssueTable)
in IssueTable (created by IssueList)
in IssueList
at throwOnInvalidObjectType (react-dom.development.js:13548)
at reconcileChildFibers (react-dom.development.js:14448)
at reconcileChildren (react-dom.development.js:16897)
at updateHostComponent (react-dom.development.js:17437)
at beginWork (react-dom.development.js:18762)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22289)
throwOnInvalidObjectType @ react-dom.development.js:13548
reconcileChildFibers @ react-dom.development.js:14448
reconcileChildren @ react-dom.development.js:16897
updateHostComponent @ react-dom.development.js:17437
beginWork @ react-dom.development.js:18762
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22289
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
scheduleUpdateOnFiber @ react-dom.development.js:21334
enqueueSetState @ react-dom.development.js:12774
Component.setState @ react.development.js:557
_callee$ @ App.js:177
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t. @ polyfill.min.js:1
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
(anonymous) @ App.js:5
(anonymous) @ App.js:5
loadData @ App.js:190
componentDidMount @ App.js:145
commitLifeCycles @ react-dom.development.js:19949
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ App.js:221
react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Sun Aug 16 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead.
in td (created by IssueRow)
in tr (created by IssueRow)
in IssueRow (created by IssueTable)
in tbody (created by IssueTable)
in table (created by IssueTable)
in IssueTable (created by IssueList)
in IssueList
at throwOnInvalidObjectType (react-dom.development.js:13548)
at reconcileChildFibers (react-dom.development.js:14448)
at reconcileChildren (react-dom.development.js:16897)
at updateHostComponent (react-dom.development.js:17437)
at beginWork (react-dom.development.js:18762)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22289)
throwOnInvalidObjectType @ react-dom.development.js:13548
reconcileChildFibers @ react-dom.development.js:14448
reconcileChildren @ react-dom.development.js:16897
updateHostComponent @ react-dom.development.js:17437
beginWork @ react-dom.development.js:18762
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22289
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
scheduleUpdateOnFiber @ react-dom.development.js:21334
enqueueSetState @ react-dom.development.js:12774
Component.setState @ react.development.js:557
_callee$ @ App.js:177
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t. @ polyfill.min.js:1
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
(anonymous) @ App.js:5
(anonymous) @ App.js:5
loadData @ App.js:190
componentDidMount @ App.js:145
commitLifeCycles @ react-dom.development.js:19949
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ App.js:221
3react_devtools_backend.js:2273 The above error occurred in the component:
in td (created by IssueRow)
in tr (created by IssueRow)
in IssueRow (created by IssueTable)
in tbody (created by IssueTable)
in table (created by IssueTable)
in IssueTable (created by IssueList)
in IssueList

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:2273
logCapturedError @ react-dom.development.js:19662
logError @ react-dom.development.js:19699
update.callback @ react-dom.development.js:20843
callCallback @ react-dom.development.js:12625
commitUpdateQueue @ react-dom.development.js:12646
commitLifeCycles @ react-dom.development.js:20018
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
scheduleUpdateOnFiber @ react-dom.development.js:21334
enqueueSetState @ react-dom.development.js:12774
Component.setState @ react.development.js:557
_callee$ @ App.js:177
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t. @ polyfill.min.js:1
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
Promise.then (async)
asyncGeneratorStep @ App.js:3
_next @ App.js:5
(anonymous) @ App.js:5
(anonymous) @ App.js:5
loadData @ App.js:190
componentDidMount @ App.js:145
commitLifeCycles @ react-dom.development.js:19949
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ App.js:221
react-dom.development.js:242 Uncaught (in promise) Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:242)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22289)
at workLoopSync (react-dom.development.js:22265)
at performSyncWorkOnRoot (react-dom.development.js:21891)
at react-dom.development.js:11224
at unstable_runWithPriority (react.development.js:2685)
at runWithPriority$1 (react-dom.development.js:11174)
at flushSyncCallbackQueueImpl (react-dom.development.js:11219)`

Here is server.js

`const fs = require('fs');
const express = require("express");
const { ApolloServer } = require('apollo-server-express');
const { GraphQLScalarType } = require('graphql');

let aboutMessage = "Issue Tracker API v1.0";

const issuesDB = [
{
id: 1, status: 'New', owner: 'Ravan', effort: 5,
created: new Date(2020, 08, 23), due: undefined,
title: 'Error in console when clicking Add',
},
{
id: 2, status: 'Assigned', owner: 'Eddie', effort: 14,
created: new Date(2020, 05, 16), due: new Date(2020, 07, 16),
title: 'Missing bottom border on panel',
},
];

const GraphQLDate = new GraphQLScalarType ({
name: 'GraphQLDate',
description: 'A Date() type in GraphQL as a scalar',
serialize(value) {
return value.toISOString();
},
});

const resolvers = {
Query: {
about: () => aboutMessage,
issueList,
},
Mutation: {
setAboutMessage,
issueAdd
},
GraphQLDate,
};

function setAboutMessage(_, { message }) {
return aboutMessage = message;
}

function issueAdd(_, { issue }) {
issue.created = new Date();
issue.id = issuesDB.length + 1;
if(issue.status == undefined) issue.status = 'New';
issuesDB.push(issue);
return issue;
}

function issueList() {
return issuesDB;
}

//configure the apollo server
const server = new ApolloServer({
typeDefs: fs.readFileSync('./server/schema.graphql', 'utf-8'),
resolvers
});

const app = express();

//const fileServerMiddleware = express.static('public');
app.use(express.static("public"));

server.applyMiddleware({ app, path: '/graphql' });

app.listen(3000, function () {
console.log("App started on port 3000");
});
`

And here is App.jsx

`const dateRegex = new RegExp('^\d\d\d\d-\d\d-\d\d');

function jsonDateReviver(key, value) {
if (dateRegex.test(value)) return new Date(value);
return value;
}

class IssueFilter extends React.Component {
render() {
return

function IssueRow(props) {

const issue = props.issue;
return (

{issue.id}
{issue.status}
{issue.owner}
{issue.created}
{issue.effort}
{issue.due ? issue.due : ' '}
{issue.title}

);

}

function IssueTable(props) {
const issueRows = props.issues.map((issue) => (

));
return (

}

class IssueAdd extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(e) {
e.preventDefault();
const form = document.forms.issueAdd;
const issue = {
owner: form.owner.value, title: form.title.value, status: 'New',
}
this.props.createIssue(issue);
form.owner.value = "";
form.title.value = "";
}

render() {
return (
<form name="issueAdd" onSubmit={ this.handleSubmit }>


Add

);
}
}

class IssueList extends React.Component {
constructor() {
super();
this.state = { issues: [] };
this.createIssue = this.createIssue.bind(this);
}

componentDidMount() {
this.loadData();
}

async loadData() {
const query = query { issueList { id title status owner created effort due } };

const response = await fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query })
});

const body = await response.text();
const result = JSON.parse(body, jsonDateReviver);
//const result = await response.json();
this.setState({ issues: result.data.issueList });

}

createIssue(issue) {
issue.id = this.state.issues.length + 1;
issue.created = new Date();
const newIssueList = this.state.issues.slice();
newIssueList.push(issue);
this.setState({ issues: newIssueList });
}

render() {
return (
<React.Fragment>

Issue Tracker

const element = ;

ReactDOM.render(element, document.getElementById("content"));
`

And the schema

`scalar GraphQLDate

type Query {
about: String!
issueList: [Issue!]!
}
type Mutation {
setAboutMessage(message: String!): String
issueAdd(issue: IssueInputs!): Issue!
}

type User {
name: String
}

type Issue {
id: Int!
title: String!
status: String!
owner: String
effort: Int
created: GraphQLDate!
due: GraphQLDate
}

"Toned Down Issue, used as inputs, without server generated values"
input IssueInputs {
title: String!
"Optional, if not supplied, will be set to 'New'"
status: String
owner: String
effort: Int
due: GraphQLDate

}`

Sorry about the lenght. Any direction would be appreciated. Thanks

Thank you very much, Master Vasan.
Since I know you have release 2nd edition, then I buy it with Kindle reading.

So cannot wait for trying to do the lab.
I try to start from GraphQL and MongoDB Chapter 6.
It works very well to display but when I add, I get the following error.
[GraphQLError: Cannot destructure property issue of 'undefined' or 'null'.]

I ended up the second book chapter; when I tried to launch npm run watch, Babel throw this error:

Support for the experimental syntax 'jsx' isn't currently enabled

To solve this, you have to:

1. add this dependency to your package.json:
   "@babel/preset-env": "^7.12.13" <--- same version of @babel/preset-react

2. Launch npm install. Those are my dependencies at this point:

    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "express": "^4.17.1",
    "node": "14.16.0",
    "nodemon": "2.0.7"
   

3. Subsequently, you have to change Babel's configuration settings.
   You can do it with an external file

4. At the root folder of your project (where package.json is located), create a new file named "babel.config.js" and add those lines:

    module.exports = {
        presets:[
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }
   

When I tried to launch again npm run watch, the issue was gone.

Original solution:
https://stackoverflow.com/questions/62703393/support-for-the-experimental-jsx-isnt-currently-enabled

I am getting this issue at chapter 7.02.
The problem looks to be in in App.jsx, at the graphQLFetch function:

async function graphQLFetch(query, variables = {}) {
try {
const response = await fetch(window.ENV.UI_API_ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({ query, variables })
});

Where the window.ENV results undefined

The global variable should be set in env.js file and i can see its definition in the browser console.

This prevent the table to be displayed in the browser in its initial form.
If I try to add an issue is works and displays the full table.

Hi there, I �didn't see anyone else mentioning this issue, but for the whatwg-fetch to work, I needed to load the polyfill.min.js script in index.html. Else, I get a ReferenceError for regeneratorRuntime. It is not optional like it says in the book (second edition). This was tested on Firefox version 74.0.1. Thanks.

I'm getting error message in the console "Uncaught (in promise) ReferenceError: isBrowser is not defined". I have copied all the code for this sections and am still getting the above error message. Any suggestions?
Thanks!

Well, since it is not specified where to run "npx babel" in the book, I ran it on my server/About.js file. I am not sure if this was correct since it is not clearly stated in the book. I also noticed that on a refresh of the About page that it changes to the template.js and not the About.jsx file. I am not sure if this is intentional or not but I figured I would report these two issues.

-edit: I believe it is running as intended as I have seen while completing the following section in the chapter, my apologies.