Conditional Import of Library in Gatsby

Question

I am trying to do this:

if (typeof window !== `undefined`) {
  import Keyboard from "react-simple-keyboard"
  import "react-simple-keyboard/build/css/index.css"
}

But I get

'import' and 'export' may only appear at the top level (12:2)

Anything I can do about this? I need to load my keyboard only if we're in the browser. Not during build.

score 1 · Accepted Answer · answered Jul 21 '20 at 11:24

1

You should use React.lazy for the component, and require().

The React.lazy function lets you render a dynamic import as a regular component.

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 vs require
Moreover, you should check for import().

answered Jul 21 '20 at 11:24

Dennis Vash

42,190
6
81
99

Thanks a lot. This does let me build it. But I get an `illegal constructor` error when I run it any idea why this might be? would I do this type of import where I do the other imports (that's where I put it so far)? – userjmillohara Jul 21 '20 at 12:12
I don't know and its not related to your question, you should ask a new question with your current problem. – Dennis Vash Jul 21 '20 at 12:13
It is related. I am asking you where in my code I need to put the code that you suggested. Next to the other imports? In a function? Right now it's crashing, unfortunately. – userjmillohara Jul 21 '20 at 12:16
You put it instead of your current your code, that's how you make dynamic imports. I can't tell your exactly in which file, I can't know your project structure. – Dennis Vash Jul 21 '20 at 12:18
That's fine. I don't need to know which file. Thanks a lot for your answer. – userjmillohara Jul 21 '20 at 12:19

score 0 · Answer 2 · answered Jul 21 '20 at 11:24

0

You may use the dynamic import syntax

const Keyboard = import('react-simple-keyboard')

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

answered Jul 21 '20 at 11:24

lotype

540
3
8

score 0 · Answer 3 · answered Apr 01 '21 at 11:43

0

Gatsby supports dynamic imports out of the box.

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

  dynamicImportModule()
}, [someDependency])

answered Apr 01 '21 at 11:43

ED209

2,312
1
13
13

I always end up with a "MyComponent is not defined" when in the useEffect – yankeedoodle Mar 22 '22 at 17:40

Conditional Import of Library in Gatsby

3 Answers3

Linked

Related