Having trouble importing the named export `{module}` from a non-ECMAScript module with TipTap and Nuxt?

I'm using TipTap with Nuxt and running into some issues that I can't seem to resolve. Despite following suggestions from the repository's issues, I keep encountering these specific errors:

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)

Set up
My current setup aligns with this github issue

/components/forms/RichText.vue

<template>
  <no-ssr>
    <editor-content :editor="editor" />
  </no-ssr>
</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>

Even after adding 'prosemirror-view' and 'tiptap' to the build.transpile array in nuxt.config.js, the issue persists. If anyone has successfully implemented TipTap on Nuxt, any guidance on the setup would be highly appreciated.

javascriptvue.jsvue-componentnuxt.js

Answer №1

After troubleshooting the problem, it turns out that Lerna was causing issues. I decided to make the switch to yarn workspaces and it appears to have resolved the issue!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dropdown options with JSON and Angular

This dilemma has been causing me no end of distress. I am trying to figure out how to populate options for a select tag from a JSON object using Angular. Here is a snippet of the code: <select id="cargo" ng-model="cargo.values.cargoList"> <op ...

javascriptjsonangularjshtml-select

Ways to initiate a page redirection within the componentWillReceiveProps lifecycle method

When my webpage or component generates a form and sends it to the backend API upon submission, I receive an object in return if the process is successful. This object is then added to my redux store. In order to determine whether the reducer successfully ...

javascriptreactjsreduxreact-routerreact-redux

In JavaScript, apply a red color style to an appended list item every third time it is added

It should be something like this: <ul id="list"> <li>1</li> <li>2</li> <li style="color: red;">3</li> <- Text should be red ... <li style="color: red;">6</li> <- red ...

javascript

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

javascriptnode.jsreactjspostaxios

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

javascriptjqueryhtmlcssangularjs

The necessary directive controller is missing from the element in the current DOM structure

Can anyone explain the meaning of "required directive controller is not present on the current DOM element"? I encountered this error and would like some clarity. For reference, here is the link to the error: https://docs.angularjs.org/error/$compile/ctr ...

javascriptangularjs

Tampermonkey's .click() function appears to be malfunctioning

I am attempting to automate clicking a button in Tampermonkey, but for some reason the code is not working as expected. Interestingly, when I manually run the code in the console, it functions perfectly. Here is the snippet: $(document).ready(function() ...

javascriptjquerytampermonkey

Is there a way to convert my function into a variable in order to execute an array of statements

I'm struggling to convert this code into a variable. I need to bind it inside a statement execute array. This is the code I am working on, which retrieves the current date and timezone. I attempted using $date = function() {}, echo $date(); but that ...

javascriptphpfunctiondate

Issue with BCRYPTJS library: generating identical hashes for distinct passwords

After conducting a thorough search on Google, I couldn't find anyone else experiencing the same issue. The problem lies in the fact that no matter what password the user enters, the system returns the hashed value as if it is the correct password. Eve ...

javascriptnode.jsbcrypt

Enhancing Bootstrap Slider Range with jQuery/Javascript

Currently, I have incorporated the Bootstrap slider into a webpage that features two sliders on a single page. The range of the second slider depends on the value of the first one. It is crucial for me to be able to update the range of the second slider af ...

javascriptjqueryhtmlcsstwitter-bootstrap

Calculating with nested arrays in Vue.jscomputed functions

After coming from a background using Knockout.js, I am considering exploring Vue.js for my upcoming projects. One aspect that has confused me is implementing computed functions on nested arrays of data. Imagine we retrieve this data structure from an ajax ...

knockout.jsvue.js

Can we iterate through an array containing arrays of objects in a loop?

Here is an example of how I want my solution to appear: Currently, I have created an array where I group items by their first letter, like this: const grouped = _.groupBy(topicPages, key => key.relatedTopic.title[0]); Resulting in the following: Now, ...

javascriptreactjs

Loading asynchronous select options with a knockout observable array

I have an ajax-based asynchronous loader for select options. It accepts a remote address and returns an observable array that is correctly populated with descriptions and key values to be used in the following binding. <select data-bind="value: select ...

javascriptajaxknockout.jsko.observablearrayhtml-select

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

Create static HTML files using an Express server

Recently, I developed a nodejs web project using express-js and ejs. However, upon further reflection, it occurred to me that hosting it as static html files on Netlify might be more cost-effective than running it as a nodejs app on Heroku. Since the data ...

javascriptnode.jsexpressnpmnetlify

Incorrect credentials trigger an error in Nodemailer

Currently, I am utilizing nodemailer to handle email submissions from a registration form. Below is the code for my registration form: <form action="/registration" method="post"> <h3 class="text-center" style="font-family: 'champagne-l ...

javascriptnode.jsnodemailer

`vuejs datepicker template organization revamp`

I tried to incorporate a Vue.js datepicker into my Vue template, but when I added the component, it caused my template layout to shift from right to left and affect other HTML elements. Here is an image of my template before adding the datepicker: This i ...

vue.jsvuejs-datepicker

Is there a way to set it up so that my section remains hidden until the submit button is pressed, rather than disappearing every time I input a single character?

How can I modify the behavior in vue.js so that a certain section is hidden only after the user clicks on the submit button? Currently, the section disappears every time a single letter is entered. I want the visibility toggling with V-if and V-else to o ...

vue.js

Encountering an issue when attempting to update by pressing the button

I am encountering a challenge in my Vue application that involves inserting, updating, and deleting posts using MongoDB. Specifically, I am facing an issue with the update function. Whenever I attempt to update a post by clicking the corresponding button, ...

javascriptmongodbvue.jsfetch-api

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

I am currently working on a project using react, redux, and material ui. I need to retrieve data from a TextField in order to make an order. The code snippet below showcases my current implementation: <Select value={product.color_set[0].title}> { ...

javascriptreactjsreduxreact-reduxmaterial-ui