I am getting a "Failed to compile" error while trying to set up React with Webpack 4 and webpack-dev-server. The exact error showing is:
Failed to compile
./node_modules/history/es/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/vagrant/node_modules/history/es/index.js'
This error occurred during the build time and cannot be dismissed.
In the node_modules directory, the file in question indeed exists. However, I checked the files being sent over, and that file (and its siblings) is being sent as /vagrant/node_modules/history/index.js with the es director missing.
I am not exactly sure what is causing this. Some research suggested things like mismatched casing on imports, but I checked quite a few times and do not see anything like that going on. I am a bit of a noob when it comes to this, though, so I might be missing something obvious.
EDIT
Upon further investigation (with the help of Boy With Silver Wings' comment), the error is actually coming from the depths of React Router. This issue demonstrates something close to my issue, but in their version there is duplication of the history modules while mine seems to "move" them.
Related
I am launching the create-react-app and if throws me one error, but if I see it on Chrome dev tools it refers to one line in the bundle.js that is generated by webpack by default in create-react-app... So it's not useful for debuging.
Are there any way of that Google Chrome Dev Tools show me the error link line to the original .js file and not to the bundle.js one?
Now I only see this error:
This particular warning will lead you only as far as react-dom.development.js, which is equally useless in my opinion. But if you really want to know what happened, my guess is that you started the production server instead of development.
Either way, the warning is still very revealing and might help you discover the problem even without knowing the exact file. It's telling you that you set the c prop to a boolean on a <div> element (you can know this from the "at div" part of your warning), which is unsupported. This is was most likely a typo or hitting the key accidentally without wanting to type anything, so you might have something like <div c> somewhere.
You can search for this in your project using a regex like \bc\b, or search for a string like c={ in case your mistake was more deliberate.
Any time I import Amplify into my React Native project's App.js file, I get the following error:
TypeError: null is not an object (evaluating 'keys.filter')
Here is how I'm importing it:
I run the project using Expo only. If I comment the import Amplify line out, any other files which use anything related to Amplify cause the same error to occur.
Initially, when I was loading this project for the first time, I had other errors to deal with like first needing to create the aws-exports.js file. I copied this over from an old project (Because this is meant to be a re-do of another project that's already set up). Once I included that file I had to update a few lines in that file because of an improper reference to Linking from expo. Once I fixed that, it throw this error I'm referencing here. Now, even if I delete the aws-exports file it will throw this error as soon as Amplify is imported into the App.js file.
-- Update
I've found where the error is occurring. Some of my code gets executed but the error happens inside of the reactnative.js file when syncing between two memory software.
I've tried to reproduce this error inside a fresh react application by copying the package.js file and then importing Amplify into the App.js file but it doesn't throw this error.
Here is a screenshot of where the error is taking place. I'm still trying to figure out how to pinpoint where in my code this error begins.
According to Expo, you have to follow these steps
it would be best if you imported Amplify
import Amplify from '#aws-amplify/core'
All you need to follow those steps it sees the configuration issue result data is not coming that's why it gives a null value and crashes.
Follow steps below will fix your problem
https://blog.expo.dev/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2
The problem seems to be resolved by changing the slug attribute in the react app.json file. I changed the slug from being a camel case to an all lower case slug.
After this the error has gone away for what seems permanent. I've been able to replicate the error in small sample apps. I don't understand why this causes these errors.
In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.
We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?
I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .