I'm following Cory House's pluralsight course on building React in ES6. Unfortunately I'm stuck on one of the first couple steps, setting up the basic components.
In the console I see the following error message:
Warning: [react-router] Location "/" did not match any routes
If I look in my dev server I see the following
ERROR in ./src/index.js
Warning: [react-router] Location "/" did not match any routes
Then below that I see that eslint has kicked out the following error:
C:\Projects\es6react\src\index.js (1/0)
✖ 5:9 routes not found in './routes' import/named
So this should be pretty straightforward. However, looking at my directory structure, index.js file and routes.js nothing stands out... even after about 30 minutes.
index.js
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {routes} from './routes';
import './styles/styles.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
);
routes.js
import React from 'react';
import {Route,IndexRoute} from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
export default(
<Route path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="about" component={AboutPage}/>
</Route>
);
Directory structure
And just in case my scripts section from my package.json:
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src":"babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test":"mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch"
},
You are using default export, you need to import it as default (without curly braces):
import routes from './routes';
On the other hand you can use named export and import it by name:
// index.js
export const routes = ...
// routes.js
import {routes} from './routes';
Because you are doing default export from routes.js file not named export, and importing it as named export.
Use this:
import routes from './routes'; //remove {}
You have used 'export default' in routes.js, this means that to import it you need to use:
import routes from "./routes";
In your code you have used {routes} which would import when exported without the default.
Related
Makes the Redux store available to the connect() calls in the component hierarchy below.
'Provider' cannot be used as a JSX component.
Its instance type 'Provider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Nilay/Desktop/nilay/src/pages/Home/Reel/node_modules/#types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)
can anyone can tell how to fix this i have tried npm install again my node version is 18plus
img here
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { ApolloProvider } from "#apollo/client";
import { apolloClient } from "./utils/index";
ReactDOM.render(
<React.StrictMode>
<Router>
<ApolloProvider client={apolloClient}>
<Provider store={store}>
<App />
</Provider>
</ApolloProvider>
</Router>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
It seems like #types/react problem with multiple versions.
Try to uninstall react-redux and react (check that the dependencies removed) and install again.
Also try to install #types/react, its installed through dependencies.
Some workarounds can be found here: https://github.com/facebook/react/issues/24304#issuecomment-1094565891
I want to build a package and upload it to npm so I tried to create a demo package first.
I used this repo as a starter package: https://github.com/wobsoriano/vite-react-tailwind-starter
and updated the build script to this
"build-test": "esbuild src/App.tsx --bundle --minify --outfile=src/dist/index.js",
and the App.tsx i updated to this
import React from "react";
import "./index.css";
const App = () => {
return <div>My Dummy</div>;
};
export default App;
Then I tried to build it and import it in my main.tsx like this:
import React from "react";
import ReactDOM from "react-dom";
import App from "./dist/index.js";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
And then I get this error:
The requested module '/src/dist/index.js' does not provide an export
named 'default
I only can give you a quick manual fix. For some reason the index.js file has no "export default" keywords, but you can open the src\dist\index.js file and you can just insert the "export default " at the very begin. So the begin will look like this:
export default ()=>{var K=Object.create;var _=Object.define.
Because the whole index.js just a function, you can do this.
I initialised a React project with TypeScript using the CLI command create-react-app client --typescript. Then, I ran npm start but received the following compilation error:
./src/App.js
Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope
I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx)
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
App.tsx:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Lorem
</div>
);
}
export default App;
React and ReactDOM are imported, so what caused this error?
Edit:
I found out that npm start, which runs react-scripts start, is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?
try
const RootApp:React.FC = () => {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}
render(<RootApp />, document.getElementById("root"));
Hi I am importing a home component stored in pages folder. Adding it to the Router of my application
Get the error below
./src/App.js Module not found: Can't resolve './pages'
But I seem to have done it correctly?Module not found: Can't resolve './pages'
Please help me why its saying module not found when its there
App.JS CODE
import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Home from "./pages";
function App() {
return (
<Router>
<Switch>
<Route path="/browse">
<p>I will be the sign in page</p>
</Route>
<Route path="/signin">
<p>I will be the sign up page</p>
</Route>
<Route path="/browse">
<p>I will be the browse page</p>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
home.js CODE
import React from 'react';
export default function Home() {
return (
<h1>Hello Sambulo</h1>
)
}
When you import from './pages' the default behavior is to look for for a file named index.js in the ./pages folder.
If you want to import home.js you have to change the import to
import Home from "./pages/home.js";
the .js at the end is optional as .js is the default file extension for imports
According to React component name convention, it is better to use Home.js as the file name.
So this one is also working.
import Home from "./pages/Home";
Component name should be in PascalCase.
For example, MyComponent, MyChildComponent etc.
I am using airbnb extension for linting my React Project. Now, in my index.js I have:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
linter says:
no-undef 'document' is not defined.at line 8 col 3
How can I solve this problem?
There are a number of ways to solve/get around this. The two key ways are to either specify document as global or to set the eslint-env as browser (what you probably want). You can do this 1) in-file, 2) in the configuration, or even 3) when running from the CLI.
1) In-file:
Set the environment as browser in your file:
/* eslint-env browser */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
Add it as a global in the file itself:
/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
2) In the eslint configuration:
Set the environment as browser in the configuration:
{
"env": {
"browser": true,
"node": true
}
}
Add it as a global in the configuration:
{
"globals": {
"document": false
}
}
3) From the CLI:
Using env: eslint --env browser,node file.js
Using globals: eslint --global document file.js
Resources:
Specifying Globals with ESLint
Specifying Environments with ESLint
Specifying env with ESLint CLI
Specifying globals with ESLint CLI