Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 when trying to pull d-CodePudding

I am trying to pull a JSON file from an S3 bucket. Below is my api route which pulls the json file:

const {GetObjectCommand, S3Client} = require("@aws-sdk/client-s3");
const client = new S3Client() // Pass in opts to S3 if necessary

function getObject (Bucket, Key) {
    return new Promise(async (resolve, reject) => {
        const getObjectCommand = new GetObjectCommand({ Bucket, Key })

        try {
            const response = await client.send(getObjectCommand)

            // Store all of data chunks returned from the response data stream
            // into an array then use Array#join() to use the returned contents as a String
            let responseDataChunks = []

            // Handle an error while streaming the response body
            response.Body.once('error', err => reject(err))

            // Attach a 'data' listener to add the chunks of data to our array
            // Each chunk is a Buffer instance
            response.Body.on('data', chunk => responseDataChunks.push(chunk))

            // Once the stream has no more data, join the chunks into a string and return the string
            response.Body.once('end', () => resolve(responseDataChunks.join('')))
        } catch (err) {
            // Handle the error or throw
            return reject(err)
        }
    })
}

export default async (req, res) => {
    const records = await getObject('bucket', 'file.json')
    res.statusCode = 200;
    res.json(records)
};

and below is how I am fetching the data:

fetch('/api/getRecords').then(res => res.json()).then(data => {console.log(data)})

inspecting the console I get the following errors:

GET https://www.example.com/api/getRecords 500

and

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

What's weird is that this only happens in my production environment. When I go to my api route in my development environment it works perfectly.

I've logged the response from the api route in the production environment and it is returning html instead of the json file which it is supposed to be fetching from the S3 bucket.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width"/>
<meta charSet="utf-8"/>
<title>500: Internal Server Error</title>
<meta name="next-head-count" content="3"/>
<link rel="preload" href="/_next/static/css/0ff82fa55a0f6a71.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0ff82fa55a0f6a71.css" data-n-g=""/><noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
<script src="/_next/static/chunks/webpack-f4f9fa09c58ec7ec.js" defer=""></script><script src="/_next/static/chunks/framework-bb5c596eafb42b22.js" defer=""></script>
<script src="/_next/static/chunks/main-1d8adce4d7e8417e.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-d6205651e8a6f164.js" defer=""></script>
<script src="/_next/static/chunks/pages/_error-a3f18418a2205cb8.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_buildManifest.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_ssgManifest.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_middlewareManifest.js" defer=""></script>

</head>

<body>

<div id="__next" data-reactroot="">
    <div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
    <div>
    <style>body { margin: 0 }</style>
    <h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">500</h1>
    <div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle">
        <h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">Internal Server Error<!-- -->.</h2>
</div>
</div>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500}},"page":"/_error","query":{},"buildId":"pxh73WL611kWpBZCFSQx6","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script>

</body>
</html>

Does anyone know how to fix this?

CodePudding user response：

There was an issue with my access keys in my production environment. Essentially one of my lambdas was getting a permission denied error. After fixing that issue the problem was resolved. I could not have done it without the help of @Ermiya Eskandary

CodePudding user response：

make sure you are calling the production server not the development server