Reactjs 带有React Next的Openlayers编译错误

Reactjs 带有React Next的Openlayers编译错误,reactjs,next.js,Reactjs,Next.js,我正在使用带有React Next的openlayers库。添加带有npm的openlayers库。但是当我导入“importmap from'ol/Map'”库时,我得到了以下错误 import PluggableMap from './PluggableMap.js'; ^^^^^^^^^^^^ SyntaxError: Unexpected identifier at new Script (vm.js:80:7) at createScript (vm.js:274:10)

我正在使用带有React Next的openlayers库。添加带有npm的openlayers库。但是当我导入“importmap from'ol/Map'”库时,我得到了以下错误

import PluggableMap from './PluggableMap.js';
       ^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.ol/Map.js     at Object.ol/Map.js (<path>\.next\server\static\development\pages\index.js:1730:18)
at __webpack_require__ (<path>\.next\server\static\development\pages\index.js:23:31)
at Module../components/mappanel/map.js (<path>\.next\server\static\development\pages\index.js:557:67)
at __webpack_require__ (<path>\.next\server\static\development\pages\index.js:23:31)
at Module../pages/index.js (<path>\.next\server\static\development\pages\index.js:1302:83)
at __webpack_require__ <path>\.next\server\static\development\pages\index.js:23:31)
从“./PluggableMap.js”导入PluggableMap;
^^^^^^^^^^^^
SyntaxError:意外的标识符
在新脚本中(vm.js:80:7)
在createScript上(vm.js:274:10)
在Object.runInThisContext(vm.js:326:10)
at模块编译(内部/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js(internal/modules/cjs/loader.js:712:10)
at Module.load(内部/modules/cjs/loader.js:600:32)
在tryModuleLoad(内部/modules/cjs/loader.js:539:12)
at Function.Module._load(内部/modules/cjs/loader.js:531:3)
at Module.require(内部/modules/cjs/loader.js:637:17)
根据需要(内部/modules/cjs/helpers.js:22:18)
位于Object.ol/Map.js的Object.ol/Map.js(\.next\server\static\development\pages\index.js:1730:18)
在“网页包”中,需要(\.next\server\static\development\pages\index.js:23:31)
位于Module../components/mappanel/map.js(\.next\server\static\development\pages\index.js:557:67)
在“网页包”中,需要(\.next\server\static\development\pages\index.js:23:31)
在Module../pages/index.js(\.next\server\static\development\pages\index.js:1302:83)
在uuu webpack_uurequire_uuuu\.next\server\static\development\pages\index.js:23:31)
我没有在next.config.js和.babelrc文件中执行任何操作。如何解决此错误

注意:Openlayers,使用classic react

沙盒链接在这里:


谢谢,

似乎
ol
在服务器端不起作用,因为它需要窗口之类的东西,所以您需要这样做

componentDidMount() {
   const map = require("ol/Map").default;
}

似乎
ol
在服务器端不起作用,因为它需要窗口和类似的东西,所以您需要这样做

componentDidMount() {
   const map = require("ol/Map").default;
}

我不能复制。尝试在中创建一个最小复制示例codesandbox@evgenifotia我在问题中添加了沙盒链接,所以它以前对我有效,因为我没有重新启动服务器。我无法复制。尝试在中创建一个最小复制示例codesandbox@evgenifotia我在问题中添加了沙盒链接,因此它以前对我有效,因为我没有重新启动服务器。@lkayTaşkıran如果这能解决您的问题,请将答案标记为已回答✔@如果这能解决您的问题,请将答案标记为已回答✔