When i want to create an element without JSX it shows me this error 'React' is not defined no-undef. I am a beginner. I don't know what is the problem. Can anyone help
import logo from './logo.svg';
import './App.css';
const app = React.createElement("h1", null, "Without JSX"); // Showing an error
function App() {
return (
<div className="App">
{app};
</div>
);
}
export default App;
These messages are shown in VS code Terminal.
Failed to compile.
./src/index.js
SyntaxError: E:\react_js_course\src\index.js: Unexpected token, expected "," (11:2)
Failed to compile.
src\App.js
Line 4:13: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
A couple points just based on the code you provided:
You are using JSX in your example: your App component returns JSX, so React should be in scope to do that.
You are explicitly using the React method createElement so React should be available in this file.
To fix both issues add import React from 'react'; at the top of this file.
import React from 'react' is required for writing code in JSX and alternative you use ES7 snippet which help to auto populate the code
enter image description here
Img-extension ss
Related
I'm new to React. I have an existing traditional web app (uses jquery) that I would like to convert to React, but am getting an error in the browser. I have used create-react-app to create a new React project. In index.html, I added my html under the
<div id="root"></div>
My ./src/index.js is the standard:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById('root'))
My App.js is the standard:
import React, {Component} from 'react'
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
)
}
}
export default App
When I run it with "npm start", the "Hello World" is displayed, followed by my existing html. But that page shows the existing html with none of the javascript functionality behind it. The index.html contains a link to the existing javascript, like this:
<script src="../src/components/SplitPane/SplitPane.js"></script>
That javascript starts with jquery like this:
(function($) {
$.fn.splitPane = function() {
var $splitPanes = this;
$splitPanes.each(setMinHeightAndMinWidth);
In the Chrome console, I see the error:
Uncaught SyntaxError: Unexpected token '<' (on line 1 of SplitPane.js)
That line doesn't even have any '<' or '>' tokens so the error doesn't make sense.
Any ideas?
Please check your code for HTML, > is missing.
I am making a webpage with glitch.com, but this error keeps appearing:
Uncaught SyntaxError: Unexpected token {
This is the code from where the error appears:
import {Unit} from "./Unit.js";
This is how I export Unit: (Unit is a class)
export {Unit};
There aren't any errors in the Unit file.
EDIT: Just for reference, when I go to "Inspect" and then "Sources" I don't see the Unit file, could this be the reason?
You don't need curly brackets around the exported class
export default Unit;
You shouldn't need them either in the import statement if Unit is the only class you're exporting in Unit.js
import Unit from '/Unit.js';
I am not sure if anybody tried redux with framework 7 react template before but I think this is a more general error. I successfully install and run framework 7 react template, then I wanted to try redux. I installed redux, react-redux and tried to integrate todoList example in redux website into same template. I get unexpected character error for some files and I do not know why this happens.
I tried to remove brackets when importing, or added ; end of import lines but didnt change anything.
I copy and paste code directly from redux website, maybe some hidden character problem, how can I test and get rid of that ?
./src/components/Footer.js
Syntax error: D:\client\src\components\Footer.js: Unexpected character ‘’ (4:0)
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
const Footer = () => (
./src/reducers/index.js
Syntax error: D:\client\src\reducers\index.js: Unexpected character ‘’ (5:0)
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
export default combineReducers({
If you copy/paste directly from the redux examples it looks like there is a zero width space on the blank lines. In the top right hand corner of the examples there is a copy icon which will copy the actual source code, try that.
I just started with React.js and I am unable to import component.
I have this structure as followed by this tutorial (YouTube link) :
-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
This is my index.js:
import React from 'react';
import { render } from 'react-dom';
import { MyCompontent } from "./components/MyCompontent";
class App extends React.Component {
render() {
return (
<div>
<h1>Foo</h1>
<MyCompontent/>
</div>
);
}
}
render(<App />, window.document.getElementById('app'));
This is MyComponent.js:
import React from "react";
export class MyCompontent extends React.Component {
render(){
return(
<div>MyCompontent</div>
);
}
}
I am using this webpack file (GitHub link).
However, when I run this, my module fails to load.
I get this error in the browser console:
Error: Cannot find module "./components/MyCompontent"
[WDS] Hot Module Replacement enabled. bundle.js:631:11
[WDS] Errors while compiling. bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
/home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
# ./src/app/index.js 11:20-56 bundle.js:669:5
Can't figure out what went wrong here.
For anyone coming here without a typo, and is using Webpack, be sure to check for a clause like this:
resolve: {
extensions: [".jsx", ".js"]
},
in your webpack.config.js.
This tells your transpiler to resolve statements like:
import Setup from './components/Setup'
to
import Setup from './components/Setup.jsx'
This way you don't need the extension.
You have a typo in your import. You're requesting MyCompontent. Change to:
import MyComponent from "./components/MyComponent";
And all typos as well.
You can try to import MyCompontent from "./components/MyCompontent.js"
like this
import MyCompontent from "./components/MyCompontent.js";
You have written that the filename is MyComponent.js.
Thus, your import should look like
import { MyCompontent } from './components/MyComponent.js'
The problem for me was that import line was not generated correctly. I have this scenario:
--src
----elements
-----myCustomText.tsx
this is myCustomText.tsx file:
export interface Props {
text: string;
}
const MyCustomText = ({ text }: Props) => (
<Text>{text}</Text>
);
export default MyCustomText
And the generated import was this:
import MyCustomText from '../../elements/MyCustomText';
and I changed it to this:
import MyCustomText from '../../elements/myCustomText'
I don't know why the generated import line was generated automatically wrong.
I found myself here without a typo and without a webpack issue.
The solution for me was to restart the typescript server via VS Code.
I just had this issue, no type or webpack config issues.
What fixed it was changing the import from relative to the app root directory to relative to the file:
import MyComponent from "src/components/MyComponent";
to
import MyComponent from "../components/MyComponent";
If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:
menu File → Preferences → Settings → User Settings,
"typescript.preferences.importModuleSpecifier": "relative"
export 'Component' (imported as 'Component') was not found in 'react'
if you find your self stuck with this error simply go to mini-create-react-context, and go to cjs, and go to index.js and add "React" example: you will find this (Component) solution (React.Component) only if you extends to React.Component in you pages
Note: I have only used this on VS Code
I have used the below structure to create a react component which is working on the browser after done babel. But the Layout spec is failing in my case since the React is declared in Base component only. Why the inheritance is not working in spec?
Base.js
import React from 'react';
export default class Base extends React.Component {
}
Layout.js
import 'Base' from './Base';
export default class Layout extends Base {
const sample = React.cloneElement(this.props.data, {ref: 't'});
}
Test Case
import Layout from 'component/Layout'
import React from 'react';
describe('Layout', () => {
}
Error message:
ReferenceError: Can't find variable: React
In Layout.js you have the following line
const sample = React.cloneElement(this.props.data, {ref: 't'});
Here you reference React, but Layout.js hasn't got a definition for React, similar to how you don't have access to identifiers in different closures, so it would throw a ReferenceError
If you want to use this reference you need to first teach it to Layout.js by including the import line again
import React from 'react';
If you don't want to have a second import line, you could
Re-export React in Base.js so the one import does both import {foo, bar} from 'baz';
See if you can reference what you want through an identifier you can see, e.g. via Object.getPrototypeOf(Base.prototype).constructor?
As you are creating React as a global in Test Case, the ReferenceError in mocha may be getting thrown too early, moving the import React line above the import Layout line should fix this