Error :: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

I am trying to bundle my custom component using microbundle

Reference : https://github.com/developit/microbundle My component package.json is this.

{
  "name": "components",
  "version": "0.0.0",
  "description": "react.js component library",
  "homepage": "",
  "license": "ISC",
  "main": "dist/index.js",
  "source": "lib/index.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "scripts": {
    "dev": "microbundle --external=\"react,react-dom\" --globals=\"React,ReactDOM\" watch --jsx React.createElement lib/*.js"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "prop-types": "^15.7.2",
    "react-debounce-input": "^3.2.3"
  },
  "devDependencies": {
    "microbundle": "^0.13.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

when I Have component this

import React from 'react';
const Index = () => {
    return (
        <div>
            <button onClick={()=>{
                alert('==')
            }}>{'state'}</button>
        </div>
    );
};

export default Index;

it works perfectly .I am using this component in NEXTJS or (server side react framework).

but when I use HOOKS it show me below error

import React from 'react';
const Index = () => {
     const [state,setState] = React.useState(0)
    return (
        <div>
            <button onClick={()=>{
                alert('==')
            }}>{'state'}</button>
        </div>
    );
};

export default Index;

error

my bundle.js

function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("react"));exports.Header=function(){return t.default.useState(0),t.default.createElement("div",null,t.default.createElement("button",{onClick:function(){alert("==")}},"state"))};
//# sourceMappingURL=index.js.map

Answer 1

You can try by removing the .next folder and running the server again.