I am working with typescript-with-react. And i m using webpack as a compiler . And my directory structure is as follows:
d:/original/22-02-2017/
-
and my entry point in web.config.js is ./src/index.tsx file.
my components placed inside src/components/demo.tsx
and my index.tsx file is as follows
and inside /job2.html i have following links
but when i am trying to run program it gives me following error
Warning: [react-router] Location "/D:/original/22-02-2017/job2.html" did not match any routes
and i am not using server port i am just running my app at
file:///D:/original/22-02-2017/job2.html
i have tried many but not get succeed. please help me what is wrong with my code?
This one is the very old question for React router. Now we can use React-Router-DOM for routing with react. It is very easy to understand and very simple to use.
Related
I want to use the optional route parameter feature sveltekit offers but it produces an error.
In my 'routes' folder I created another folder '[[lang]]' but when I want to try it out I get this error:
Error: Invalid param: [lang. Params and matcher names can only have underscores and alphanumeric characters.
I'm pretty new to svelte and sveltekit so any help would be greatly appreciated.
I just tried creating a [[lang]]/home route with the latest SvelteKit and it worked fine.
According to your error, the folder name seems to be detected as [[lang], not [[lang]].
However, when I tried renaming my [[lang]] folder to [[lang] I got a different error: Invalid route /[[lang] — brackets are unbalanced
To help diagnose the actual problem, I suggest creating a github repo with a simple reproduction based on the starter template from npm create svelte#latest
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.
I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any
I have tried asking on Super User community before, but didn't get any answers so I'm trying my luck here.
I'm running an Apache web server and decided to host a React application. I have a nano-react-app folder which contains the files shown below. I can render the website in debug mode so I know my code is working properly. But when I go online, I get this error :
Uncaught SyntaxError: Cannot use import statement outside a module (index.js:1)
which points to the line import React from 'react'; in index.js. To be honest, I don't really understand what the error is telling me so I don't know where and how to look. All I could figure out is that my Index.js file — with a capital i — is called from index.html with a lowercase i and it changes nothing locally but on server-side it returns this error when capitalizing i:
GET http://mywebsite/src/Index.js net::ERR_ABORTED 404 (Not Found)
Now.. I have read in another SO question that I should add type="module" when calling index.js in script tag but now I get this error :
Uncaught SyntaxError: Unexpected token '<' (index.js:5)
I would highly appreciate any solutions... Thanks!
Browsers don't support JSX natively. You need to transpile your code to JavaScript by creating a production build. How you do that depends on the toolchain you have selected and is covered in the React documentation.
I am really at my wits end with this. I'm trying to build & deploy a Gatsby site and I am getting the above error after trying to build the static HTML pages. The CSS and JS files all build without issue.
I get a WebpackError with this as well: WebpackError: Minified React error #130; Which can be found here: #130
Gatsby's Docs suggest that this #130 error is due to mixing up import and require calls in the same file. I have been through my entire directory hunting for something like this, and I can not find anywhere where this occurs. I don't seem to have any of the other issues the Gatsby docs also suggest for this error either.
Has anyone else ran into this problem, and if so, what was the solution for you? I'm not sure how to go about posting code, because I don't even know what the problem is here. Everything compiles and runs locally without issue on the dev server, which is kind of why I am stumped. How can the code compile and work perfectly locally but not build & deploy?
This was solved. For anyone building a site with Gatsby, the issue is that I had a /styles directory for my styled components located in the src/pages directory.
This throws an error when building because Gatsby expects JS files inside of the /src/pages directory to only be exported React components, which in turn represent a page of the website.
I moved the styles into /src and voila. This caused the error because styled components are JS files, and as mentioned above, Gatsby is not expecting anything else other than exported React components inside of /src/pages.