React Material UI Button component not working - javascript

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.
After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.
The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.
Here is the simple Button:
App.js
import {Button} from '#material-ui/core';
export default function App() {
return (
<div className="App">
<Button>Click Me</Button>
</div>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.html
<div id='root'></div>
And here is the package.json file (dependencies only shown here to reduce code length):
{
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}

Solved: There was an issue with the dependencies, I learnt that even if you install an npm package you must still go to the terminal in the source code editor and install the dependency into the package.json file. Here is the fixed file that allows the button to be displayed in the browser:
package.json:
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
The line "#material-ui/core": "^4.12.3", has been added so that the package can use the dependency.

try by adding the packages you want manually and then run npm install on the terminal

Related

Ion React Router does not route pages

I have recently been playing around with capacitor to build a cross platform app with React. The differences between normal JSX elements and Ionic elements seems pretty easy, but I am having an issue with Ion React Router to create page routing in my app.
My understanding is that ion react router is built on top of react router dom and that it functions pretty similarly. However, when defining my routes within ion react router, the routes are not rendering my components, and the console is showing an odd HTML error. Following is my code and the error:
const Settings = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>Settings Page and Content</IonContent>
</IonPage>
);
function App() {
return (
<div>
<div>Hello World</div>
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/settings" component={Settings} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
</div>
);
}
The error is happening immediately when opening localhost:3000 without ever navigating to the route. I would expect the Settings component to render if I were to navigate to localhost:3000/settings. However, nothing happens and I am just left with the HTML 'failed to construct' error.
Does anyone have any suggestions about what I may be doing wrong here? I have also attached my package.json to show my dependancies, incase that is helpful. Thanks if advance for any ideas!!
"dependencies": {
"#capacitor/android": "^4.4.0",
"#capacitor/core": "^4.4.0",
"#capacitor/ios": "^4.4.0",
"#ionic/react": "^6.3.4",
"#ionic/react-router": "^6.3.4",
"#supabase/supabase-js": "^2.0.5",
"#tanstack/react-query": "^4.14.3",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"import": "^0.0.6",
"ionicons": "^6.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},

Picker has been removed from React Native. It can now be installed and imported from '#react-native-picker/picker'

PLEASE HELP!!I have search the entire project which DOES NOT use Pricker at all but when I run npx react-native run-android it throws out :
ERROR Invariant Violation: Picker has been removed from React Native.
It can now be installed and imported from
'#react-native-picker/picker' instead of 'react-native'. See
https://github.com/react-native-picker/picker ERROR Invariant
Violation: Module AppRegistry is not a registered callable module
(calling runApplication). A frequent cause of the error is that the
application entry file path is incorrect. This can also happen when
the JS bundle is corrupt or there is an early initialization error
when loading React Native.
Same problem faced by this guy at the below link...No answer available... Please help...Thank you in advance
Invariant Violation: Picker has been removed from React Native
I have #react-native-picker/picker installed
This is my package.json
"name": "MYAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.android.js --bundle-output iOS/main.jsbundle --platform 'android' --assets-dest ./ --dev false --reset-cache",
"test": "jest",
"test:watch": "npm run test -- --watch",
"postinstall": "npx jetify",
"extractLangs": "react-gettext-parser --output messages.pot 'src/**/*.js'"
},
"dependencies": {
"#react-native-community/cli": "^6.3.1",
"#react-native-community/masked-view": "0.1.11",
"#react-native-picker/picker": "^2.2.1",
"axios": "0.24.0",
"base-64": "1.0.0",
"date-fns": "2.27.0",
"gettext.js": "git+https://github.com/freiserg/gettext.js.git",
"lodash": "4.17.21",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-device-info": "8.4.8",
"react-native-eject": "0.1.2",
"react-native-extended-stylesheet": "0.12.0",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^2.1.0",
"react-native-keyboard-aware-scroll-view": "0.9.5",
"react-native-navigation": "7.24.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-splash-screen": "3.3.0",
"react-native-swipeout": "2.3.6",
"react-native-swiper": "1.6.0",
"react-native-vector-icons": "9.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "7.2.6",
"redux": "4.1.2",
"redux-logger": "3.0.6",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"shitty-qs": "1.0.1",
"tcomb-form-native": "0.6.20"
},
"devDependencies": {
"babel-eslint": "10.0.1",
"babel-jest": "27.4.5",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"eslint": "8.4.1",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.1",
"jest": "27.4.5",
"jetifier": "2.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"nock": "13.2.1",
"react-gettext-parser": "1.16.0",
"react-native-mock": "0.3.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "1.5.4"
},
"jest": {
"preset": "react-native",
"verbose": true,
"setupFiles": [
"<rootDir>/__tests__/mocks/global.js"
],
"testMatch": [
"**/__tests__/**/*.spec.js?(x)"
Install #react-native-picker/picker
Upgrade "native-base": "2.15.2"
Officially picker has been removed from react-native. You can use the community edition. #react-native-community/picker
Delete node modules folder then run yarn install at the terminal in your projects directory.
Then try to run the app again.
I am not sure this will help but since it says This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. it might be worth trying.
In my case, tcomb-form-native caused this error because it has not been updated for years. I hope this PR will be merged soon.
https://github.com/gcanti/tcomb-form-native/pull/605
1.Install patch-package into your project,
Install #react-native-picker/picker into your project,
go to node_modules\react-native\index.js
replace all
invariant(
false,
'DatePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '#react-native-
community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-
datetimepicker/datetimepicker',
);
or
invariant(
false,
........ DatePicker ..........
);
to
return require('#react-native-picker/picker')
run npx patch-package react-native
rebuild your app and it will be work

Error: Can't resolve 'bootstrap.min.css' in React JS

./src/style.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/style.css) Error: Can't resolve 'bootstrap.min.css' in 'C:\react\adama\src'
I keep getting this error in my React project.
package.json
"name": "adama",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
App.js
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css'
import './style.css'
import './responsive.css'
I have a bootstrap folder in my node_modules directory. I've tried various suggested fixes and nothing works. Please help.
In relation to your App.js Wouldnt it be:
import $ from 'jquery';
import './node_modules/bootstrap/dist/css/bootstrap.min.css'
import './style.css'
import './responsive.css'

ES6 - Import modules from project root directory (babel/node/npm)

Before I continue, I have tried the following solutions:
Git: Babel plugin root import package: Plugin doesn't seem to work alongside jest
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack aliasing is another solution however we don't use webpack
A project was handed over to me recently which utilizes relative import statements that can get pretty long and obscure (e.g. import * as stuff from '../../../../../utilities/stuff'). I'd like to simplify our import statements using the project's root directory in this fashion: import * as stuff from '~/utilities/stuff.
My understanding of the packages, dependencies and configurations is still in its infancy. It looks like we use babel for transpiling, however I don't see a core babel package - only babel-jest and babel-polyfill.
Here is our package.json:
{
"name": "placeholder",
"version": "0.1.0",
"private": true,
"dependencies": {
"animejs": "^2.2.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"html-to-react": "^1.3.0",
"htmlparser2-react": "0.0.4",
"js-csp": "^1.0.1",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-aria-menubutton": "^5.0.2",
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-rte": "^0.11.0",
"react-sidebar": "^2.3.2",
"react-toasts": "^1.2.3",
"react-transition-group": "^2.2.0",
"react-virtualized": "^9.9.0",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"sweetalert": "^2.0.8",
"text-spinners": "^1.0.5",
"uuid": "^3.1.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"enzyme": "^2.9.1",
"jest-enzyme": "^3.8.2",
"materialize-css": "^0.100.2",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"node-sass-chokidar": "0.0.3",
"node-sass-magic-importer": "^5.0.0-alpha.6",
"react-docgen": "^2.18.0",
"react-scripts": "1.0.13",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.3.0",
"xhr-mock": "^1.9.1"
}
}
And .babelrc
{
"presets": ["react-app"],
"sourceMaps": true,
"retainLines": true
}
Our directory structure is as follows: <rootDir>/src where all js/jsx source files are contained within 'src'. This is the directory I'd like to configure to be the root (represented by a tilda (~)). Help would be greatly appreciated!

Browserify module not found with recursive require (post-Babel transpile)

I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --
// index.js
import { Header } from './header'
import { render } from 'react-dom'
render(<Header />, document.getElementById('root'));
I also have another file header.js which imports 'react' and creates a simple React class --
// header.js
import React from 'react'
export const Header = React.createClass({
render:() => {
return (
<div>
some header title
</div>
)
}
});
I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.
It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.
For reference, here is an excerpt from my Package.json --
{
"dependencies": {
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.1.18",
"babel-register": "~6.2.0",
"history": "^1.12.0",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "~1.0.0",
"react-tap-event-plugin": "^0.2.1"
},
"devDependencies": {
"browserify": "~11.2.0",
"del": "^2.1.0",
"express": "~4.13.3",
"express-urlrewrite": "~1.2.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "~6.1.1",
"gulp-print": "~2.0.1",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "^1.5.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}
For example, if I import React from 'react' in index.js, everything renders properly
Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.
If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).

Categories