Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm new to npm and I'm trying to use tiptap in my project. The problem is that after I try to import tiptap , it raises error. This is what I did:

Then I added this to main.js

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
npm install tiptap
Then I added import { Editor, EditorContent } from 'tiptap' to App.vue and it started raising error:
<template>
  <div> ... SOME CODE ...
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
  name: 'App'
</script>
ERROR
Failed to compile.
./node_modules/tiptap/dist/tiptap.esm.js
Module parse failed: Unexpected token (126:23)
You may need an appropriate loader to handle this file type.
|     } = this.node;
|     const pos = this.getPos();
|     const newAttrs = { ...this.node.attrs,
|       ...attrs
|     };
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 46:0-47
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Do you know what to do?
EDIT - package.json
  "name": "frontend",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  "dependencies": {
    "ajv": "^6.0.1",
    "tiptap": "^1.32.1",
    "vue": "^2.5.2",
    "vuetify": "^2.4.7"
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
                Try out sudo npm install -g vue-cli, vue create frontend, vue add vuetify then npm i tiptap
– Boussadjra Brahim
                Mar 20, 2021 at 13:11
To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using
  vue add vuetify
then install tiptap :
 npm i tiptap
and use as explained in official docs
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.