Use a Node module in a public JS file in a Laravel app

Question

I want to use https://github.com/ueberdosis/tiptap in my Laravel app.

I did an npm install @tiptap/core @tiptap/starter-kit and the modules are installed fine and visible in my node_modules folder. Then, I added

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

to my resources/js/apps.js and ran an npm run dev. I can see some tiptap code in my public/js/app.js file.

I would like to instantiate a tiptap class from another public JS file:

which didn't come out of webpack
which I declared with a <script type="module" src="{{ asset('js/tiptap.js') }}"></script> in my Blade file
which contains following:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
  ],
  content: '<p>Hello World!</p>',
})

but I just get a Uncaught TypeError: Failed to resolve module specifier "@tiptap/core". Relative references must start with either "/", "./", or "../". in the console.

So yeah, wrong path for the import most likely. I tried to change it to './app.js@tiptap/core' and other variations but always end up with a 404 Not found.

I feel like I'm maybe doing the wrong way maybe, I don't know. Would you guys have any tips on how to do that ?

would you like to share resources, and public folder structure? — Saied Islam Shuvo
– Saied Islam Shuvo, Commented Apr 28, 2022 at 14:33
@SaiedIslamShuvo I have a typical Laravel folder structure. What would you need to know? — SaladeDeFruits
– SaladeDeFruits, Commented Apr 28, 2022 at 14:42
If you're using webpack its much easier just adding the tiptap.js to the resources folder and adding it to webpack. Why do you want to add it to a js file that doesn't come out of webpack? — John Zwarthoed
– John Zwarthoed, Commented Apr 28, 2022 at 14:51
@JohnZwarthoed because I need to instantiate classes of the package from a Blade file and I don't know how to do that if the classes are inside the bundled app.js file so I'm putting all my JS code in public files directly to circumvent that... I saw that you can prefix function with "window." before Webpack so that they would be available globally after but it seems kind of hacky to me to put window. everywhere in my code. — SaladeDeFruits
– SaladeDeFruits, Commented Apr 28, 2022 at 18:08
asset() function takes the argument as a relative path from public or resources, so check tiptap.js path where can you find — Saied Islam Shuvo
– Saied Islam Shuvo, Commented Apr 28, 2022 at 22:04

Joseph · Accepted Answer · 2022-04-28 14:41:46Z

1

You can't access a package from outside because when webpack built it for you it encapsulates the file as a bundle so to be able to access it you could create another js file in the resources/js after that include it inside the app.js to be bundled with webpack like this

// hello.js
console.log("welcome from hello script")

// app.js
require('./hello.js')

answered Apr 28, 2022 at 14:41

Joseph

6,3273 gold badges24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SaladeDeFruits Over a year ago

Thank you for your answer. So just to be sure, what you're saying is that I can only call the package classes from a JS file in resources/js ?

Joseph Over a year ago

yes , for sure.

Collectives™ on Stack Overflow

Use a Node module in a public JS file in a Laravel app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related