Encountering a "dependency resolution error" while deploying a React application with Parcel on Heroku

I've developed a compact application and I'm in the process of deploying it to Heroku. However, I keep encountering an error stating: '@emotion/is-prop-valid' dependency cannot be resolved. It's worth mentioning that this project does not involve create-react-app.

The complete error message reads as follows: 🚨 /tmp/build_7241c20b1c425be31049d4add81a048a/node_modules/react-pose/lib/index.js:10:42: Cannot resolve dependency '@emotion/is-prop-valid'

Here is a snippet from the package.json file outlining the configuration:

{
  "name": "name",
  "version": "2.0.0",
  "description": "description",
  "engines": {
    "npm": "6.0.0",
    "node": "10.9.0"
  },
  ...
}

Despite searching extensively, no similar instances of this particular error seem to have been reported. My assumption is that react-pose relies on the emotion module, yet I am unsure how to prompt Heroku to download it.

I'd greatly appreciate any assistance offered. Thank you!

javascriptnpm

Answer â„–1

Here is a sample configuration:

{
  "name": "example",
  "version": "1.0.0",
  "description": "sample description",
  "engines": {
    "npm": "6.0.0",
    "node": "10.9.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
    "format:check": "prettier --list-different \" src/**/*.{js,jsx,css,json}\"",
    "lint": "eslint \" eslint src/**/*,{js,jsx}\"",
    "dev": "parcel src/index.html",
    "start": "./node_modules/parcel-bundler/bin/cli.js src/index.html",
    "build": "parcel build src/index.html",
    "heroku-postbuild": "parcel build src/index.html"
  },
  "repository": {
    "type": "git",
    "url": "repository-url"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.6.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^2.7.0",
    "eslint-plugin-react": "^7.11.1",
    "parcel-bundler": "^1.10.1",
    "prettier": "^1.14.3"
  },
  "dependencies": {
    "@reach/router": "^1.2.1",
    "axios": "^0.18.0",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-pose": "^3.3.6",
    "react-spring": "^5.9.0",
    "serve": "^10.0.2"
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mapping objects in an array with Javascript

This code snippet is intended for a React Native Chat app. The structure of my data should look something like this: const chatData = [ { id: 1, name: 'John Doe', messages: [ {text: 'Hello', sentAt: 'time here' ...

javascriptreactjsreact-native

Access JSON value using jQuery by key

Creating a JSON structure that contains information about attendees: { "attendees": [ { "datum": "Tue, 11 Apr 2017 00:00:00 GMT", "name": " Muylaert-Geleir", "prename": "Alexander" }, { "datum": "Wed, 12 Apr 2017 ...

javascriptjqueryjson

Troubleshooting issues with a Node.js application on Azure App Service

Seeking assistance with deploying my first Node.js app on Azure App Service. Despite following Microsoft's guides and tutorials, my app is not functioning as expected. Although I can see my project in the Azure portal, when I attempt to access it via ...

javascriptnode.jsazureexpressazure-web-app-service

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...

javascriptnode.jsangulartypescripteventemitter

Infinite scrolling made effortless with jQuery and Ajax

I am attempting to create a basic infinite scroll feature that monitors when the user scrolls to the bottom in an HTML file. Once the bottom is reached, it should then load additional content from another HTML file which contains more text. The second HTM ...

javascriptjqueryhtmlajax

Is there a way to use Regex to strip the Authorization header from the logging output

After a recent discovery, I have come to realize that we are inadvertently logging the Authorization headers in our production log drain. Here is an example of what the output looks like: {"response":{"status":"rejected",&quo ...

javascriptnode.jstypescriptexpresslogging

Typescript encountering onClick function error during the build process

My current challenge involves creating a submit function for a button in my application. However, when I attempt to build the project, I encounter a typing error that is perplexing me. Despite trying various methods, I am unable to decipher how to resolve ...

javascriptreactjstypescript

What is the best way to transfer XML file information using AJAX to a Webmethod?

I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...

javascriptc#ajaxwebformswebmethod

Is anyone else experiencing issues with the Express middleware that checks for IDs? Looking for suggestions on how to fix

Currently working on a project with Node js utilizing Express and MongoDb for the backend. In this project, USERS have the ability to post COMMENTS, so I have created a middleware to access the DELETE route and check if the USER ID matches the ID of the in ...

javascriptnode.jsexpress

Implementing a dynamic background change based on the current date in JavaScript

Is it possible to change the background of the body element based on the season using JavaScript? Here is a code snippet that demonstrates how to achieve this: // Function to determine the current season in the southern hemisphere // If no date is prov ...

javascript

Combining array of objects by various identifiers

I'm facing a situation like this: const idMappings = { // id: parentId "2": "1", "3": "1" } const inputData = [ { id: "1", data: [1], }, { id: "2", data: [2] }, { ...

javascriptarraysalgorithm

Looking for the function to activate when the enter key is pressed

I have a search box which is a text type and has a click button that initiates the Find() function. How can I enable searching by pressing Enter inside the textbox? ...

javascriptangularjs

Unable to retrieve value from a hidden input field using JavaScript

My goal is to retrieve a value from a hidden inputbox using JavaScript. However, I am encountering issues where sometimes I receive an "undefined" error and other times there is no output at all. When I utilize alert(document.getElementById('hhh& ...

javascripthtml

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

javascriptjqueryhtmlangularjs

Filtering Sails.js query model based on a collection attribute

Imagine I have these models set up in Sails.js v0.10: Person.js module.exports = { attributes: { name: 'string', books: { collection: 'book', via: 'person' } } }; Book.js module.exports = { ...

javascriptnode.jssails.js

How can I implement a single-column search feature in a GridView using Javascript in ASP.NET?

I found a Google function for client-side searching in a grid using a textbox Here is the function: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function searchFunction(phrase, ...

javascriptc#asp.netgridview

Deactivate git tag versioning for npm version permanently

Is it possible to set the --no-git-tag-version flag as the default behavior for the command "npm version"? This would save me from having to remember to type it every time I run the command. ...

gitnpm

Concentrate on all elements within the form

I am in the process of developing a form with multiple input fields, one of which is shown below. I am interested in triggering an event using jQuery's focusout function. The form goes by the name: form_test <form id="form_test"> <input ...

javascriptjqueryhtml

focusing on a specialized format using the serialize() method

Following up on my previous question which was answered so promptly by Meder, there is now an additional query that has arisen while creating a reusable jQuery form submission without redirecting the user. Issue The jQuery serialize() function is applyin ...

javascriptjquery-pluginsjqueryjquery-forms-plugin

Updating data in Redux triggers a refresh of Material UI table data

Utilizing the material-ui data table component to showcase data, enabling users to update and save information via a form when clicking on a row. Implemented react-redux for state management and dispatching updated rows to the existing data. However, despi ...

javascriptreactjsreduxmaterial-ui