Can not use my own local React library: module.js does not export 'Hello'

32 views Asked by At

I have a local typescript project with a simple React component, Hello:

import * as React from "react";
import { useState } from "react";

const Hello = () => {
  const [x11, setX11] = useState(0);
  return <div onClick={() => setX11(x11 + 1)}>hello4412!{x11}</div>;
};

export default Hello;

In my package.json, I use parceljs to build it into dist folder:

"main": "dist/main.js",
    "module": "dist/module.js",
    "types": "dist/types.d.ts",
    "scripts": {
        "build": "parcel build"
    },

When I build my project, I get main.js, module.js and an empty types.d.ts file in dist folder. I install this module via yarn: yarn add ../../xbase/web/.

But when I use it like below, I get @parcel/core: node_modules/xbase/dist/module.js does not export 'Hello'

import { Hello } from "xbase/dist/module";

export const Dashboard = () => {
    return <Hello />;
};

Any idea why my exports are not there?

P.S: I also have "source": "src/index.ts", in my component's project.

And index.ts is:

export * from "./Hello";

P.S. 2: My package.json for the main app (removed some irrelevant deps):

{
    "source": [
        "src/html/index.html"
    ],
    "scripts": {
        "start": "parcel serve src/html/*.html",
        "build": "parcel build --no-cache --no-source-maps",
    },
    "devDependencies": {
        "parcel": "2.11.0",
        "typescript": "^5.3.3"
    },
    "dependencies": {
        "@headlessui/react": "^1.7.4",
        "@heroicons/react": "^2.0.13",
        "@types/node": "^17.0.18",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-router-dom": "^6.2.2",
        "xbase": "/Users/mahdi/dev/xbase/web"
    }
}
0

There are 0 answers