I need to dereference (swap out JSON References) when importing JSON or YAML files directly into Gatsby pages. Gatsby is pretty good at importing JSON files directly (probably due to some underlying webpack loader), but it doesn't seem to handle JSON refs, a lá "$ref": "../something.json
.
For example:
parent.json
{
"someRef" {
"$ref": "./child.json"
}
}
child.json
{
"foo": "bar"
}
index.js
import {SomeJson} from './parent.json'
console.log(SomeJson)
// Expected output: {someRef: {foo: bar}}
// Actual output: {someRef: {$ref: './child.json'}}
I figured that perhaps the default JSON loader being used by Gatsby doesn't allow for JSON References. Fine. But couldn't the webpack configuration be extended to try and add this functionality? Here's my attempt:
gatsby-node.js
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.json$/,
use: [
{
loader: '@cloudflare/json-schema-ref-loader'
}
]
}
]
},
})
}
The @cloudflare/json-schema-ref-loader library is a webpack loader designed to follow refs. so I figured this could be used.
When running gatsby develop
, the build fails with:
Unexpected token m in JSON at position 0 while parsing near 'module.exports = {
...'
error Generating development SSR bundle failed
Any help would be greatly appreciated.