From @jayair on Mon Apr 10 2017 01:02:13 GMT+0000 (UTC)
Link to chapter - http://serverless-stack.com/chapters/handle-routes-with-react-router.html
Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/33
From @nerdguru on Wed Apr 12 2017 15:37:37 GMT+0000 (UTC)
Hi guys,
I’m new to React, so I may be missing something, gut when I get to this step (after loading the React Chrome extensions) I get the following:
I wasn’t sure as a React noob if I’m missing a package somewhere but I literally copied/pasted your App.js code and it’s barking about the line in that first warning supplied by the Chrome extension.
The closest I could find related to this was here:
But that syntax is very different, so I wasn’t sure exactly how relevant it was
What did I do wrong?
From @jayair on Wed Apr 12 2017 18:32:52 GMT+0000 (UTC)
Hey @nerdguru, I’m not sure if you meant index.js because we don’t touch the App.js in this chapter just yet.
One other thing to check is if your package.json has the same packages as the one in the repo - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/handle-routes-with-react-router/package.json
From @nerdguru on Thu Apr 13 2017 04:36:30 GMT+0000 (UTC)
Ugh, remember that time when I edited the wrong file and then outed myself for doing so?
I feel like an idiot, but thanks for correcting me 8).
From @lrobledo on Thu Apr 13 2017 23:21:05 GMT+0000 (UTC)
When I add this line: import { BrowserRouter as Router } from ‘react-router-dom’;
my browser gives me this error:
I’m assuming I didn’t install react-dom correctly. Could it be something else?
From @jomazu on Thu Jul 06 2017 19:55:25 GMT+0000 (UTC)
Use yarn add react-router-dom --save instead of npm install react-router-dom --save. Use yarn instead of npm moving forward!
From @ffmike on Tue Jul 11 2017 11:35:17 GMT+0000 (UTC)
I started getting errors (npm start wouldn’t run) at this step.
Tail end of the log:
20 error file sh
21 error code ELIFECYCLE
22 error errno ENOENT
23 error syscall spawn
24 error notes-app-client@0.1.0 start: `react-scripts start`
24 error spawn ENOENT
25 error Failed at the notes-app-client@0.1.0 start script.
25 error This is probably not a problem with npm. There is likely additional logging output above.
The fix was eventually
npm install eslint --save-dev
I do not guarantee that this is a missing step in the current tutorial; I don’t know enough yet to be certain. Just dropping this here in case anyone else hits the same problem.
From @jayair on Tue Jul 11 2017 17:24:40 GMT+0000 (UTC)
@ffmike That is a bit strange. Glad you figured it out. Thanks for leaving a note.
From @x11joe on Sat Nov 11 2017 10:11:47 GMT+0000 (UTC)
What is the function registerServiceWorker(); for? I tried looking up some info on this, but not sure. The comments in the file appear to say it has something to do with caching files? Where did you learn about this technique? Can you point me to the documentation so I can understand better. Thank you! I did find this though (https://github.com/facebookincubator/create-react-app/issues/2398), appears to be a huge debate about it’s use regarding caching of files?
From @jayair on Sat Nov 11 2017 19:35:56 GMT+0000 (UTC)
@x11joe That comes by default with that version of Create React App. So we didn’t add it as a part of the tutorial. You can disable it if you’d like.
From @walshe on Tue Feb 06 2018 22:25:32 GMT+0000 (UTC)
I have a serverless oauth method (below) that gets called by an external provider. In there I do the oauth dance and create a JWT token that I want to send securely to my react app.
Ideally I want to pass it in a redirect header, but not sure if i can receive that easy in my react route component . Any one know how ?
export const oauth = async (event, context, callback) => {
console.log("params got from BC ->" +JSON.stringify(event.queryStringParameters))
var response = await axios.post('https://login.bigcommerce.com/oauth2/token',{
"client_id":process.env.BIG_COMMERCE_CLIENT_ID,
"client_secret":process.env.BIG_COMMERCE_CLIENT_SECRET,
"code":event.queryStringParameters.code,
"scope":event.queryStringParameters.scope,
"grant_type":"authorization_code",
"redirect_uri":process.env.BIG_COMMERCE_CALLBACK,
"context":event.queryStringParameters.context
}).catch(function (error) {
console.log('got error ' +error)
console.log('error: ' +error);
});
console.log('got reply ' +JSON.stringify(response.data))
const token = jwt.sign({ user: response.data.user }, process.env.JWT_SECRET, { expiresIn: JWT_EXPIRATION_TIME });
console.log(`JWT issued: ${token}`);
callback(null, {
statusCode: 302,
headers: {
Location: 'https://1234.ngrok.io/bc-login-success?token=${token}',
Authorization : token
},
}) ;
}
In react app:
route:
<Route path="/bc-login-success" exact component={BCLoginSuccess} props={childProps} />
component:
export default class BCLoginSuccess extends Component {
constructor(props) {
super(props);
console.log('props:' +JSON.stringify(props.match))
this.state = {
isLoading: true,
...
};
}
In thiso component I want to use receipt of the token as the basis for setting this.props.userHasAuthenticated(true);
I then use the jwt in the header of all api gateways which will have a custom jwt authroizer to protect from unauthorized access
From @jayair on Fri Feb 09 2018 18:12:50 GMT+0000 (UTC)
@walshe You can check the headers you are retuning in your API call here - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/master/src/libs/awsLib.js#L42 as results.headers.
Hi All,
I’ve been following this guide and have had no issues up until this point. However after I get to the end of this section, I do the “npm start” command and get the following error: 
I don’t have a “registerServiceWorker.js” file in my \src\ directory, however I DO have a “serviceWorker.js” file. Would the right thing to do here be to rename “registerServiceWorker” to simply be “serviceWorker” in my index.js file? I’m assuming what has happened here is that react has changed what happens when you call create-react-app and this is what has caused me problems.
Many thanks!
FYI i have fixed my issue by replacing “registerServiceWorker” with “serviceWorker” where present in src\index.js.
I have also modified the register function to “export default function” in the serviceWorker.js file. This appears to have fixed my issue.
Thanks for letting me know. This seems related to the create-react-app v2 update. I’ll change the chapters.
react-router-dom is on v5 now.
We stuck with the older version since it was breaking the link components. Will need to check if it’s back working again before we upgrade it.