无法使用反应生产版本读取 JSON 文件

Question

I have a simple react component where I am reading a JSON file. The file is placed inside the public folder like this

root/public/data.json 

And I am reading the JSON file something like this

class DspTable extends Component {
  componentDidMount() {
    fetch('data.json').then(response => {
            response.json().then(res=> {
                this.setState({ stats: res, loading: false })
            })
        })
   }

 ..
}

This all works perfectly when I am running the react app locally

$ yarn start

However I need to build the site and deploy it to s3 (static hosting).

So I build the app

$ yarn build

I see that the build folder has data.json copied along with index.html.

However when I open the index.html inside the build folder, I don't see any content as no data is loaded from the JSON.

How do I load the JSON file with the production build?

I am using React version 17.0.0.

Edit: It's my mistake. I was missing the bucket policy in s3 bucket.

If anyone in the future face similar issue, please use the bucket policy like this

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

Answer 1

Are you trying to double-click the index.html to launch the file? If that is the case, it won't work as the loading of json file will be blocked by the browser. You would need to run the build package using a server (eg http://localhost:3000).