Javascript import reported an error

beginners, want to know where the error is, all the materials found are introduced
the following is my streamlined code. The error prompt is
error prompt on the main.js import line:
SyntaxError: Unexpected token"{". Import call expects exactly one argument

< H2 > index.html < / H2 > 
<!DOCTYPE html>
<html>

<head>
    <title>LearnJavscript</title>
    <meta charset="utf-8">
    <style type = "text/css">
        body{
            background: -sharpFFFFFF;
            padding: 0px;
            margin: 0px;
            display: flex;
            /* flex-direction: column-reverse; */
            justify-content: center;
        }
 
    </style>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>
< H2 > main.js < / H2 > 
import {hello} from "./lib.js";

hello();
< H2 > lib.js < / H2 > 
export function hello() {
    console.log("hello");
}
Es6 javascript
Mar.14,2021

when can browsers directly use import ?
browser JS does not support modular systems. If necessary, you need to use requirejs or seajs or webpack to handle 

<script src="main.js"></script>

= > 

<script type="module" src="main.js"></script>

browsers that currently support ES6 Module:

  • Safari 10.1
  • Chrome 61
  • Firefox 54 requires setting dom.moduleScripts.enabled
  • Edge 16

methods of using Module in browsers: 

<script type="module" src="./main.js"></script>
// 
<script type="module">
  import './main.js';
</script>

Specification to pay attention to:

  1. Note the referenced path. Main.js, does not support / main.js,. / main.js,.. / main.js, * * / main.js
  2. backward compatibility using the nomodule attribute
  3. Modules defaults to using Defer, which is slower than Synchronize, but before explicit Defer requests
  4. both referenced or inline Modules supports Async
  5. reference the same Modules, multiple times and execute it only once
  6. usually requires CORS, that is, Access-Control-Allow-Origin: *
  7. send request does not include certificate by default
  8. Modules needs to set available MIME types, otherwise
    9. will not be executed

reference:
https://jakearchibald.com/201.

does not support import syntax. You can use babel to es5

.

Previous: The chunkName problem of webpack packing problem

Next: How does React loop out the entire category?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e524-2c40a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e524-2c40a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?