Reputation: 12729
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
Upvotes: 0
Views: 266
Reputation: 249
You can try by removing the .next folder and running the server again.
Upvotes: 2