I am utilizing npm along with a gulpfile.js to export npm packages to a 'lib' folder under 'wwwroot'. This process works smoothly, and whenever I update a specific npm package listed in my gulpfile.js, it automatically pushes the contents to the 'lib' folder.
An issue arose when I used to have a manually extracted copy of ocktokit-rest for querying the public API to retrieve repo data. Recently, this manual setup stopped working, presumably due to GitHub updating their API which caused compatibility issues with the old version of ocktokit-rest. To address this, I installed @ocktokit/rest version 18.0.9 via npm package.json, resulting in the creation of the following directory:
~/lib/@octokit/rest/
As per the documentation, I need to reference one of the index.js files within this directory. However, due to Razor not supporting the @ symbol in paths, I had to use the following in my _layout.cshtml:
<script src="@Url.Content("~/lib/@octokit/rest/dist-src/index.js")" type="module"></script>
To handle import statement issues in the index.js file, I added type="module". The content of the index.javascript file at the specified route is as follows:
import { Octokit as Core } from "@octokit/core";
import { requestLog } from "@octokit/plugin-request-log";
import { paginateRest } from "@octokit/plugin-paginate-rest";
import { restEndpointMethods } from "@octokit/plugin-rest-endpoint-methods";
import { VERSION } from "./version";
export const Octokit = Core.plugin(requestLog, restEndpointMethods, paginateRest).defaults({
userAgent: `octokit-rest.js/${VERSION}`,
});
However, this setup leads to an error in the chrome debugger:
Uncaught TypeError: Failed to resolve module specifier "@octokit/core". Relative references must start with either "/", "./", or "../".
Although I prefer not to change the @octokit/ reference to '../../' to avoid manual adjustments during the npm push task executed by my gulpfile.js, I modified the index.js temporarily for debugging purposes:
import { Octokit as Core } from "../../core";
import { requestLog } from "../../plugin-request-log";
import { paginateRest } from "../../plugin-paginate-rest";
import { restEndpointMethods } from "../../plugin-rest-endpoint-methods";
import { VERSION } from "./version";
export const Octokit = Core.plugin(requestLog, restEndpointMethods, paginateRest).defaults({
userAgent: `octokit-rest.js/${VERSION}`,
});
This modification led to similar error messages for each import, referencing non-specific files:
index.js:4 GET https://localhost:44364/lib/@octokit/plugin-rest-endpoint-methods net::ERR_ABORTED 404
The above URL points to the directory rather than a particular file. Interestingly, accessing a single file using the directory path directly loads the file in the browser without issues. For example:
https://localhost:44364/lib/@octokit/plugin-rest-endpoint-methods/dist-src/endpoints-to-methods.js
shows the JS file correctly. My goal is to utilize this package in custom js code that generates cards displaying repo information, like so:
var octokit = new Octokit({ userAgent: 'agentName' });
Unfortunately, the above code throws errors related to the existence of Octokit.
Hence, my question remains - what could be causing this issue? Any insights on where I should focus my research effort would be highly appreciated.
It's likely that my struggles stem more from my lack of understanding in properly importing JavaScript libraries into my asp .net core solution rather than any faults in the octokit package itself.