Unable to render useState, useEffect hooks in library

[Devsnapper]

Hi I am trying to create a sample library using react 18.2.0 and Although library built successfully but when it is consumed in the app im getting the below error in console log

below is my library code

App.js

import './App.css';
import Dropdown from "./components/Dropdown";

function App() {

  let dropdown_data = ['Item 1', 'Item 2', 'Item 3'];

    return (
      <div className="dropdown">
         <Dropdown jsonData={dropdown_data} />
      </div>
  )
}

export default App;

Created components folder under that created Dropdown.js

import React from "react";
import {useEffect, useState} from 'react';

export const Dropdown = (props) => {
    const [dropdown, setDropdown] = useState([]);
    useEffect(() => {
        loadData();
    }, []);
    const loadData = () => {
        setDropdown(props.jsonData);
    }
    return (
        <div className="dropdown">
            <select> {
                dropdown.map((item, index) => (
                    <option key={index}>
                        {item}</option>
                ))
            } </select>
        </div>
    )

}

in the src folder created the lib.package.js export { Dropdown } from "./components/Dropdown.js";

below is my package.json

{
  "name": "libtestone",
  "version": "0.1.0",
  "private": true,
  "main": "./dist/lib.umd.js",
    "module": "./dist/lib.module.js",
    "source": "src/lib.package.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:lib": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "microbundle": "^0.15.0"
  }
}

Below is my client app where i am consuming the package

App.js

import './App.css';
import {Dropdown} from "libtestone";

function App() {
  return (
    <div>
      <Dropdown />
    </div>
  );
}

export default App;

@developit @rschristian

[rschristian]

Please provide a repo that I can just clone containing both the lib and your app. I spent some time trying to piece this together but I could not reproduce the issue.

Something that stands out is the mixing of JSX transforms; there's no good reason to do this and I imagine it could lead to issues. Choose one or other for your lib, not both.

You're also mixing and matching default & named exports. Not sure if this was just a byproduct of pasting into this issue, but it certainly doesn't work if someone copy/pasted your code directly.

[Devsnapper]

Please provide a repo that I can just clone containing both the lib and your app. I spent some time trying to piece this together but I could not reproduce the issue.

Something that stands out is the mixing of JSX transforms; there's no good reason to do this and I imagine it could lead to issues. Choose one or other for your lib, not both.

You're also mixing and matching default & named exports. Not sure if this was just a byproduct of pasting into this issue, but it certainly doesn't work if someone copy/pasted your code directly.

@rschristian please find the url and in the zip there are 2 folder 1.consume which is a client app and 2. lib application

[rschristian]

1) Don't mix and match JSX transforms. Pick either the classic or runtime. This means removing --jsxImportSource or the pragma / pragma frag options.

2) If you're embedding into a React app, you don't want --external none. This bundles React in with your component, essentially duplicating React within your app. Only use that if you're embedding into a page where React is no available.

There's nothing wrong with Microbundle here, so I'm going to close this out.

[rschristian]

Created an example repo for you here: https://github.com/rschristian/dev-phani-react-lib-example

Also, use something like yalc when testing libs locally. It's a lot more robust, and linking locally (as you have) is incredibly error prone in just about every package manager. Most of the time doing that will break your lib, causing duplicate bundles and the like.

[Devsnapper]

@rschristian i checked ur repo and even when i tried that also im getting same issues and is there any pre requirements are there and in the lib.package.js u wrote the dropdown logic and instead in the component and it will be great if the you can make modification to the same repo which i posted . Bcoz in the repo it is having only index.js

[rschristian]

I cut everything down to the minimum reproduction, as you should've done to begin with. Please don't throw more files and content than are needed at maintainers, that's part of the debugging process that should be done upfront. It certainly doesn't make a difference to microbundle.

And as I said, I suggest using yalc. You can find the instructions for the tool in the link I posted above. I believe I accidentally committed the yalc file path in the app's package.json -- that can just be stripped out.

Regardless, your issue is with testing local modules, not with microbundle. The output from microbundle is correct & working.

Hope that helps.