1

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.

Carlos Jimenez Bermudez
  • 1,070
  • 1
  • 14
  • 36
  • 2
    I've cloned your project, your *package-lock* was created with an old version of NPM. I deleted then I ran `npm i` to create a new fresh one. and I hadn't any errors. So follow these steps, and confirm if it will be fixed or not. – Mostafa Fakhraei Feb 01 '23 at 17:42
  • 1
    It took me a while to figure it out, but the problem was the format that Typescript was outputting, by switching the output code from commonjs to ES2016 the problems went away. It seems Vite projects don't support commonjs as a TS output type even if the types themselves show no errors. – Carlos Jimenez Bermudez Feb 17 '23 at 21:58

0 Answers0