score:2
Accepted answer
export const hello = {
<h1 id="title"
classname="header"
style={{backgroundcolor: 'turquoise', color: 'white', fontfamily: 'verdana'}}>
{text.hello}
</h1>
}
the {...}
are interpreted as an object literal. you cannot put jsx inside an object literal, just like you cannot put arbitrary code inside an object literal.
e.g. this throws a similar error:
export const hello = {
1 + 1
}
if you want to export the react element, then do just that. remove the {...}
:
export const hello =
<h1 id="title"
classname="header"
style={{backgroundcolor: 'turquoise', color: 'white', fontfamily: 'verdana'}}>
{text.hello}
</h1>;
inside jsx, {...}
have a different meaning. e.g. in
<span>{1+1}</span>
the {...}
let the parser know that the content is a javascript expression.
Source: stackoverflow.com
Related Query
- babel-loader syntax error only for imported modules
- React, WebPack and Babel for Internet Explorer 10 and below produces SCRIPT1002: Syntax error
- Babel throwing Support for the experimental syntax 'jsx' isn't currently enabled
- Syntax Error when test component with SASS file imported
- Syntax error in IE11 with Webpack, Babel and React
- Mocking react-router-dom for useHistory hook causes the following error - TS2698: Spread types may only be created from object types
- React Syntax Error : Expected corresponding JSX closing tag for <img>
- Symlinking react modules with npm link for local development gives error
- use babel-jest for jest but still get syntax error
- VSCode provides intellisense for Foo.js via a corresponding Foo.d.ts only when it’s imported somewhere; how to enable intellisense in a Foo.js itself?
- SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack
- Syntax Error In IE 11 for this node_moduels
- Support for the experimental syntax 'jsx' isn't currently enabled when using webpack and babel
- Babel throws a syntax error on arrow function
- Babel Syntax error in component definition react
- Gatsby React app error Refresh Babel transform should only be enabled in development environment
- es6 syntax for exporting modules in one file
- Babel Config Error: Support for the experimental syntax 'jsx' isn't currently enabled
- babel with browerify causing syntax error with arrow functions
- Webpack throws syntax error for JSX
- Within a ReactJS component, when looping through a props array, I can only use the shorthand syntax for the loop. Why is this?
- React Router rendering only base path (/) and throwing error for other paths when requested directly in the browser
- Why does my React App have a syntax error for index.pack.js?
- Cannot assign to read only property 'exports' of object ERROR after upgrading to Babel 7
- React.js loader for sass modules
- Jest:moduleNameMapper: mocks do not work for imported modules of mapped modules using "moduleNameMapper"
- What would cause a babel transformation Syntax Error w an Unexpected Character
- useing web3 in React has error : webpack < 5 used to include polyfills for node.js core modules by default
- how to show error note for only when a particular object value is empty in text field in reactjs
- Module parse failed error for css loader
More Query from same tag
- cache images in service worker in react js progressive-web-app
- React: Why on .map an array doesn't show list of items?
- On React MaterialTable, example to code Edit Button when option.selection row is enabled?
- Display values from form submission to a DOM
- I can access my context's object, but cant update any of it's values
- while testing onSubmit I want to Mock API call instead of making actual API call
- How to solve TypeError: Cannot read property 'filter' of undefined
- Typescript how to mix dynamic([key: type]: type) and static typing for an interface
- CRUD React App - Unable to POST data to SQL db?
- Why function works without "this" binding?
- history.push() updates URL in browser but does not renders the appropriate component(Redirect not working too)
- react-select wont close when clicking outside
- How to create React useState hook matching to JSON object
- How to get boolean data from API selected in a Dropdown (REACT)?
- How to use Redux devtools with Nextjs?
- Environment variables in gatsby-browser.js
- How do I define a prop type as a <div> in Flow?
- Is there any difference between React.render() and ReactDOM.render()?
- Unable to display blog comments on the browser in react js
- How to run Front End and Backend together in React.js and Express.js
- Can't convert node without a body
- Trying to convert unix timestamp to the day but same amount of days is being printed instead. Using react
- Can't update state in component did mount hook react
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
- React - Can I verify if user pressed a key or not with on change event?
- React state not setting
- How to sync Redux state and url hash tag params
- How to access values from localStorage through out the application. ReactJS-Redux
- Pass data through levels - open Modal dialog at the end
- React test checkbox doesn't checked on click