Categories
Mastering Development

React hooks widget works when used directly but not when imported from NPM

I have a moderately simple example of a React Hooks widget whose function it is to provide context hooks to provide state that can set a few strings and switch the current Material UI theme. Here is the working demo. By clicking on the button labeled “NEXT THEME” you can see the page toggle between […]

Categories
Mastering Development

How to make npm start work on a cloned React repository?

I have created a new github repository with files from a working project I downloaded from another github repository of mine. I have run npm install. When I try npm start, I get the following error: npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! […]

Categories
Mastering Development

Error rendering react-redux functional component when data is deleted from firestore (useFirestoreConnect)

My ArticleList component is successfully getting & displaying the user’s list of articles from firestore when I first load the app. The user can click a “Remove Article” button, which successfully removes the article from the subcollection in firestore, but it causes an error in the rendering of the react component, which seems to still […]

Categories
Development

React and hooks – Getting TypeError: Object(…) is not a function

I’m using Mapbox to try to render various coordinates from a local JSON file. However, I’m receiving the error TypeError: Object(…) is not a function. I’ve looked up some info on what could be causing it (e.g. earlier versions of react won’t work with hooks), but since it’s pretty vague I don’t know how to […]

Categories
Development

I cannot configure my package.js file for ReactJS

This is the error: Insufficient number of arguments or no entry found. Alternatively, run ‘webpack(-cli) –help’ for usage info. And this is the code in my package.json file: { “name”: “reactredux”, “version”: “1.0.0”, “description”: “React”, “main”: “index.js”, “scripts”: { “start”: “npm run build”, “build”: “webpack -d && copy src/index.html dist/index.html && webpack-dev-server –content-base src/ –inline […]

Categories
Development

Heroku Deployment Continues to Fail at “Pruning devDependencies” Step

I continue to have issues deploying to Heroku and I can’t find out what is going wrong for the life of me. The Heroku error log tells me this after it successfully builds my react app: —–> Caching build – node_modules —–> Pruning devDependencies npm ERR! Cannot read property ‘match’ of undefined Here is my […]

Categories
Development

Axios post request fails to use proxy

I’m currently testing out the endpoints on my server via a React client using Axios. I have a proxy (http://localhost:8080) set up in my package.JSON for my client. All my GET requests are successful. My POST requests on the other-hand all fail to make use of the proxy provided in package.JSON, instead, it’s using (http://localhost:3000). […]

Categories
Development

Jest test passes locally but fails in azure devops

I have a react application using react-scripts 3.2.0 This is my test : jest.mock(‘./../shared/utils/getRequestWithDispatchUsing’, () => ({ __esModule: true, default: () => () => () => () => ‘getRequestWithDispatchUsing is success’, })); describe(‘getContractsUsing’, () => { const dispatch = jest.fn(action => action); const fetch = jest.fn(); const clientNumber = ‘clientNumber’; beforeEach(() => { jest.clearAllMocks(); }); […]

Categories
Development

Ruby on Rails with React “TypeError: Object(…) is not a function” Error

I am a newcomer to Ruby on Rails but have an issue with ReactJs. I tried to use React-Router-DOM and Redux but got errors. One of the errors occurred with ‘export default connect(structureSelector, mapDispatchToProps)(HelloWorld);’. Do you have any idea with this issue? Error message TypeError: Object(…) is not a function at Module../app/javascript/components/HelloWorld.js (HelloWorld.js:45) at __webpack_require__ […]