我有一个使用 React + Typescript + Nextjs 没有错误的项目，但是当我安装并尝试使用时，我收到以下错误：
尝试导入错误：“cloneElement”未从“react”导出。
在 .next/build-manifest.json 中找不到 /index 的文件
ModuleDependencyError：“在'react'中找不到导出'cloneElement'
这是我的package.json：
{
"name": "normma",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/preset-typescript": "^7.8.0",
"@brazilian-utils/is-valid-cpf": "^1.0.0-alpha.3",
"@deck.gl/core": "^8.0.15",
"@deck.gl/layers": "^8.0.15",
"@deck.gl/react": "^8.0.15",
"@rollup/plugin-commonjs": "^11.0.2",
"@sentry/browser": "^5.11.2",
"@stripe/react-stripe-js": "^1.0.0-beta.5",
"@testing-library/react": "^9.4.0",
"@types/canvas-confetti": "^0.1.0",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/firebase": "^3.2.1",
"@types/react-geosuggest": "^2.7.10",
"@types/react-map-gl": "^5.2.0",
"@types/react-select": "^3.0.10",
"@types/react-stripe-elements": "^6.0.3",
"amplitude-js": "^5.8.0",
"canvas-confetti": "^1.0.3",
"charming": "^3.0.1",
"cross-env": "^6.0.3",
"deck.gl": "^8.0.15",
"eslint-import-resolver-typescript": "^2.0.0",
"firebase": "^7.6.2",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.0.0",
"isomorphic-unfetch": "^3.0.0",
"jest": "^24.9.0",
"jimp": "^0.9.3",
"next": "^9.2.1",
"next-compose-plugins": "^2.2.0",
"next-offline": "^5.0.0-beta.9",
"next-optimized-images": "^2.5.4",
"next-transpile-modules": "^3.0.2",
"react": "^16.12.0",
"react-day-picker": "^7.4.0",
"react-dom": "^16.12.0",
"react-geosuggest": "^2.12.1",
"react-hook-form": "^4.4.8",
"react-map-gl": "^5.2.3",
"react-modal": "^3.11.1",
"react-modal-hook": "^2.0.0",
"react-responsive": "8.0.1",
"react-select": "^3.0.8",
"react-spring": "^9.0.0-beta.34",
"react-text-mask": "^5.4.3",
"react-transition-group": "^4.3.0",
"responsive-loader": "^1.2.0",
"rollup-plugin-commonjs": "^10.1.0",
"styled-components": "^5.0.0",
"text-mask-addons": "^3.8.0",
"ts-jest": "^24.3.0",
"typescript": "^3.7.4",
"uifx": "^2.0.7",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.8.0",
"@next/bundle-analyzer": "^9.1.7",
"@testing-library/jest-dom": "^5.0.2",
"@types/amplitude-js": "^4.4.5",
"@types/enzyme": "^3.10.4",
"@types/jest": "^24.0.25",
"@types/node": "^13.1.6",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-modal": "^3.10.3",
"@types/react-responsive": "^8.0.2",
"@types/react-router-dom": "^5.1.3",
"@types/react-test-renderer": "^16.9.1",
"@types/react-text-mask": "^5.4.6",
"@types/react-transition-group": "^4.2.3",
"@types/styled-components": "^4.4.2",
"@typescript-eslint/eslint-plugin": "^2.16.0",
"@typescript-eslint/parser": "^2.16.0",
"@zeit/next-source-maps": "0.0.4-canary.1",
"babel-jest": "^24.9.0",
"babel-plugin-object-to-json-parse": "^0.0.9",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "18.0.1",
"eslint-config-prettier": "^6.9.0",
"eslint-config-react-app": "^5.1.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.17.0",
"ignore-loader": "^0.1.2",
"jest-canvas-mock": "^2.2.0",
"jest-styled-components": "^7.0.0",
"react-test-renderer": "^16.12.0"
},
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start",
"test": "jest",
"lint": "eslint './**/**.{ts,tsx,js}'",
"deploy": "now",
"analyze": "cross-env ANALYZE=true npm run build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server npm run build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser npm run build"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import DeckGL from '@deck.gl/react';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import { LineLayer } from '@deck.gl/layers';
// Viewport settings
const viewState = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0,
};
// Data to be used by t he LineLayer
const data = [{ sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781] }];
// return (
// <DeckGL viewState={viewState} layers={layers} />
// );
const Home = () => {
const layers = [
new LineLayer({ id: 'line-layer', data }),
];
return <DeckGL viewState={viewState} layers={layers} />;
};
export default Home;