Sorry Ken,
I’ve been checking tiptap and they really want you to use ES modules in a best practice way.
If you are installing via npm and want to use them locally you would need to use a bundler like webpack/rollup/parcel/etc.
Using the files directly will only cause you pain and suffering. That’s because npm packages often use names as identifiers instead of file paths (like ‘@tiptap/core’). This would be resolved correctly by a bundler when building the project.
However if you really need to use ESM and don’t want to use a bundler you would have to use relative paths and point to the actual local file → index.js
import { Editor } from './@tiptap/core/dist/index.js'
import StarterKit from './@tiptap/starter-kit/dist/index.js'
But as I said this is a path of sorrow. You will most likely have to go through all the referenced files and change paths to relative routes.
So you have 4 options:
- Use a remote CDN version that already has been bundled for you. e.g. jsdelivr
- Use locally via npm and introduce a build step to bundle the files
- Use locally via npm and change all the named packages to relative paths → Pain and sorrow.
- Build from source for your needs.
For 4) here you have a GH repo that has all the files you need to build a browser version:
It basically imports core and starter-kit and attaches them to the window object. He then bundles them with Esbuild and he gets a single file ready to be used in a script tag.
Maybe @patrick has some ideas on how you could use Tiptap library locally without a bundler.
You can vote this one to have all this supported: