我正在尝试这样做：
if (typeof window !== `undefined`) {
import Keyboard from "react-simple-keyboard"
import "react-simple-keyboard/build/css/index.css"
}
但我得到
'import' and 'export' may only appear at the top level (12:2)
对此我能做些什么吗？仅当我们在浏览器中时，我才需要加载键盘。不在构建期间。
你应该使用React.lazy对于组件，以及require().
The React.lazy函数允许您将动态导入呈现为常规组件。
if (typeof window !== `undefined`) {
import Keyboard from "react-simple-keyboard"
import "react-simple-keyboard/build/css/index.css"
}
// Becomes
if (typeof window !== `undefined`) {
// Component
const Keyboard = React.lazy(() => import('react-simple-keyboard'));
// Resolve
require('react-simple-keyboard/build/css/index.css');
}
- See 导入与需要
- 此外，您应该检查import().
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
