so no where in my react code do I use the useContext property. I have a npm package which has a compiled webpack file that has a component in there. when i try to use the component in my react app it throw the error Uncaught TypeError: Cannot read properties of null (reading 'useContext'). the component function is there and outputs a react object. it just breaks the page when using it. now I looked into what useContext is and I believe it has something to do with state.
so below is my input component that I will be using in my react App
import React from 'react';
import {TextField} from '@mui/material';
class Input extends React.Component {
constructor(props){
super(props)
}
render(){
return (
<div className="input" style={{position:"relative",left:this.props.tabOver? this.props.tabOver.toString()+"px":"0px"}}>
<label style={{display:"block", width:"100%",position:"relative", margin: "5px"}}> {this.props.labelName}</label>
<TextField
size="small"
onChange={(e)=>{this.props.update(e.target.value)}}
value={this.props.value}
label={this.props.label? this.props.label:"type here"}
error={this.props.error? this.props.error:false}
required={this.props.required? this.props.required:false}
disabled={this.props.disabled? this.props.disabled:false}
helperText={this.props.helperText? this.props.helperText:""}
InputProps={{ style: { fontSize: this.props.InputProps? this.props.InputProp:10 } }}
InputLabelProps={{ style: { fontSize: (this.props.InputLabelProps? this.props.InputLabelProps:12) } }}
style={{background:'white', "borderLeft":"20px solid "+this.props.border,"borderRadius": "10px",width: this.props.width !== undefined ? this.props.width.toString()+"px":"100px"}}
id="filled-basic"
variant="filled" />
</div>
);
}
}
export default Input;
and here is my react Application that uses Input
// import logo from './logo.svg';
import './App.scss';
import React from 'react';
import {Breadcrumbs,Link,Typography} from '@mui/material';
import {Input} from '@zenaby/something';
class App extends React.Component {
constructor(props){
super(props)
}
render(){
return (
<div className="App">
<ul className="header">
<li> logo </li>
<li> login </li>
</ul>
<div className="formCt">
<Input />
</div>
</div>
);
}
}
export default App;
I compiled this input with this webpack file
const path = require('path');
module.exports = {
entry: "./compile/index.js",
mode:"production",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "index.js",
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react",
"@babel/preset-env"],
plugins: ["@babel/plugin-proposal-class-properties"]
}
}
}
]
},
target: 'node'
};
also my package json is here
{
"name": "somename",
"version": "0.1.0",
"private": false,
"babel": {
"presets": [
"@babel/preset-react"
]
},
"main":"dist/header.js",
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"pp": "babel .components -d ./dist --ignore 'node_modules'",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"author": "grant",
"license": "ISC",
"peerDependencies": {
"react": "^18.1.0"
},
"devDependencies": {
"@babel/cli": "^7.17.10",
"@babel/plugin-syntax-jsx": "^7.17.12",
"@babel/preset-react": "^7.17.12"
}
}
I wish this was an easy answer but being on this issue for hours I don't have any juice left in me to figure it out. in fact this answer could be helpful to alot of people who are new making components for npmjs. anyways thank you for looking at it any feedback is great :).
