I have compiled the below code it's getting me the Parsing error: Unexpected token, expected "..."
Error Don't know why.
import React,{Component} from 'react';
import EditableContetnt from './Fuck';
import Mymenu from './Mymenu';
import 'react-contexify/dist/ReactContexify.min.css';
import { MenuProvider } from 'react-contexify';
class App extends Component
{
constructor()
{
super();
this.state={name:'Hello World'};
}
render()
{
const {name}=this.state;
console.log(name);
return(
<div>
<MenuProvider id="menu_id">
<EditableContetnt {name}/>
</MenuProvider>
<Mymenu/>
</div>
)
}
}
export default App;
when i run the module it shows Parsing error: Unexpected token, expected "..."
Try to pass your name variable to MenuProvider component different way. Like this:
<EditableContetnt name={name} />
try to change: import 'react-contexify/dist/ReactContexify.min.css';
to
import './react-contexify/dist/ReactContexify.min.css';
(if it's in the same directory)
Related
Error:
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App."
index.js
import { registerRootComponent } from 'expo';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
App.js
import React, { Component } from 'react';
import { NavigationCointainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Favoritos from './Favoritos';
import InfoGeneral from './InfoGeneral';
import Principal from './Principal';
const Stack = createStackNavigator();
export default class App extends Component {
render(){
return(
<NavigationCointainer>
<Stack.Navigator initialRouteName='Principal'>
<Stack.Screen name='Principal' component={Principal}/>
<Stack.Screen name='InfoGeneral' component={InfoGeneral}/>
<Stack.Screen name='Favoritos' component={Favoritos}/>
</Stack.Navigator>
</NavigationCointainer>
);
};
}
This is a very common error, it means you are trying to render undefined as a component. This usually happens in circumstances like this:
MyComponent.js:
function MyComponent() {
return <View />;
}
App.js
import { MyComponent } from './MyComponent';
export default function App() {
return <MyComponent />;
}
Can you spot what is missing? It's export from MyComponent.js. In App.js, MyComponent is undefined because there is no such export. To fix it, you would do this:
MyComponent.js:
export function MyComponent() {
return <View />;
}
I had this error when I tried to get rid of warnings about PascalCase.
The warning:
Imported JSX component text must be in PascalCase or
SCREAMING_SNAKE_CASE react/jsx-pascal-case
I changed all components in my React Redux Form from Control.text, Control.select, Control.textarea to Control.Text, Control.Select, Control.TextArea and started getting this error.
I changed
<Control.Text />
<Control.Select />
<Control.TextArea />
back to
<Control.text />
<Control.select />
<Control.textarea />
and the error was gone.
Just tried to use decorators in React:
import React from 'react';
import Fade from './Transitions/Fade'
import withVisible from './withVisible'
#withVisible()
const App = props =>
<Fade visible={props.visible} duration={500}>
Hello
</Fade>
export default App
If I use the common way ( withVisible()(App) ) then it's working properly.
(My guess is that NodeJS can't compile my code with the # ) [Syntax error: Unexpected token (#) ]
import React from 'react'
const withVisible = () => Component =>
class WithVisible extends React.Component {
state = {
visible: true
}
render() {
return (
<Component visible={this.state.visible} {...this.props}/>
)
}
}
export default withVisible
Probably your .babelrc do not have added decorator plugin.
Try this: https://babeljs.io/docs/plugins/transform-decorators
You need transform-decorators-legacy babel plugin to make this syntax work.
I'm stumped on what this error message could mean or why I only get it when trying to use react-router. The app works fine if I render a component directly like this: render(<App />, document.getElementById('root'));
But when I try to use the <BrowserRouter>, <Match>', & <Miss> elements from react-router, like this: render(<Main />, document.getElementById('root'));, I get the following error message from my console:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofMain.
I'm also seeing this error in an invariant.js file: error.framesToPop = 1; // we don't care about invariant's own frame error = Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined...
Here's my index.js file
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
import App from './App';
import SineWave from './SineWave';
import NotFound from './NotFound';
import './index.css';
const Main = () => {
return (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={App} />
<Match exactly pattern="/lesson-one" component={SineWave} />
<Miss component={NotFound} />
</div>
</BrowserRouter>
)
}
render(<Main />, document.getElementById('root'));
Does anyone have any idea what's wrong here?
I'm not sure if this is useful, but here's the webpack data with some clues as to where the error might be:
function invariant(condition, format, a, b, c, d, e, f) {
if (true) {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
}
if (!condition) {
var error;
if (format === undefined) {
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(format.replace(/%s/g, function () {
return args[argIndex++];
}));
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
}
module.exports = invariant;
**Additional components that may be causing the problem:
Here's my App.js file:
import React from 'react';
import './App.css';
import Header from './Header';
import Instructions from './Instructions';
import SineWave from './SineWave';
const App = (props) => {
return (
<div className="App">
<div className="header">
<Header />
</div>
<div className="body">
<div className="instructions">
<Instructions instructionText="Here are the instructions!"/>
</div>
<div className="SineWave">
<SineWave soundText="This is a sound."/>
</div>
</div>
</div>);
};
export default App;
And here is the SineWave.js file, which is also referenced:
import React from 'react';
class SineWave extends React.Component {
render() {
return (
<div>
<button classID="playSine">PLAY SINEWAVE</button>
<p>{this.props.soundText}</p>
</div>
)
}
}
export default SineWave;
And finally, the NotFound.js file:
import React from 'react';
class NotFound extends React.Component {
render() {
return (
<h2>Not Found!111!!</h2>
)
}
}
export default NotFound;
SOLVED: It turns out that <BrowserRouter> can only be used in react-router v4 ... I was using v2.8, which is the version that's is installed when you type npm install --save react-router. If you want to use react-router v4 you'll need to use npm install --save react-router#next. Here's a link to the v4 branch on GitHub: https://github.com/ReactTraining/react-router/blob/v4/README.md–
Have you tried rendering Main like this?:
render(
(
<Main/>
),
document.getElementById("selector")
);
Note that I have surrounded the Main component in brackets.
It might be a dumb solution, but I know I've encountered this before and I believe it's an issue with rendering.
Can you see why this is failing?
In my ./app.js file:
import Howdy from ('./app/Howdy');
Get this error:
SyntaxError: /Users/elk/testapp/app.js: Unexpected token (6:18) while parsing file: /Users/carlf/Documents/dev/reactjs/FlyTweet/app.js
/app/Howdy.js
import React from 'react';
export default class Howdy extends React.Component {
render() {
return (
<div>Howdy {this.props.name}</div>
);
}
}
If I change to using var Howdy = require('./app/Howdy') in app.js and React.createClass() in Howdy.js it works even when keep import React from 'react' in Howdy.js
The syntax should be:
import defaultMember from "module-name";
Get rid of the parenthesis:
import Howdy from ('./app/Howdy');
should be:
import Howdy from './app/Howdy';
Check out the MDN docs on import, they are pretty comprehensive:
MDN IMPORT
I needed to refactor my stateless functional component to a class. When I did so though, I keep getting an error where it looks like React itself is undefined.
import React from 'react';
import { Cell } from 'fixed-data-table';
const DataCell = ({rowIndex, columnKey, data, onMessageClicked, ...props}) => {
return (
<Cell {...props} onClick={onMessageClicked(data[rowIndex].Id)}>
{data[rowIndex][columnKey]}
</Cell>
);
};
export default DataCell;
to
import { React, Component } from 'react';
import { Cell } from 'fixed-data-table';
class DataCell extends Component {
onCellClicked() {
this.props.onMessageClicked(this.props.data[this.props.rowIndex].Id);
}
render() {
const {rowIndex, columnKey, data, ...props} = this.props;
return (
<Cell {...props} onClick={onCellClicked}>
{data[rowIndex][columnKey]}
</Cell>
);
}
}
export default DataCell;
bundle.js:43248 Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)
and when I go to that line I see
return _react.React.createElement(
I don't get it. How do I debug/fix this?
My full code for this app is here in case the code I'm posting is not related somehow.
Thanks!
Oh...
import { React, Component } from 'react';
needs to be
import React, { Component } from 'react';
:)
The OP has answered the question it self but with no reason so here's the reason!
{Directly quoting from https://github.com/facebook/react/issues/2607#issuecomment-225911048" }
import { React, Component } from 'react';
is incorrect, should be
import React, { Component } from 'react';
There is no named export named React. It is confusing because React is a CommonJS module, and since you’re using ES6 imports, Babel tries to map the semantics but they don’t match exactly. { Component } actually grabs Component from React itself so you might just:
import React from 'react'
and use React.Component instead if it’s less confusing.
For me in TypeScript the solution was:
import * as React from 'react';