while using npm start in the terminal of visual studio I get an error

Question

I am using JavaScipt ES6 with Node. I am using visual studio code. I am getting this error when I run npm start: The error is:

×  C:\Users\markp\source\repos\bioinvisionTest\index.html:1:31: Imports and requires are not supported inside inline <script> tags yet

in other programs the import works. This one it doesn't. All that is in the program is this:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>    
  <script>
    import TestComponent from "./components/Testcomponent"
  </script>     
</body>
</html>

and in the components folder there is file called Testcomponent js that contains this:

function TestComponent() {
  console.log("test component js")
}

export default {
  TestComponent
}

Welcome! The error is telling you that you cannot put an `import` statement in an inline script. You need to put it within another .js file. — Fraze, Sep 27 '19 at 17:58
Possible duplicate of [Inlining ECMAScript Modules in HTML](https://stackoverflow.com/questions/43817297/inlining-ecmascript-modules-in-html) — Sagar V, Sep 27 '19 at 18:03
I took it out of inline script and that seemed to do the trick! — It's All Live, Sep 27 '19 at 20:29

score 0 · Answer 1 · answered Sep 27 '19 at 21:08

return key is somting which you can't simply ignore if it's multiline codes.

If you are uinsg Creaet-react-app as generator then i will recommend use APP.js as base and inject your component in that file for now. Later you can redesign .

If you are using only HTML and JS file then you should import react and react-dom library in your index.html file .

One page React App , place in your html file.

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
    render() {
        return (<p>Hello world</p>);
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>

score -1 · Answer 2 · answered Sep 27 '19 at 17:58

-1

Modules are natively suppported refer MDN docs

Try adding type="module" to your script tag.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>

  <script type="module">
  import TestComponent from "./components/Testcomponent"




  </script> 



</body>
</html>

answered Sep 27 '19 at 17:58

Tridev Mishra

371
2
12

I just tried this – It's All Live Sep 27 '19 at 19:55

while using npm start in the terminal of visual studio I get an error

2 Answers2