Error ... Nuxt

[devmnj]

Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method 
that returns an iterator.

end up with this error while trying to import the plugin

[command-tab]

I'm encountering this (and similar) issues under Nuxt 2.15.8 as well.

$ yarn dev
yarn run v1.22.17
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                       18:45:10
ℹ Initial build may take a while                                                                                                                                                                          18:45:10
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                       18:45:10
✔ Builder initialized                                                                                                                                                                                     18:45:10
✔ Nuxt files generated                                                                                                                                                                                    18:45:10

✔ Client
  Compiled successfully in 3.20s

✔ Server
  Compiled successfully in 2.69s

ℹ Waiting for file changes                                                                                                                                                                                18:45:14
ℹ Memory usage: 159 MB (RSS: 292 MB)                                                                                                                                                                      18:45:14
ℹ Listening on: http://localhost:3000/                                                                                                                                                                    18:45:14

 ERROR  ERROR in node_modules/slate-vue/index.ts:2:21                                                                                                                                                     18:45:14
TS6142: Module './components/slate' was resolved to '/Users/Projects/slate-vue-test-tsx/node_modules/slate-vue/components/slate.tsx', but '--jsx' is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to '/Users/Projects/slate-vue-test-tsx/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to '/Users/Projects/slate-vue-test-tsx/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:424:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    422 |         const removals = [
    423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
  > 424 |           ...contents.querySelectorAll('[contenteditable=false]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    425 |         ]
    426 |
    427 |         removals.forEach(el => {

To get even get this far, I had to explicitly configure the Nuxt application to use TypeScript, but it seems like the dist version of this library should offer plain old JavaScript such that applications aren't required to add TypeScript support, but that's a separate issue.

[gustavotoyota]

Same problem here:

yarn dev
yarn run v1.22.17
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

i Preparing project for development                                                                                                  08:10:48
i Initial build may take a while                                                                                                     08:10:48
i Discovered Components: .nuxt/components/readme.md                                                                                  08:10:48
√ Builder initialized                                                                                                                08:10:48
√ Nuxt files generated                                                                                                               08:10:48

√ Client
  Compiled successfully in 13.44s

* Server █████████████████████████ building (22%) 106/108 modules 2 active
 babel-loader » node_modules\vue-tsx-support\dist\cjs\modifiers.js


                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

√ Client
  Compiled successfully in 13.44s

* Server █████████████████████████ building (22%) 107/108 modules 1 active
 babel-loader » node_modules\vue-tsx-support\dist\cjs\modifiers.js


                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

√ Client
  Compiled successfully in 13.44s

* Server █████████████████████████ record modules (87%)



                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

√ Client
  Compiled successfully in 13.44s

* Server █████████████████████████ after chunk asset optimization (93%) SourceMapDevToolPlugin pages/index.js
 generate SourceMap


                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

√ Client
  Compiled successfully in 13.44s

√ Server
  


                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

√ Client
  Compiled successfully in 13.44s

√ Server
  Compiled successfully in 14.53s


                                                                                08:11:05
TS6142: Module './components/slate' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/slate.tsx', but '--jsx' 
is not set.
    1 | import './types'
  > 2 | export {Slate} from "./components/slate"
      |                     ^^^^^^^^^^^^^^^^^^^^
    3 | export {Editable} from "./components/editable"
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'

ERROR in node_modules/slate-vue/index.ts:3:24
TS6142: Module './components/editable' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/editable.tsx', but '--jsx' is not set.
    1 | import './types'
    2 | export {Slate} from "./components/slate"
  > 3 | export {Editable} from "./components/editable"
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    4 | export {fragment} from './components/fragment'
    5 | export * from './plugins'
    6 |

ERROR in node_modules/slate-vue/index.ts:4:24
TS6142: Module './components/fragment' was resolved to 'C:/Users/gusta/Desktop/Research/node_modules/slate-vue/components/fragment.tsx', but '--jsx' is not set.
    2 | export {Slate} from "./components/slate"
    3 | export {Editable} from "./components/editable"
  > 4 | export {fragment} from './components/fragment'
      |                        ^^^^^^^^^^^^^^^^^^^^^^^
    5 | export * from './plugins'
    6 |
    7 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:423:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    421 |         const contents = range.cloneContents()
    422 |         const removals = [
  > 423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    424 |           ...contents.querySelectorAll('[contenteditable=false]'),
    425 |         ]
    426 |

ERROR in node_modules/slate-vue/plugins/vue-editor.ts:424:14
TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
    422 |         const removals = [
    423 |           ...contents.querySelectorAll('[data-slate-zero-width]'),
  > 424 |           ...contents.querySelectorAll('[contenteditable=false]'),
        |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    425 |         ]
    426 |
    427 |         removals.forEach(el => {


i Waiting for file changes                                                                                                           08:11:06
i Memory usage: 211 MB (RSS: 286 MB)                                                                                                 08:11:06  
i Listening on: http://localhost:3000/                                                                                               08:11:06