Question

我正在尝试这样做：

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)

对此我能做些什么？只有在浏览器中时，才需要加载键盘。不是在构建期间。

Answer 1

您应使用React.lazy作为组件，并使用require()。

借助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');
}

请参见import vs require
此外，您应该检查import()。

Answer 2

您可以使用动态导入语法

const Keyboard = import（'react-simple-keyboard'）

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

Answer 3

Gatsby 支持开箱即用的动态导入。

useEffect(() => {
  async function dynamicImportModule() {
    const dynamicModule = (await import('some-module'))
    // perform remaining tasks with dynamicModule
  }

  dynamicImportModule()
}, [someDependency])

有条件导入盖茨比图书馆

3 个答案: