Tiptap: Module not found: Error: Can't resolve 'Components/Icon'

[strixy]

I get this error in two environments (I've only tried two).

Working environment One

• Electron-Vue
• Node 11.4.0
• Yarn 1.12.3 (I've also tried with npm 6.4.1)
• Linux Mint 18

Starting with a base/pure install of Electron-Vue.

Installed Tiptap as per instructions here in the readme (yarn version)
yarn add tiptap

Added tiptap-extensions
yarn add tiptap-extensions

Copy pasted the code from the Basic example into the default LandingPage.vue component file provided by the electron-vue package.

I get the following error.

``` ERROR in ./src/renderer/components/Editor.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/Editor.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'Components/Icon' in '/home/me/temp/src/renderer/components'
@ ./src/renderer/components/Editor.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/Editor.vue?vue&type=script&lang=js&) 3:0-35 11:10-14
@ ./src/renderer/components/Editor.vue?vue&type=script&lang=js&
@ ./src/renderer/components/Editor.vue
@ ./src/renderer/router/index.js
@ ./src/renderer/main.js
@ multi ./.electron-vue/dev-client ./src/renderer/main.js

### Working Environment Two
Same environment as above only without electron and opting for a basic vue cli install, web.

vue create my-project
vue init webpack .
yarn run dev (I've also tried with npm 6.4.1)

Then copy paste the example code into the default HelloWorld.vue file. Error..

Failed to compile.
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue
Module not found: Error: Can't resolve 'Components/Icon' in '/home/me/vuetest/src/components'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue 43:0-35
@ ./src/components/HelloWorld.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js```

[profyt]

Icon this is component which insert icon in menu bar, you can find this in example/component and import in your project.

[philippkuehn]

You are using the <icon> component. That‘s only part of the examples. Use your own component or just a text label for that.

[strixy]

May I suggest adding examples that work out of the box?

[philippkuehn]

Maybe you missed one important line in all of the examples:
import Icon from 'Components/Icon'

[strixy]

Maybe. I'll double check.

[strixy]

Your suggestion was good. The issue was that I was expecting Icon.vue to be included, but it wasn't (which makes sense in hindsight). Going into /examples/Components/Icon I was able to find an example Icon.vue component. I moved it into my src/components and changed import Icon from 'Components/Icon' to import Icon from './components/Icon' (Note the case differences). The provided examples now work (mostly) with that one change. ie. the error is gone and styles are applied to selected text as expected, but there are no visible icons (which should be expected). Getting the icons to show would require moving the assets in /example/assets over to the root src - OR (as is recommended above) to develop a complete component for myself (which, again, makes perfect sense). It seems the intention with the examples provided is to be inspirational. Something one can draw on to assist with the integration of this project into an existing product as opposed to quickly spinning something up to play with for evaluation purposes. My expectations were clearly around the later use case. I am guilty of being overly excited to play with this cool new toy it would appear. Sorry about that. Maybe my post will help others spin up an evaluation quickly in the future. Cheers!

[egeersoz]

Yeah, it's disappointing that the examples don't work "out of the box", and require manually copying assets from inside the library to the project space. That means if I decide to use another rich text editor (which is looking more and more likely), I need to also remember to delete the Icon component.

[philippkuehn]

@egeersoz Yeah then maybe tiptap is not the best tool for you. It's renderless so every user has to build the complete UI for it. This is part of the key concept of tiptap.

[emerg]

Philip,

This is a great tool. I'm happy that it's renderless and that I have complete control over almost every aspect of the package. However, I think it would be beneficial to have one instance of the component which is complete and functional out of the box as the example on the home page is, with some simple css included. I've spent several hours now trying to figure out how to get the icons to appear successfully, and at this point, I'm still not sure what I'm doing wrong. And I'm a developer with close to 10 years experience. Initializing the component in the basic usage example yields almost nothing to what is actually shown on the homepage, and any documentation around the examples and how to make them actually work like what is shown, is slim to none. Right now I'm currently digging though all the source code and having to import things into different locations, rename file paths, and continuously working through resolving errors of missing components or references, and to be honest, it's a waste of time. While I can certainly appreciate the amount of effort it has taken you to develop this package, I think the fact that there's not at least one bundled ready-to-go component is probably hurting the growth of this project.

[singhgursharnbir]

@philippkuehn great tool.. I had this issue because I was expecting icons to work out of box but It make total sense to just use our own icons.

For anyone coming here this is all you have to do

• Find Icons in example code like ' <icon name="italic" /> '
• Replace them with your fav icons like for me ' <i class="fa fa-italic"></i> '
• Then remove import for icons

Thats it.. it will work

[ramshorst]

Great project ! I believe that the fact that TipTap is renderless is awesome.
I believe the most effective way to speed up setup time for people would be to include or refer to a suitable icon font in the examples so people can choose to use that or not.