Parser error on line 14 end of the stream or a document separator is expected

[Aswini2606]

HI,
Below issues is persist, can you share solution for this by navigating the first page to next page of swaggerdocs,jsx using react server "http://localhost:3000/" and embedded for navigating to next page of node server "http://localhost:5000/api-docs"

This is issue occurs , here is the second page code of fetching node url in reactjs:

import { useEffect } from 'react';
// import axios from 'axios';

function SwaggerDocs() {
useEffect(() => {
const url='http://localhost:5000/api-docs'
fetch(url) // Ensure this URL is correct
.then((response) => {
console.log('Response status:', response.status); // Check the status
console.log('Response headers:', response.headers);
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
return response.json();
})
.then((data) => {
console.log(data); // Handle the Swagger documentation JSON
})
.catch((error) => {
console.error('Error fetching Swagger docs:', error);
});
}, []);

// return <div>Swagger Docs Viewer</div>;

}

export default SwaggerDocs;

swagger.json:

{
"swagger": "2.0",
"info": {
"title": "API Documentation",
"version": "1.0.0",
"description": "A simple API with basic CRUD operations"
},
"servers": [
{
"url": "http://localhost:5000"
}
],
"paths": {
"/items": {
"get": {
"summary": "Retrieving Vendor User list",
"description": "Retrieve a list of all items",
"responses": {
"200": {
"description": "Successfully retrieved list of items",
"content": {
"application/json": {
"schema": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": { "type": "integer" },
"name": { "type": "string" },
"username": { "type": "string" },
"Password": { "type": "string" }
}
}
}
}
}
}
}
},
"post": {
"summary": "Storing Additional Data",
"description": "Add a new item to the list",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"name": { "type": "string" },
"username": { "type": "string" },
"Password": { "type": "string" }
}
}
}
}
},
"responses": {
"201": {
"description": "Item successfully created"
}
}
}
},
"/items/{id}": {
"put": {
"summary": "Updating existing Data",
"description": "Modify an item's name by its ID",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"schema": {
"type": "integer"
}
}
],
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"name": { "type": "string" },
"username": { "type": "string" },
"Password": { "type": "string" }
}
}
}
}
},
"responses": {
"200": { "description": "Item successfully updated" },
"404": { "description": "Data not found" }
}
},
"delete": {
"summary": "Delete an item",
"description": "Removing Data by User-Id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"schema": {
"type": "integer"
}
}
],
"responses": {
"204": { "description": "Item successfully deleted" },
"404": { "description": "Data not found" }
}
}
}
}
}

---

node (server.js)
const express = require('express');
// const path = require('path');
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json'); // Import Swagger JSON
const cors = require('cors');
// const swaggerDocs = swaggerJsDoc(swaggerOptions);
const app = express();
app.use(express.json());
const PORT = 5000;

app.use(cors());
// Serve Swagger documentation
const options = {
customCss: .swagger-ui .topbar { display: none; } /* Hide Swagger logo */ .swagger-ui .version-stamp { display: none; } /* Hide OAS badge */ .swagger-ui .topbar .topbar-wrapper { display: none; } .swagger-ui .info .title .version { display: none; } .swagger-ui .swagger-ui .info .title small { background: none; } .swagger-ui .info .title .badge { display: none; }
};
// app.use('/api-docs', serve, setup(swaggerDocument));
app.use('/api-docs',swaggerUi.serve, swaggerUi.setup(swaggerDocument,options));
// app.use('/api-docs',(req,res)=>{
// res.send("Hello world");
// });
let items = [{ id: 1, name: 'john' }];
// Serve the React frontend
// app.use(express.static(path.join(__dirname, '../frontend/public')));
app.get('/', (req, res) => {
res.send('

Swagger Docs Viewer

');
});
app.get('/items', (req, res) => {
res.json(items);
});

app.post('/create-items', (req, res) => {
const newItem = { id: items.length + 1, name: req.body.name, username:req.body.username,Password: req.body.Password };
items.push(newItem);
res.status(201).json(newItem);
});

app.put('/items/:id', (req, res) => {
const item = items.find((i) => i.id === parseInt(req.params.id));
if (!item) return res.status(404).send('Item not found');
item.name = req.body.name;
item.username=req.body.username;
item.Password=req.body.Password;
res.json(item);
});

app.delete('/items/:id', (req, res) => {
const itemIndex = items.findIndex((i) => i.id === parseInt(req.params.id));
if (itemIndex === -1) return res.status(404).send('Item not found');
items.splice(itemIndex, 1);
res.status(204).send();
});
app.listen(PORT, () => {
console.log(Server running on http://localhost:${PORT});
});