I am trying to create a react app on Heroku and I want to make use of vmsg (https://github.com/Kagami/vmsg).
I have set up a small app following these instructions:
https://github.com/mars/create-react-app-buildpack
Quick Start
I also ran:
npm install vmsg --save
I am now able to confirm that this file exists:
node_modules/vmsg/vmsg.wasm
Nevertheless inside index.js I hit a problem on this code (coming from the vmsg demo)):
handleRecord = () => {
vmsg.record({
wasmURL: require("vmsg.wasm"),
shimURL: "https://unpkg.com/wasm-polyfill.js#0.2.0/wasm-polyfill.js",
}).then(record => {
this.setState({record});
});
};
I get the error message:
remote: ./src/index.js
remote: Cannot find module: 'vmsg.wasm'. Make sure this package is installed.
remote:
remote: You can install this package by running: npm install vmsg.wasm.
I suppose I only need to put the proper import at the top of index.js.
Or modify this line:
wasmURL: require("vmsg.wasm"),
Though I am not sure and what I tried failed. Am I right? If YES, what is the right way to do it?
Or do I really need to run "npm install vmsg.wasm" as mentioned in the message?
.....
After giving it a try, this is actually not a valid solution; running:
npm install vmsg.wasm
is of no use.
Related
I installed firebase-admin in my React project, and suddenly I am getting a ton (116 to be exact) of "Module Not Found Errors" when loading the page - 'stream', 'util', 'assert', 'url', 'crypto' and the list goes on and on. Not sure what happened. I tried removing firebase-admin from the package.json file, but that did not fix the errors.
Any suggestions? The app was working fine until I installed firebase-admin.
Try this and see if it fix your problem:
Remove your node_modules folder (rm -rf node_modules)
npm cache clean -f
npm install
npm install firebase-admin
The errors seem to stem from the following import line:
import { firestore } from 'firebase-admin';
I am trying to setup React environment and I am getting two errors when running npm start in command prompt.
First error is "module build failed (from ./node_modules/babel-loader/lib/index.js)" and second is
"error plugin/preset files are not allowed to export objects only functions".
Any idea how this could be solved? I am new to this whole thing so please try to keep answer simple and steps easy to follow.
change your directory and install your app again via this code :
npx create-react-app yourAppName
then install all dependencies
I keep getting the below error when I try to simply create a new react app. I even set up fiddler on my computer and set my proxy to work with that but I am still getting the following error:
ECONNREFUSED 13.107.6.183:443
Click here for the complete log
$ create-react-app testmeup
Creating a new React app in C:\***\source\Dev\testmeup.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.15.2
[1/4] Resolving packages...
error An unexpected error occurred: "https://pkgs.dev.azure.com/AdmInvestorServices/_packaging/test/npm/registry/react: connect ECONNREFUSED 13.107.6.183:443".
info If you think this is a bug, please open a bug report with the information provided in "C:\\****\\source\\Dev\\testmeup\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Aborting installation.
yarnpkg add --exact react react-dom react-scripts --cwd C:\Users\***\Dev\testmeup has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
This appears to be an issue with your proxy settings since when you're running create-react-app <app_name> yarn is unable to resolve the necessary dependencies to set up your new react project, namely: react, react-dom, and react-scripts.
Maybe you could try setting your proxy settings so you can install the necessary libraries create-react-app needs. According to yarn's documentation:
"For backward compatiibilty with npm, Yarn allows passing down npm configuration via environment variables."
So maybe you could try the following and seeing if this helps resolve your issue:
npm config set proxy <proxy_url>
npm config set https-proxy <proxy_url>
where the <proxy_url> is changed to work with your appropriate proxy. Then you can tell yarn to ignore ssl if necessary. Note: Use at your own discretion.
yarn config set strict-ssl false
npm config set <key> <value> sets npm environment variables which yarn can also utilize. In this particular case we are setting the proxy environment variables. Now simply try running the create-react-app command again and it should be able to proceed with setting up the new react project for you.
Hopefully that helps!
I am trying to deploy my app to Heroku, it works in local but no luck online. I deleted and reinstalled node modules.
I had another error quite related to this (file not found same names etc) I changed the relative paths thinking that would fix the issue but I am getting nothing to come out of it
The error is:
Cannot find file './Components/SearchBar/SearchBar'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SearchBar from './Components/SearchBar/SearchBar'
import BusinessList from './Components/BusinessList/BusinessList'
import Business from './Components/Business/Business'
import Yelp from './Components/Util/Yelp'
I expected to not pull an error for something so simple, I've poured over the file and folder names and it just is not making sense.
PS I think it's probably unconnected I have const yelpApiKey=process.env.yelpApiKey for my heroku to connect to my API key (typed inside my account)
Thank you #Jason for asking this question and #Rakesh for answering.
I deployed create-react-app project on Heroku then I encountered a similar error where failed to build my project. the error was routes.js failed to import signup.js
Heroku log
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=false
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 10.16.3
engines.npm (package.json): unspecified (use default)
Resolving node version 10.16.3...
Downloading and installing node 10.16.3...
Using default npm version: 6.9.0
-----> Restoring cache
Caching has been disabled because NODE_MODULES_CACHE=false
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> core-js#2.6.9 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"
> core-js#3.2.1 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/core-js
> node scripts/postinstall || echo "ignore"
added 1507 packages from 719 contributors and audited 905071 packages in 35.746s
found 0 vulnerabilities
-----> Build
Running build
> chat-app#0.1.0 build /tmp/build_5d506b6dfc93b7f4b6575e02cc682130
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/routes.js // my beautiful error here
Cannot find file './Components/User/signup/signup.js' in './src'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chat-app#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chat-app#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.ynm0W/_logs/2019-09-30T15_24_32_571Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
solution
Heroku deploy projects on Linux servers, it means it is case sensitive if you make mistake the build will fail. I advise sticking with lowercase when naming files and directories.
my project structure
|root
|src
| componets
| user
| signup
|routes
|index.js
Alternatively,
After I correct mistakes, I still had the same error. so why?
I did not notice Git does not push the change. When you only rename the directory and even if you do git add, git commit and git push Git sometimes does not consider the changes. I advise after change go to the website to verify.
Lastly,
when deploying to Heroku please deploy only the base branch. for Example Master or develop. I realized every time I deployed my feature branch, Heroku automatic detect my base branch which was develop.
I found 2 problems with your code:
Import path is case sensitive(for some environments). And you are using 'Components' instead of 'components'
Import of 'App' in index.js is wrong. Use following
import App from './App';
In my case i renamed my file locally but when i pushed it on github it didn't reflected there. so i deleted that file and made new file with same content and it worked!
I tried all the suggestions above but none are working for me. Eventually, what I did was deleting the file that was complaining missing by heroku, and replaced it with a dummy component. After that, checked in my changes to heroku. Everything should be deployed successfully now.
Finally, I can swapped back my old dummy component with my original component and checked into heroku again and hallelujah, it worked !!!!
Hopefully that my workaround could save someone time :)
Thanks
This problem on Heroku is usually due to the fact that you renamed a component, like for example MyComponent into Mycomponent, and both git cache and heroku build cache may give that problem. The solution is this: Failed to compile: Cannot find file './containers/App/App' in './src' and clean the heroku build cache to to be safe:
https://help.heroku.com/18PI5RSY/how-do-i-clear-the-build-cache
I created a native module and created another project to test it locally.
Here are my steps:
cd <Testing project>
npm install ../<Module project>
react-native link <module name>
react-native run-android
Then I got following error:
error: bundling failed: Error: Unable to resolve module `react-native-helloworld` from `G:\Test\App.js`: Module `react-native-helloworld` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I've searched StackOverflow for the issue, but there's no workable solution. The suggested solution 'clear the cache and reset everything' cannot work.
However, the module can work if I publish it to https://www.npmjs.com/ and then install it via npm install <module name>.
The only difference is the installing way.
I got a similar error complaining about how it could not find 'path' from where ever it was looking for. In the end I figured out that the issue was completely unrelated.The following auto import was accidentally added to my code (probably when I was creating a style using 'textTransform')
import { transform } from "#babel/core";
Once I noticed that and removed it, the project was buildable. It might help to check recent changes in your code to see if something similar got added.
Chances are that you're accidentaly symlinking your library inside node_modules when you use npm, instead of using npm you can use yarn
yarn add file:../<module_project>