导入声明只能出现在模块的顶层 [英] Import declarations may only appear at top level of a module

问题描述

我正在尝试在计算机上设置OpenLayers，并按照此处的说明进行操作: http://openlayers.org/en/latest/doc/tutorials/bundle.html

I am trying to setup OpenLayers on my computer, and am following the directions here: http://openlayers.org/en/latest/doc/tutorials/bundle.html

当我尝试在浏览器中运行它时，出现错误:
导入声明只能出现在模块的顶层

When I try to run it in my browser I get error:
import declarations may only appear at top level of a module

我该如何解决?

index.js:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

推荐答案

该错误明确指出.js文件中的某处存在导入语句:

The error clearly states that somewhere in your .js files there is an import statement:

import something from 'some-package'

该import语句不在模块的最顶部，例如:

And that import statement is not at the very top of the module e.g.:

someExpressionHere(); // This must be moved below import statement
import something from 'some-package'

UPD: 与OP聊天后，实际问题不是在进行css模块导入时构建项目(不捆绑).

UPD: After chatting with OP, the actual problem was not building the project (not bundling), when there was a css module import.

这篇关于导入声明只能出现在模块的顶层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！