"The requested module does not provide an export named 'default'", but export is provided - Self build NPM package

2.7k Views Asked by At

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.

0

There are 0 best solutions below