So I am using React for an application that makes calls to GitHub RESTapi using their octokit sdk.When I run the application using npm start, the application runs perfectly. Only when I use the command npm run build, I get an error related to octokit library.
C:\Users\Vaibhav\Desktop\devops-d2r> npm run build
> devops-d2r@0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
TypeError: C:\Users\Vaibhav\Desktop\devops-d2r\node_modules\@octokit\core\dist-web\index.js: Cannot read properties of null (reading 'body')
This is my package.json file
{
"name": "devops-d2r",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-transform-block-scoping": "^7.20.9",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@octokit/core": "^5.2.0",
"@octokit/rest": "^20.1.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.8",
"dotenv": "^16.4.5",
"jszip": "^3.10.1",
"octokit": "^3.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
}
}
and when i navigate to the directory path of the error and search for the 'body' variable, I do not find any...
// pkg/dist-src/index.js
import { getUserAgent } from "universal-user-agent";
import { Collection } from "before-after-hook";
import { request } from "@octokit/request";
import { graphql, withCustomRequest } from "@octokit/graphql";
import { createTokenAuth } from "@octokit/auth-token";
// pkg/dist-src/version.js
var VERSION = "5.2.0";
// pkg/dist-src/index.js
var noop = () => {
};
var consoleWarn = console.warn.bind(console);
var consoleError = console.error.bind(console);
var userAgentTrail = `octokit-core.js/${VERSION} ${getUserAgent()}`;
var Octokit = class {
static {
this.VERSION = VERSION;
}
static defaults(defaults) {
const OctokitWithDefaults = class extends this {
constructor(...args) {
const options = args[0] || {};
if (typeof defaults === "function") {
super(defaults(options));
return;
}
super(
Object.assign(
{},
defaults,
options,
options.userAgent && defaults.userAgent ? {
userAgent: `${options.userAgent} ${defaults.userAgent}`
} : null
)
);
}
};
return OctokitWithDefaults;
}
static {
this.plugins = [];
}
/**
* Attach a plugin (or many) to your Octokit instance.
*
* @example
* const API = Octokit.plugin(plugin1, plugin2, plugin3, ...)
*/
static plugin(...newPlugins) {
const currentPlugins = this.plugins;
const NewOctokit = class extends this {
static {
this.plugins = currentPlugins.concat(
newPlugins.filter((plugin) => !currentPlugins.includes(plugin))
);
}
};
return NewOctokit;
}
constructor(options = {}) {
const hook = new Collection();
const requestDefaults = {
baseUrl: request.endpoint.DEFAULTS.baseUrl,
headers: {},
request: Object.assign({}, options.request, {
// @ts-ignore internal usage only, no need to type
hook: hook.bind(null, "request")
}),
mediaType: {
previews: [],
format: ""
}
};
requestDefaults.headers["user-agent"] = options.userAgent ? `${options.userAgent} ${userAgentTrail}` : userAgentTrail;
if (options.baseUrl) {
requestDefaults.baseUrl = options.baseUrl;
}
if (options.previews) {
requestDefaults.mediaType.previews = options.previews;
}
if (options.timeZone) {
requestDefaults.headers["time-zone"] = options.timeZone;
}
this.request = request.defaults(requestDefaults);
this.graphql = withCustomRequest(this.request).defaults(requestDefaults);
this.log = Object.assign(
{
debug: noop,
info: noop,
warn: consoleWarn,
error: consoleError
},
options.log
);
this.hook = hook;
if (!options.authStrategy) {
if (!options.auth) {
this.auth = async () => ({
type: "unauthenticated"
});
} else {
const auth = createTokenAuth(options.auth);
hook.wrap("request", auth.hook);
this.auth = auth;
}
} else {
const { authStrategy, ...otherOptions } = options;
const auth = authStrategy(
Object.assign(
{
request: this.request,
log: this.log,
// we pass the current octokit instance as well as its constructor options
// to allow for authentication strategies that return a new octokit instance
// that shares the same internal state as the current one. The original
// requirement for this was the "event-octokit" authentication strategy
// of https://github.com/probot/octokit-auth-probot.
octokit: this,
octokitOptions: otherOptions
},
options.auth
)
);
hook.wrap("request", auth.hook);
this.auth = auth;
}
const classConstructor = this.constructor;
for (let i = 0; i < classConstructor.plugins.length; ++i) {
Object.assign(this, classConstructor.plugins[i](this, options));
}
}
};
export {
Octokit
};
The build folder gets created, except for the index.html
What really is the issue and how can I resolve this?
I solved this problem by migrating to vite, instead of using create-react-app. CRA is deprecated, hence it is safer to use vite. Do let me know if there is any other reason that could be causing this error!!