导入ECMAScript 6时“Uncaught SyntaxError: Cannot use import statement outside a module”

我正在使用ArcGIS JSAPI 4.12，希望使用空间幻象在地图上绘制军事符号。

当我将milsymbol.js添加到脚本中时，控制台返回错误

无法在模块外部使用import语句

所以我添加type="module"到脚本中，然后它返回

Uncaught ReferenceError: ms未定义

这是我的代码:

<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>

所以，无论我是否添加type="module"，总会有错误。但是在Spatial Illusions的官方文档中，脚本中没有type="module"。我现在真的很困惑。他们如何在不添加类型的情况下让它工作呢?

文件milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

当前回答

对我来说，这是一个编译问题。我已经添加了

  "devDependencies": {
    ...
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/node": "^7.7.4",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-instanceof": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.5",
    "@babel/register": "^7.7.4",
    "@babel/runtime": "^7.9.6"
  },


  "dependencies": {
    ...
    "@babel/plugin-transform-classes": "^7.15.4"
  },

增加了.babelrc文件

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-instanceof",
    "@babel/plugin-transform-classes"
  ],
  "presets": ["@babel/preset-env"],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-runtime"]
    }
  }
}

2022-07-08 21:14:58

其他回答

如果你想从模块中导入函数。比方说，main。js定义了func1和func2，你想把它们导入到一个新的模块test.js中

下面将解决这个问题。

main.js:

const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};

//at the end of module
//export specific functions here
module.exports = { func1, func2 };

. js:

// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

2022-12-02 00:45:16

对我来说，这是一个编译问题。我已经添加了

  "devDependencies": {
    ...
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/node": "^7.7.4",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-instanceof": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.5",
    "@babel/register": "^7.7.4",
    "@babel/runtime": "^7.9.6"
  },


  "dependencies": {
    ...
    "@babel/plugin-transform-classes": "^7.15.4"
  },

增加了.babelrc文件

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-instanceof",
    "@babel/plugin-transform-classes"
  ],
  "presets": ["@babel/preset-env"],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-runtime"]
    }
  }
}

2022-07-08 21:14:58

有几种常见的方法可以解决与上述问题相关的冲突

1. 第一个:在脚本中，包含type=module

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

2. 第二种:在node.js中，放入你的包中。json文件

    {
       
        "type": "module",
       
    }

重新启动项目npm start

3.第三:按要求替换导入

试试这个

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

否则试试这个

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

2021-11-09 13:33:21

更新Node.js / NPM

在你的包中添加"type": "module"。json文件。

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

注意:当使用模块时，如果你没有定义ReferenceError: require，你将需要使用import语法而不是require。您不能在它们之间进行混合和匹配，因此您需要选择其中之一，如果需要使用两者，则使用捆绑器。

2020-11-03 00:27:30

我也面临着同样的问题，直到我在脚本中添加type="module"。

以前是这样的

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

在把它改成

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

它工作得很完美。

2020-04-03 15:59:05

导入ECMAScript 6时“Uncaught SyntaxError: Cannot use import statement outside a module”

推荐文章

最新文章

标签