I am pretty new to Next.js and the first time implementing the accessibility-checker package.
I am using getStaticProps() to request the accessibility report. Eventually, I want to move it to a button request, but I wanted to first just test the reporting feature.
However I am getting the error mentioned in the post title. The kicker is the report is getting generated in json. I can log it in the console.
In /lib/audits.js:
import { getCompliance, assertCompliance } from 'accessibility-checker';
...
export async function accessibilityTest(url) {
getCompliance(url, "testLabel"+Date.now()).then((results) => {
const data = results.report;
console.log(data);
return data;
});
}
In [id].js:
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id);
const a11yReport = await accessibilityTest("https://www.example.com");
console.log(a11yReport);
return {
props: {
postData,
a11yReport
},
};
}
The log in the CLI shows the report:
{
results: [
{
ruleId: 'WCAG20_Html_HasLang',
value: [Array],
path: [Object],
ruleTime: 0,
reasonId: 'Fail_3',
message: "Page detected as HTML, but does not have a 'lang' attribute",
messageArgs: [],
apiArgs: [],
bounds: [Object],
snippet: '<html>',
category: 'Accessibility',
ignored: false,
level: 'violation'
},
{
ruleId: 'WCAG20_Body_FirstASkips_Native_Host_Sematics',
value: [Array],
path: [Object],
ruleTime: 0,
reasonId: 'Fail_1',
message: 'The page does not provide a way to quickly navigate to the main content (ARIA "main" landmark or a skip link)',
messageArgs: [],
apiArgs: [],
bounds: [Object],
snippet: '<body>',
category: 'Accessibility',
ignored: false,
level: 'violation'
},
{...
But on the [id].js log it outputs undefined. I am confident it’s undefined because it runs before the value returns since it’s async. I am unclear how to wire this up properly to get the report in JSON that I could output in the browser.
This throws the error mentioned:
Server Error
Error: Error serializing `.report` returned from `getStaticProps` in "/audits/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
If I change the props to:
report: a11yReport ?? null,
The error goes away, but its null when output. There is something I am not doing properly when trying to bring it back into the [id].js file. I would like to know if this is some syntax issue, or am I not tackling this in the right way.