TipTap 和 Nuxt - 无法从非 EcmaScript 模块导入命名导出“module”

Posted 2023-02-22

【中文标题】TipTap 和 Nuxt - 无法从非 EcmaScript 模块导入命名导出“module”

【英文标题】：TipTap and Nuxt - Can't import the named export 'module' from non EcmaScript moduleTipTap 和 Nuxt - 无法从非 EcmaScript 模块导入命名导出“module”

【发布时间】：2020-05-02 09:20:26

【问题描述】：

我正在尝试将TipTap 与Nuxt 一起使用，但似乎无法弄清楚为什么它不起作用。我已经阅读了 repo 上的问题并使用了他们的建议，但我得到了这些错误：

ERROR  in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-state/dist/index.mjs
Can't import the named export 'ReplaceStep' from non EcmaScript module (only default export is available)

ERROR  in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-view/dist/index.mjs
Can't import the named export 'Selection' from non EcmaScript module (only default export is available)

ERROR  in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-transform/dist/index.mjs
Can't import the named export 'Slice' from non EcmaScript module (only default export is available)

设置 我的设置非常简单，并与this github issue

相呼应

/components/forms/RichText.vue

<template>
  <no-s-s-r>
    <editor-content :editor="editor" />
  </no-s-s-r>
</template>

<script>
import  Editor, EditorContent  from 'tiptap'

export default 
  components: 
    EditorContent
  ,
  data () 
    return 
      editor: null
    
  ,
  mounted () 
    this.editor = new Editor(
      content: '<p>This is just a boring paragraph</p>'
    )
  ,
  beforeDestroy () 
    // Always destroy your editor instance when it's no longer needed
    this.editor.destroy()
  

</script>

/components/global/LocalisedAttributes.vue

<template>
<div>
    <rich-text />
  </div>
</template>

<script>
import RichText from '~/components/forms/RichText.vue'

export default 
  components: 
    RichText
  

</script>

我尝试在 nuxt.config.js 的 build.transpile 数组中添加 'prosemirror-view' 和 'tiptap' 但没有任何效果。

如果有人在 Nuxt 上使用它，我将不胜感激对他们的设置有任何见解。

【参考方案1】：

看起来这是 Lerna 的问题，我已切换到 yarn 工作区，现在似乎一切正常！