React Next 的 Openlayers 编译错误

Question

我在 React 中使用 openlayers 库 Next.Adding 在 npm 中使用 openlayers 库。但是当我导入 "import Map 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)

我没有在 next.config.js 和 .babelrc files.How 中做任何事情来解决错误？

注意：Openlayers，使用经典的 React。

沙盒 link 在这里：https://codesandbox.io/s/react-openlayers-7r04v

谢谢，

Answer 1

似乎 ol 在服务器端不起作用，因为它需要 window 之类的东西，所以你需要这样做

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

React Next 的 Openlayers 编译错误

Openlayers compilation error with React Next

reactjs

next.js