score:1
in order to work with import
, you need to add a plugin for transforming transform-es2015-modules-umd
by specify the plugins
on <script />
.
let's imagine you have a following structure:
public
- foo.js
- index.js
- index.html
foo.js
exports an simple component like this:
export default () => <div>foo</div>;
index.js
is all about importing and boostrap:
import foo from "foo";
reactdom.render(<foo />, document.getelementbyid("root"));
finally, register modules in index.html
:
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./foo.js"
></script>
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./index.js"
></script>
</body>
here is full code in index.html
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script
src="https://unpkg.com/react@16/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
crossorigin
></script>
<title>react app</title>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./foo.js"
></script>
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./index.js"
></script>
</body>
</html>
also the codesanbox link: https://codesandbox.io/s/quizzical-bird-vwn5t?file=/public/index.js
score:0
you can't write html on js file. you need to switch to jsx ( javascript xml ) file format.
rename your files to cards.js => cards.jsx
and cardui.js => cardui.jsx
score:0
i think you need a babel transpiler to translate the jsx syntax.
for react : https://babeljs.io/docs/en/babel-preset-react
Source: stackoverflow.com
Related Query
- React in HTML Uncaught SyntaxError: Unexpected token '<'
- React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
- Uncaught SyntaxError: Unexpected token < in React JS
- Uncaught SyntaxError: Unexpected token < with React
- Uncaught SyntaxError: Unexpected token '<' React
- Uncaught SyntaxError: Unexpected token '<' | after "yarn add xlsx" | React Typescript
- React ES6 SystemJS - Uncaught (in promise) Error: Unexpected token <(…)
- React Router - Uncaught SyntaxError: Unexpected token < when refreshing an URL with params
- SyntaxError in Webpack / React.js Unexpected token = { } in React
- Javascript react Uncaught SyntaxError: Unexpected token '<' or Syntax error
- React in laravel is getting syntaxerror unexpected token
- React Uncaught SyntaxError: Unexpected token
- Uncaught SyntaxError: Unexpected token '<' react gatsby webapp
- Uncaught SyntaxError: Unexpected token '<' firebase-app.js.1, firebase-analytics.js.1 & init.js.1 using react & firebase
- driven.js:30491 Uncaught SyntaxError: Unexpected token import which refers to the line in react js application?
- Uncaught SyntaxError: Unexpected token < in React
- React Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error
- REACT JS : Uncaught Error: parse Error: Unexpected token
- Uncaught (in promise) SyntaxError: Unexpected token in React
- Uncaught SyntaxError: Unexpected token in import React from 'react'
- React JS app - Uncaught SyntaxError: Unexpected token <
- React not working. Error says (index):13 Uncaught SyntaxError: Unexpected token <
- In React get SyntaxError : Unexpected token
- Uncaught SyntaxError: Unexpected token '<' when serving the react
- Fetch API in React for JSON file: Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0
- Unexpected token < error in react router component
- Fragments giving Unexpected token error in React 16.2
- React JS Jest causing "SyntaxError: Unexpected token ."
- babelify + browserify-rails + react, Uncaught SyntaxError: Unexpected token import
- spread operator in react throwing error of Unexpected token
More Query from same tag
- How do I make a conditional that select only the element true - Javascript
- Why do I get SyntaxError: Assigning to rvalue?
- Why React hook useState don't increment index onClick?
- Material-UI include only certain component
- Group and Sum data in ReactJS
- reactJs : Communication between two different components
- Lodash debounce not working in React
- Navigating through different pages with onClick & radio buttons - React.js
- React dynamic hook name change value
- How do i map a JSON API response that contains an array of objects to an ag-grid table
- Access-Control-Allow-Origin Problem in ReactJS
- how can i access current location from web-page in react native webview
- Access props and state of current component in React JS within an event handler
- How to convert the following HOC implementation into a react hook implementation
- Updating the server state with React.js?
- Rollup and Post CSS - Auto-prefixing React className attributes
- React map item shows nothing
- Does React use server-side-rendering or client-side-rendering?
- Does ComponentDidMount not work with react hooks?
- How to customize the font size of an active tab in material-ui
- My React Simple counter doesn't work as expected
- material-ui dropzone file reject on validation
- Getting a value of input field in a React component
- Ant Design with sass in React with create-react-app
- "This" is not allowed withing Model.confirm ()
- Axios: use same interceptor with multiple axios instances
- Fetching data from websocket to react
- Using getDerivedStateFromProps to fetch API data is causing the component to render many times
- useEffect with function factory gets "React Hook useEffect received a function whose dependencies are unknown. Pass an inline function instead"
- Typescript: TypeError is undefined