Uncaught SyntaxError : Cannot use import statement outside a module

Question

Can someone help, I tried using type="module" and type="text/javascript" but bot cant seem to run. What should i do?

This is the index.html page where i receives file input from user and the data will be parsed into index.js.

<!DOCTYPE html>
<html>
<head>
  <title>D3 Evalusation</title>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script

  <script type="module" src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="header">Import your Data</h1>

<div class="input_form>">
  <form class="input_form" style="border:1px solid #ccc" method="POST">

    <h1>Please insert your data</h1>

    <label id="fname">First Name</label>
    <input type="text" placeholder="John" name="name" required><br/><br/>

    <label id="lname">Last Name</label>
    <input type="text" placeholder="Doe" name="name" required><br/><br/>

    <label id="email">Email</label>
    <input type="text" placeholder="Enter email" name="email" required><br/><br/>

    <label id="phone">Phone No.</label>
    <input type="text" placeholder="Enter phone" name="phone" required><br/><br/>

    <input type="file"  id="upload_file" accept=".xls,.xlsx,.csv"/></br></br>

    <label id="characteristic" >Please choose 1 characteristic to be grouped by</label>
    <div id="columns"></div>

    <div class="clearfix">
      <a href="Homepage.html">
        <button type="button" class="cancelbtn">Cancel</button></a>
      <button type="submit" class="signupbtn">Sample</button>
    </div>

  </form>
</div>
</body>

<script type="text/javascript" src="index.js"></script>
</html>

This is the index.js file

 import {
    select
  } from 'd3';

  let selectedFile;

  var upload = document.getElementById('upload_file');
    upload.addEventListener("change",(event)=>{
      selectedFile = event.target.files[0];

      if(selectedFile){
        let fileReader = new FileReader();
          fileReader.readAsBinaryString(selectedFile);
          fileReader.onload = (event) => {
          let data = event.target.result;
          let wb = XLSX.read(data,{type:"binary"});

          wb.SheetNames.forEach(sheet => {
            let dataRow = XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheet]);
            JSON.stringify(dataRow,undefined,4);
          })
            select("column").call(dropdownMenu,{
              options:dataRow.columns
            })
            }
        }
    });

Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) — pavel, May 18 '21 at 18:46
no i already added type"module" in both json and html still got the same error — Muhd Danish, May 18 '21 at 18:52

Uncaught SyntaxError : Cannot use import statement outside a module

0 Answers0