I am writing my first NPM package as a plugin for Vite. I had all the code in my plugin before in a separate file inside the same code base, but now I have split and separated it into a it's own nuget package.
When I use the package in my sample projects and I run npm run dev
I get this error which I didn't get before:
failed to load config from C:\Users\cjime\Desktop\Open Source Projects\Vite.NET\dotnet-vite\ClientApp\vite.config.ts
error when starting dev server:
file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/vite.config.ts.timestamp-1674663682047.mjs:4
import ViteDotNet from "file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js";
^^^^^^^^^^
SyntaxError: The requested module 'file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js' does not provide an export named 'default'
Which is strange because there is a default export. The following is the only code file used/exposed in the plugin, it's not a large codebase
import type { UserConfig } from 'vite';
import { basename, posix } from 'path';
export type PluginConfig = {
port: number;
appFolder: string;
entrypoint: string;
prodServerOrigin?: string; //Not for initial release. Use when hosting app files in a remote server such as S3 or Azure Blob.
}
function outputOptions (assetsDir: string) {
// Internal: Avoid nesting entrypoints unnecessarily.
const outputFileName = (ext: string) => ({ name }: { name: string }) => {
const shortName = basename(name).split('.')[0]
return posix.join(assetsDir, `${shortName}.[hash].${ext}`)
}
return {
entryFileNames: outputFileName('js'),
chunkFileNames: outputFileName('js'),
assetFileNames: outputFileName('[ext]'),
}
}
export default function ViteDotNetPlugin(entrypoint: string, port: number = 5173, appFolder: string = "ClientApp") {
return ViteDotNet({ port, appFolder: appFolder, entrypoint: entrypoint });
}
function ViteDotNet(config: PluginConfig) {
return {
name: 'ViteDotNet',
enforce: "post" as const,
config: (userConfig: UserConfig/*, { command, mode }*/) => {
//https://vitejs.dev/config/server-options.html#server-origin
return {
server: {
origin: `http://localhost:${config.port}`,
hmr: {
protocol: 'ws'
}
},
build: {
outDir: `../wwwroot`,
emptyOutDir: false,
manifest: `${config.appFolder}/manifest.json`,
rollupOptions: {
// overwrite default .html entry
input: config.entrypoint,
output: outputOptions(config.appFolder)
}
}
}
}
};
};
Now, I realize this might be because of an error on my part when configuring the package.json file. Here it is:
{
"name": "vite-dotnet",
"version": "0.2.8",
"description": "Integration plugin for ASP.NET Core and ViteJS",
"main": "lib/index.js",
"keywords": [
"vite",
"vite-integration",
"react",
"svelte",
"vue",
"solidjs",
"lit"
],
"repository": {
"type": "git",
"url": "git+https://github.com/techgems/Vite.NET"
},
"type": "module",
"files": ["lib/**/*"],
"types": "lib/index.d.ts",
"author": "TechGems",
"license": "MIT",
"scripts": {
"build": "tsc"
},
"devDependencies": {
"@types/node": "^18.11.18",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"vite": "^3.2.3"
}
}
Here is also a link to the entire codebase of the plugin:
https://github.com/techgems/Vite.NET/tree/master/ViteDotNet/Plugin
as well as the NPM package: https://www.npmjs.com/package/vite-dotnet
Thanks in advance and please let me know if you need more information.