“Uncaught SyntaxError: kan importstatement niet gebruiken buiten een module” bij het importeren van ECMAScript 6

Ik gebruik ArcGIS JSAPI 4.12 en wil Spatial Illusions gebruiken om militaire symbolen op een kaart te tekenen .

Als ik milsymbol.js aan het script toevoeg, geeft de console een foutmelding

Uncaught SyntaxError: kan importstatement niet gebruiken buiten een module`

dus ik voeg type="module" toe aan het script, en dan keert het terug

Uncaught ReferenceError: ms is niet gedefinieerd

Hier is mijn code:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {
        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });
        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>

Dus, of ik nu type="module" toevoeg of niet, er zijn altijd fouten. In het officiële document van Spatial Illusions staat echter geen type="module" in het script. Ik ben nu echt in de war. Hoe krijgen ze het voor elkaar zonder het type toe te voegen?

Bestand milsymbol.js

import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;
export { ms };

Antwoord 1, autoriteit 100%

Ik kreeg deze foutmelding omdat ik het type=”module” in de scripttag ben vergeten:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

Antwoord 2, autoriteit 53%

Het lijkt erop dat de oorzaak van de fouten is:

1. U laadt momenteel het bronbestand in de src-directory in plaats van het ingebouwde bestand in de dist-directory (u kunt zien wat het beoogde gedistribueerde bestand is hier). Dit betekent dat je de oorspronkelijke broncode gebruikt in een ongewijzigde/ontbundelde staat, wat leidt tot de volgende fout: Uncaught SyntaxError: Cannot use import statement outside a module. Dit moet worden opgelost door de gebundelde versie te gebruiken, aangezien het pakket rollup gebruikt om een ​​bundel te maken.

2. De reden dat u de fout Uncaught ReferenceError: ms is not defined krijgt, is omdat modules binnen het bereik vallen en aangezien u de bibliotheek laadt met native modules, ms valt niet binnen het globale bereik en is daarom niet toegankelijk in de volgende scripttag.

Het lijkt erop dat u de dist-versie van dit bestand moet kunnen laden om ms te laten definiëren in het window. Bekijk dit voorbeeld van de bibliotheekauteur om een ​​voorbeeld te zien van hoe dit kan klaar.

Antwoord 3, autoriteit 33%

Update voor knooppunt / NPM

Voeg "type": "module" naar uw Package.json

{
  // ...
  "type": "module",
  // ...
}

Opmerking: als u bij het gebruik van modules ReferenceError: require is not defined krijgt, moet u de import syntaxis in plaats van require. Je kunt ze niet native mixen en matchen, dus je moet er een kiezen of een bundel gebruiken als je beide moet gebruiken.

Antwoord 4, autoriteit 17%

Ik zat ook met hetzelfde probleem totdat ik het type=”module” aan het script toevoegde.

Voordat het zo was

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

En nadat je het hebt gewijzigd in

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

Het werkte perfect.

Antwoord 5, autoriteit 13%

Ik heb dit probleem als volgt opgelost:

Als u ECMAScript 6-modules uit de browser gebruikt, gebruik dan de .js-extensie in uw bestanden en voeg in de scripttag type = "module" toe.

Als u ECMAScript 6-modules uit een Node.js-omgeving gebruikt, gebruik dan de extensie .mjs in uw bestanden en gebruik deze opdracht om het bestand uit te voeren:

node --experimental-modules filename.mjs

Bewerken: dit is geschreven toen node12 de nieuwste LTS was, dit is niet van toepassing op node 14 LTS.

Antwoord 6, autoriteit 10%

Ik heb mijn zaak opgelost door “importeren” te vervangen door “vereisen”.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Antwoord 7, autoriteit 9%

Ik weet niet of dit hier vanzelfsprekend is gebleken. Ik wil erop wijzen dat voor zover het client-side (browser) JavaScript betreft, u type="module" kunt toevoegen aan zowel externe als interne js-scripts.

Stel, je hebt een bestand ‘module.js’:

var a = 10;
export {a};

Je kunt het gebruiken in een extern script, waarin je de import doet, bijv.:

<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>

test.js:

import {a} from "./module.js";
alert(a);

Je kunt het ook in een intern script gebruiken, bijv.:

<!DOCTYPE html><html><body>
<script type="module">
    import {a} from "./module.js";
    alert(a);
</script>
</body></html>

Het is de moeite waard te vermelden dat u voor relatieve paden de "./" tekens, bijv.:

import {a} from "module.js";     // this won't work

Antwoord 8, autoriteit 5%

Voor mij werd het veroorzaakt voordat ik een bibliotheek verwees (met name typeORM, met behulp van het bestand ormconfig.js onder de sleutel entities ) naar de map src in plaats van de map dist…

   "entities": [
      "src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
   ],

in plaats van

   "entities": [
      "dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
   ],

Antwoord 9, autoriteit 2%

Ik codeer op vanilla js. Als u hetzelfde doet, voegt u gewoon een type="module" toe. naar uw scripttag.

Dat wil zeggen, vorige code:
<script src="./index.js"></script>

Bijgewerkte code:
<script type="module" src="./index.js"></script>

Antwoord 10, autoriteit 2%

Deze fout in REACT. volgende stappen

1. Ga naar Project Root Directory Package.json bestand

2. voeg "type":"module";

3. Sla het op en start de server opnieuw

Antwoord 11, autoriteit 2%

Toevoegen van de reden waarom dit gebeurt en meer mogelijke oorzaken. Veel interfaces begrijpen de syntaxis/functies van ES6 Javascript nog steeds niet, daarom moet Es6 naar ES5 worden gecompileerd wanneer het in een bestand of project wordt gebruikt. De mogelijke redenen voor de SyntaxError: Cannot use import statement outside a module error is dat u probeert het bestand onafhankelijk uit te voeren, u moet nog een Es6-compiler installeren en instellen, zoals Babel of het pad van het bestand in uw runscript is verkeerd/niet het gecompileerde bestand. Als u verder wilt gaan zonder compiler, is de best mogelijke oplossing om de ES5-syntaxis te gebruiken, in uw geval var ms = require(./ms.js); dit kan later indien nodig worden bijgewerkt of beter nog, stel uw compiler in en zorg ervoor dat uw bestand/project is gecompileerd voordat u het uitvoert en zorg er ook voor dat uw runscript het gecompileerde bestand uitvoert dat gewoonlijk dist, build of hoe u het ook noemt, en dat het pad naar het gecompileerde bestand in uw runscript correct is.

Antwoord 12

De fout wordt geactiveerd omdat het bestand waarnaar u linkt in uw HTML-bestand de ontbundelde versie van het bestand is.
Om de volledige gebundelde versie te krijgen, moet je deze installeren met npm:

npm install --save milsymbol

Hiermee wordt het volledige pakket gedownload naar uw map node_modules.

Je hebt dan toegang tot het zelfstandige verkleinde JavaScript-bestand op node_modules/milsymbol/dist/milsymbol.js

Je kunt dit in elke map doen en dan het onderstaande bestand naar je /src map kopiëren.

Antwoord 13

voor mij geholpen:

1. in ts-bestand gebruikt: import prompts from "prompts";
2. en gebruik "module": "commonjs" in tsconfig.json

Antwoord 14

TypeScript, Reageren, index.html

    //conf.js:
    window.bar = "bar";
   //index.html 
    <script type="module" src="./conf.js"></script>
    //tsconfig.json
    "include": ["typings-custom/**/*.ts"]
    //typings-custom/typings.d.ts
    declare var bar:string;
    //App.tsx
    console.log('bar', window.bar);
    or
    console.log('bar', bar);

Antwoord 15

Wat ik in mijn geval deed was updaten

"lib": [
      "es2020",
      "dom"
    ]

met

"lib": [
  "es2016",
  "dom"
]

in mijn tsconfig.json-bestand

Antwoord 16

Ik kwam deze fout tegen toen ik import express probeerde te gebruiken

In plaats van import express from 'express';

Ik gebruikte const express = require('express');

Hoop dat het werkt!

Antwoord 17

Omdat je niet hebt geëxporteerd, vereist het ts-bestand een exportklasse-indeling, terwijl we in het js-bestand de exportfunctie zouden gebruiken.

Dus we moeten var_name = require("<pathfile>") gebruiken om die bestandsfuncties te gebruiken.

Antwoord 18

gebruik deze code, het werkte goed voor mij:
voeg deze scripttag toe aan index.html

<script type="module">
    import { ms } from "./ms.js";
    import Symbol from "./ms/symbol.js";
</script>

Antwoord 19

Nou, in mijn geval,
Ik wilde mijn package.json-bestand niet bijwerken en het bestandstype wijzigen in mjs.
Dus ik keek rond en ontdekte dat het wijzigen van de module in tsconfig.json het resultaat beïnvloedde. mijn ts.config was

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
    ],
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*.ts"
  ]
}

vind dit leuk en verander de module
van
"module": "es2020" naar "module" : "commonjs" mijn probleem opgelost
Ik gebruikte mikroORM en dacht dat het misschien geen enkele module boven commonjs ondersteunt
Ik ben hier vrij nieuw in, dus als er misleidende informatie is, laat het me dan weten :).

Antwoord 20

Voeg gewoon .pack toe tussen de naam en de extensie in de <script>-tag in src.
d.w.z.:

<script src="name.pack.js">
// code here
</script>