javascriptreactjstypescriptvite

React Library Project: Unable to import a file (has no default export)

I am creating my first react library. I am using vite to build the project. I was writing a sample demo file (in the same root folder) to illustrate how it works when I noticed that when I import the main file to consume it I get the following error,

Module '"/Users/<user>/workspaces/<project-name>/src/mainFile.tsx"' has no default export

But I am using the default export. Here is the code for the mainFile.tsx,

/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";

const TestFunction = ({ path }: { path: string }) => {
  console.log(`path`, path);
  return <div>{path}</div>;
};

export default TestFunction;

Here is the code for the sample demo file.tsx,

import React from "react";
import ReactDOM from "react-dom";
import TestFunction from "./mainFile";

const App = () => (
  <div>
    <h1>Testing My Library</h1>
    <TestFunction path="./sample.json" />
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

To buid the project I am using,

"build": "tsc && vite build"

and project type is set as module,

"type": "module",

Can someone please point me in the right direction? thanks

Solution

  • Change the following line:

    import TestFunction from "./mainFile"

    to this:

    import TestFunction from "./mainFile.tsx"