Is it possible to use ES Module build with Vue3 without a build step?

frumpty

My setup doesn't have a build step and is just using <script> tags for the ES module versions of the relevant libraries for Vue3. I have a manually curated import map to which I've added Datatables acquired from the CDN (https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap.mjs ) as well as the Datatables-vue3 component (https://www.npmjs.com/package/datatables.net-vue3?activeTab=readme )

Test case is here:

https://jsfiddle.net/frumpty/xr6fLk2s/2/

summary

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      "jquery": "https://code.jquery.com/jquery-3.6.4.min.js",
      "datatables.net-vue3": "https://unpkg.com/datatables.net-vue3@2.1.2/dist/datatables.net-vue3.mjs",
      "datatables.net": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.mjs"
    }
  }
</script>

Then I try to use it:

import {createApp} from 'vue';
import DataTable from 'datatables.net-vue3'
import {DataTablesLib}
    from "datatables.net";

And I always end up with an error: Uncaught SyntaxError: ambiguous indirect export: default

See a test-case on JS Fiddle:

https://jsfiddle.net/frumpty/xr6fLk2s/2/

Appreciate any advice, thanks.

allan

Hi,

The issue isn't actually in DataTables, but rather jQuery. jQuery 3.x and earlier aren't setup for ESModules (that will change with their up coming 4 release), so what you need to do is use a "shim". Its simply a case of importing from a different location:

"jquery": "https://esm.sh/jquery@3.6.3",

Will do it. See this blog post for more details.

The next hurdle you have is that the datatables.net module is pointing at the Bootstrap 5 integration file there - which itself depends upon datatables.net. That import should actually be named datatables.net-bs5.

This is what you want your import map to look like:

  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      "jquery": "https://esm.sh/jquery@3.6.3",
      "datatables.net-vue3": "https://unpkg.com/datatables.net-vue3@2.1.2/dist/datatables.net-vue3.mjs",
      "datatables.net": "https://cdn.datatables.net/1.13.6/js/jquery.dataTables.mjs",
      "datatables.net-bs5": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.mjs"
    }
  }

And for the imports:

import DataTableLib from "datatables.net-bs5";
import DataTable from 'datatables.net-vue3'

And that will do it. Updated example. I haven't actually updated it to use the DataTable component - that's your homework for today . Let me know how you get on.

Allan

frumpty

Thanks. I think I can make something out of this

https://jsfiddle.net/frumpty/guh4j8v3/18/

It appears that columns are required, and each row in table data needs to be an object (not an array).

frumpty

@allan I didn't notice it, but the styling seems wrong on the jsfiddle. It seems like DataTables did not adopt the <thead> section.

https://jsfiddle.net/frumpty/guh4j8v3/18/

frumpty

Interesting, further exploration highlights that when specifying a 'columns' property in initialization, I need to supply the column Title as well.

https://jsfiddle.net/frumpty/guh4j8v3/30/

allan

Its like the DataTable component isn't seeing the slot there. I don't know what would cause that - I've never seen anything quite like that before. Its going to need further investigation. Good to hear you've got a workaround though.

Allan