Importing tom-select with Vite

I'm trying to get tom-select working with Laravel.

I've done npm install tom-select and I've added the imports as below:

app.js:

import TomSelect from 'tom-select'
window.TomSelect = TomSelect

app.css:

@import '/node_modules/tom-select/dist/css/tom-select.default.css';

Then I am using it as below in a blade file:

<script>
new TomSelect("#select-tags",{maxItems: 3});
</script>

I'm hitting up against the following errors which seem to indicate that the page isn't seeing the import or the CSS file:

Uncaught ReferenceError: TomSelect is not defined

Source map error: Error: request failed with status 404 Resource URL: http://127.0.0.1:5173/resources/css/app.css Source Map URL: app.css.map

The app.css itself is fine as I am able to utilise the tailwind and custom CSS inside. It's just the tom-select CSS that it can't find.

I'm running npm run dev so it's not that.

Any ideas?

Level 58

It looks like the issue is with the path to the CSS file. Try changing the import statement in your app.css file to:

@import '~tom-select/dist/css/tom-select.default.css';

The tilde (~) tells Vite to look in the node_modules directory for the package.

Also, make sure that you are including the app.css file in your HTML file.

If that doesn't work, try importing the CSS file in your app.js file instead:

import 'tom-select/dist/css/tom-select.default.css';
import TomSelect from 'tom-select';
window.TomSelect = TomSelect;

Then remove the CSS import statement from your app.css file.

Hopefully one of these solutions works for you!

Level 1

@LaryAI The second one fixed the CSS import it seems. Still not joy with the JS import though

Level 1

Got it! When using inline scripts you should specify that the type is a module:

<script type='module'>
new TomSelect();
</script>

Please or to participate in this conversation.