Heroku package.json issue - reactjs

Package.json :
{
"private": true,
"scripts": {
...
},
"devDependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"gh-pages": "^2.0.1",
"react-icons": "^3.2.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^4.0.2"
},
"dependencies": {
"react-router-dom": "^4.3.1"
}
}
After deploying laravel app (with react) im having error:
Uncaught Error: Cannot find module "react-redux"
Im having blank site with above error in console.

Heroku installs only production dependencies on deployment by default, so the ones that are listed under dependencies key of you package.json by running npm install --production.
Move dependencies that are crucial to your app running from devDependencies to dependencies and that should solve your problem.
devDependencies are meant for things that support you in development, but are not required for the production copy of your app to run, like testing modules, for example.

Related

An unexpected error occurred: package.json Unexpected token

I create a website with ReactJs. and Its worked correctly. but now when I run the project yarn dev or npm run dev I got this error
yarn run v1.22.17
error An unexpected error occurred: "C:\\Users\\my location\\package.json: Unexpected token < in JSON at position 2".
info If you think this is a bug, please open a bug report with the information provided in "C:\\Users\\my location \\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
and this is my package.json
{
"name": "test",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"#headlessui/react": "^1.6.6",
"#react-pdf-viewer/default-layout": "^3.6.0",
"#react-pdf-viewer/thumbnail": "^3.6.0",
"#reduxjs/toolkit": "^1.8.5",
"axios": "^0.27.2",
"jsonwebtoken": "^8.5.1",
"react": "^18.2.0",
"react-addons-update": "^15.6.3",
"react-cookie": "^4.1.1",
"react-cookies": "^0.1.1",
"react-dom": "^18.2.0",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^4.4.0",
"react-media-recorder": "^1.6.6",
"react-multi-date-picker": "^3.3.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-select": "^5.4.0",
"react-spinners": "^0.13.3",
"react-transition-group": "^4.4.5",
"redux-persist": "^6.0.0",
"validator": "^13.7.0"
},
"devDependencies": {
"#types/jsonwebtoken": "^8.5.8",
"#types/react": "^18.0.0",
"#types/react-addons-update": "^0.14.21",
"#types/react-dom": "^18.0.0",
"#types/react-google-recaptcha": "^2.1.5",
"#types/validator": "^13.7.4",
"#vitejs/plugin-react": "^1.3.0",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"typescript": "^4.6.3",
"vite": "^2.9.9"
}
}
I also use eslint and add my package.json content to this site and I got this error
on colon after "name":"test"
2:9
Parsing error: Unexpected token
:
and also remove node_module and reinstall the package with npm install. but the error still occurs.

Can't resolve '#material-ui/core/TableContainer

I want to import table container for my react application. but I can't use it because of my material ui version error.
How i update my version to latest version. I suppose that it's the solution for that error.
I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"#lls/react-light-calendar": "^2.0.7",
"#material-ui/core": "^3.9.4",
"#material-ui/icons": "3.0.2",
"#progress/kendo-react-dropdowns": "^3.4.1",
"#progress/kendo-react-intl": "^3.4.1",
"animate.css": "^3.7.2",
"axios": "^0.19.1",
"bootstrap": "^4.3.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"firebase": "^7.0.0",
"history": "4.7.2",
"jquery": "^1.9.1",
"material-ui-next-responsive-table": "^0.5.1",
"multi-select-react": "^0.1.8",
"multiselect-dropdown-react": "^1.0.5",
"multiselect-react-dropdown": "^1.2.4",
"perfect-scrollbar": "1.4.0",
"prettier": "1.16.4",
"prop-types": "15.7.1",
"react": "^16.8.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-dialog": "^0.13.0",
"react-bootstrap-modal": "^4.2.0",
"react-chartist": "0.13.3",
"react-confirm-alert": "^2.4.1",
"react-datepicker": "^2.9.6",
"react-devtools": "^4.4.0",
"react-dialog": "^1.0.2",
"react-dom": "16.8.1",
"react-dropdown": "^1.6.4",
"react-dropdown-multiselect": "^1.0.0",
"react-dropdown-tree-select": "^2.1.1",
"react-google-maps": "9.4.5",
"react-light-calendar": "^1.0.3",
"react-multiple-select-dropdown": "^2.0.0",
"react-multiselect-checkboxes": "^0.1.1",
"react-notification-alert": "0.0.12",
"react-notifications": "^1.4.3",
"react-notifications-component": "^2.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.1",
"react-table-container": "^2.0.3",
"react-toastify": "^5.4.0",
#material-ui/core version ^3.9.4 doesn't have <TableContainer>
so you need to update #materia-ui/core version
latest version v4.9.2, so please update version and try
1) Go to package.json file in your project root.
2) Locate #material-ui/core in dependencies. Currently, you will see it as "#material-ui/core": "^3.9.4".
3) Now edit the version number. For example, "#material-ui/core": "^4.9.2".
4) Run npm install.
That's it!
You can follow this procedure for any dependency when you want to change the version. But make sure that those versions are compatible with each other dependencies (if any).
Good luck!

Tried To register two Views with the same name RTCVideoView in React Native

I am trying to run my app on Android but I am getting this error I don't know why I am getting this, I don't know what is causing this error in my project
I have tried tried many ways to resolve this issue but Still wasn't able to resolve this issue.
Tried To register two Views with the same name RTCVideoView
My Package.json is
{
"name": "Hello World",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.6.2",
"#react-native-community/slider": "^2.0.0",
"axios": "^0.19.0",
"connectycube-reactnative": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-autogrow-textinput": "^5.2.0",
"react-native-cache-store": "^1.0.2",
"react-native-calendars": "^1.212.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-image-picker": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-navigation": "^3.0.0",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "^0.0.4",
"react-native-webrtc": "^1.75.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-prompt": "^1.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Any Help Would be Appreciated.
All you need is just clean up the cache by the following command
npm cache clean --force
This will resolve your problem most probably
The version of react-native-webrtc you have specified in your package.json is different from the version that connectycube-reactnative depends on. The latest connectycube-reactnative (1.8.0) depends on "react-native-webrtc": "1.69.1".
Double check the dependency of the version you have installed by looking at the node_modules/connectycube-reactnative/package.json and match the version specified in your package.json to the version the connectycube-reactnative requires.
The #arzundo answer is correct
And seems this issue is addressed in latest releases here https://github.com/ConnectyCube/connectycube-reactnative-samples/tree/master/RNVideoChat so you can simply try to pull the latest master

swagger-codegen react client - experimental syntax 'classProperties' error

I'm trying to generate as swagger es6 client for my react application but I'm running into the following babel error:
SyntaxError: /path/to/petstore/src/ApiClient.js: Support for the experimental syntax 'classProperties' isn't currently enabled (231:33):
The steps I've taken to reach this point:
install swagger-codegen#2 using homebrew
generate swagger client using swagger-codegen generate -i http://petstore.swagger.io/v2/swagger.json -l javascript -o ./petstore --additional-properties usePromises=true,useES6=true
added toimport { PetApi } from '../../../../petstore/src';
My application'ss package.json contains the following:
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"ajv": "^6.10.2",
"babel": "^6.23.0",
"fuzzysort": "^1.1.4",
"immutability-helper": "^3.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moment-timezone": "^0.5.25",
"normalizr": "^3.4.0",
"prop-types-defined": "^15.6.0",
"react": "^16.8.6",
"react-redux": "^7.1.0",
"react-scripts": "3.0.1",
"redux": "^4.0.1",
"redux-mock-store": "^1.5.3",
"redux-persist": "^5.10.0",
"redux-testkit": "^1.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"superagent": "^5.1.0"
},
"devDependencies": {}
My application's babel.config.js:
module.exports = {
presets: [
'module:metro-react-native-babel-preset'
],
plugins: [
[
'#babel/plugin-proposal-class-properties',
{
'loose': true
}
]
]
};
I have also tried wiping my node_modules and reinstalling them with yarn
I have tried going through all the swagger generated files and changing class properties to functions, which leads me to another error:
TypeError: _petstore_src__WEBPACK_IMPORTED_MODULE_5__.PetApi.getPetByIdWithHttpInfo is not a function
when I attempt to run PetApi.getPetByIdWithHttpInfo(1)
Let me know if any extra information is required.
Thanks

npm install from github: Module not found: Can't resolve 'react-big-calendar'

I had to make some changes on react-big-calendar module so I forked the project on github, made modifications and pushed. Then I used this command to install the new package:
npm install https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master --save
The package figures out in the dependencies on package.json:
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-svg-core": "^1.2.10",
"#fortawesome/free-solid-svg-icons": "^5.6.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.6.2",
"#material-ui/icons": "^2.0.3",
"#types/googlemaps": "3.30.11",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"chartist": "^0.11.0",
"classnames": "2.2.6",
"emotion": "^10.0.5",
"enhanced-resolve": "^3.4.1",
"globalize": "^1.4.0",
"history": "^4.7.2",
"iban": "0.0.11",
"jwt-decode": "^2.2.0",
"moment": "2.22.2",
"perfect-scrollbar": "1.4.0",
"react": "^16.6.3",
"react-big-calendar": "https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartist": "^0.13.1",
"react-datetime": "^2.16.3",
"react-dom": "^16.6.3",
"react-facebook-pixel": "^0.1.2",
"react-ga": "^2.5.6",
"react-google-maps": "^9.4.5",
"react-jvectormap": "0.0.3",
"react-nouislider": "2.0.1",
"react-redux": "^5.1.1",
"react-router": "4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-spinners": "^0.4.7",
"react-swipeable-views": "0.12.15",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"react-transition-group": "^1.2.1",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-api-middleware": "^2.3.0",
"redux-persist": "^5.10.0",
"redux-persist-transform-filter": "0.0.18",
"redux-thunk": "^2.3.0",
"universal-cookie": "^3.0.7"}
I removed the node_modules folder, ran npm install but when running npm start I got this error:
./src/containers/apartments/calendar.js
Module not found: Can't resolve 'react-big-calendar' in
'/Users/wafayahyaoui/homereact/src/containers/apartments'
The imports on calendar.js file looks like this:
import React from "react";
import BigCalendar from "react-big-calendar";
What can be the source if the import error ? thank you
I was facing same issue. It took 3-4 hours to figure out what is problem. Here is a solution.
Run Command - npm run build - which build dist and lib folder.
remove dist and lib from .gitignore file.
Push your code.
If you see package-lock.json carefully, there is a line "main": "lib/index.js" which point to lib folder. But when you forked react-big-calendar repo, there was no lib folder in this repo, there was only src folder.
So it was cleared that fisrt you have to build code and push it on your repo.
I had a similar problem, so maybe it would be helpful to someone. main property from package.json was pointing to the built file which wasn't accessible, so I added a prepare script to run build before publishing the package.
"main": "dist/index.js",
"scripts": {
"prepare": "npm run build"
}
Use command :
npm i react-big-calendar

Resources