I've spent a lot of time testing and researching this issue, but I haven't been able to solve it. I have a function that runs perfectly fine on my local machine (no errors), but fails when deployed as an AWS Lambda.
To demonstrate the problem, I created a simple example:
LOCAL URL: http://localhost:3000/flagTest/visible (works fine ✅)
LAMBDA DEPLOYED URL: (Toggle button doesn't work ❌)
FILE: /pages/flagTest/[tid].js (on a basic NextJS setup)
import React from 'react'
class FlagTest extends React.Component {
static async getInitialProps({ query }) {
return { visible: query.tid }
}
constructor(){
super();
this.state = {
showFlag:false,
}
}
componentWillMount(){
this.setState({ showFlag: this.props.visible === 'visible' });
}
handleToggle =()=> {
this.setState({
showFlag:!this.state.showFlag
});
}
render() {
return (
<div>
<h1>Flag: {this.state.showFlag ? '🏁' : ''} </h1>
<button className='list_toggle' onClick={this.handleToggle}>
{this.state.showFlag ? 'Hide Flag': 'Show Flag'}
</button>
<hr/>
Props:
<pre>
{JSON.stringify(this.props, null, 2)}
</pre>
State:
<pre>
{JSON.stringify(this.state, null, 2)}
</pre>
</div>
);
}
}
export default FlagTest
Note: I'm using getInitialProps because I plan to use it in a more complex scenario involving API fetching by id. I didn't include it here because it's not directly related to this issue.
This is my Serverless YML configuration
service: A123-serverless
provider:
name: aws
runtime: nodejs8.10
stage: ${self:custom.secrets.NODE_ENV}
region: us-west-2
environment:
NODE_ENV: ${self:custom.secrets.NODE_ENV}
functions:
server:
handler: index.server
events:
- http: ANY /
- http: ANY /{proxy+}
plugins:
- serverless-apigw-binary
- serverless-domain-manager
custom:
secrets: ${file(secrets.json)}
apigwBinary:
types:
- '*/*'
customDomain:
domainName: ${self:custom.secrets.DOMAIN}
basePath: ''
stage: ${self:custom.secrets.NODE_ENV}
createRoute53Record: true
endpointType: 'regional'
Thank you!