Issue with imports after building with Nuxt3

[marcodarko]

Describe the bug
TabulatorFull import works fine in development mode but once built error occurs:

[nuxt] [request error] [unhandled] [500] Named export 'TabulatorFull' not found. The requested module 'tabulator-tables' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tabulator-tables';
const { TabulatorFull } = pkg;

import { TabulatorFull as Tabulator } from "tabulator-tables";

App is built using Nuxt3 latest version.

Tabulator Info
"tabulator-tables": "^5.3.2"

Working Example
Code:
https://github.com/biothings/discovery-app/tree/vue3-app/nuxt-app
File in question:
https://github.com/biothings/discovery-app/blob/vue3-app/nuxt-app/store/modules/schema_registry.js

ISSUES CREATED WITHOUT THIS EXAMPLE WILL BE CLOSED WITHOUT DISCUSSION
-->

To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
After running nuxt run build with no errors it should work just like it did during development.
I will try to contact the Nuxt team as well, but please advice if this is a known issue and there's a workaround.

Screenshots
Full logs:

[nuxt] [request error] [unhandled] [500] Named export 'TabulatorFull' not found. The requested module 'tabulator-tables' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tabulator-tables';
const { TabulatorFull } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
  at async ./.output/server/chunks/handlers/renderer.mjs:304:24
  at async ./.output/server/chunks/handlers/renderer.mjs:366:64
  at async ./.output/server/chunks/handlers/renderer.mjs:28:22
  at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)
[nuxt] [request error] [unhandled] [500] Named export 'TabulatorFull' not found. The requested module 'tabulator-tables' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tabulator-tables';
const { TabulatorFull } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
  at async ./.output/server/chunks/handlers/renderer.mjs:304:24
  at async ./.output/server/chunks/handlers/renderer.mjs:366:64
  at async ./.output/server/chunks/handlers/renderer.mjs:28:22
  at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)
[nuxt] [request error] [unhandled] [500] Named export 'TabulatorFull' not found. The requested module 'tabulator-tables' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tabulator-tables';
const { TabulatorFull } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
  at async ./.output/server/chunks/handlers/renderer.mjs:304:24
  at async ./.output/server/chunks/handlers/renderer.mjs:366:64
  at async ./.output/server/chunks/handlers/renderer.mjs:28:22
  at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)

Desktop (please complete the following information):

• OS: [e.g. iOS] Monterrey
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 12.6

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[olifolkerd]

I don't think you can break the import statement down into multiple lines like that as it is processed statically, in order to take advantage of the tree shaking it must be done in one line

Try using:
import {TabulatorFull} from 'tabulator-tables'

[marcodarko]

@olifolkerd that's the suggested fix from the logs but that's not my implementation, mine is exactly what you said.

[olifolkerd]

Looking at first line of the console log it looks like your project is importing the wrong file from the dist folder, it is using tabulator.js not the Tabulator ESM file. That is why your are getting that warning.

As to why it is doing that, it will depend on your setup. Tabulator package.json directs classic js environments to the tabulator.js and module environments like node to the esm variant that supports the import statements

[marcodarko]

It gives me the same issue for another library too (ChartJS) even tho my implementation follows what's on the docs. (logs here are outdated*)
I have it as:
import { TabulatorFull as Tabulator } from "tabulator-tables";

ChartJS:

[nuxt] [request error] [unhandled] [500] Named export 'Chart' not found. The requested module 'chart.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'chart.js';
const { Chart: Chart$1, registerables } = pkg;

I have it as:
import { Chart, registerables } from "chart.js";

I know you can't speak to that but just showing you...
Seems like a Nuxt issue then, I will try contacting them too.
What's weird is that it all works when I run the app in dev mode, I only ran into this when I tries to run the prod build.

[marcodarko]

As mentioned here nuxt/nuxt#14790 you can add the library causing this issue to the transpile list in the Nuxt config. I was able to get around this error that way but some investigation might still be needed as to why this is happening in the Nuxt side or the way the library provides its exports perhaps. That same issue points out a possible conflict within a library with the same issue.

[olifolkerd]

Hey @marcodarko

Tabulator provides its ESM exports in the standard way with the package.json directing the environment to choose from the ESM or UMD package.

In this case it looks like there is something in the NUXT environment that is not interpreting this correctly.

If it is is a non module environment then using the require syntax instead may help:

var Tabulator = require("tabulator-tables");

If there any changes to the package.json i can make to help with this im happy to look into this, but given this is happening for other libraries and there is a recent issue on the nuxt repo dealing with this, it looks like this is more of an issue in Nuxt than it is Tabulator so im going to close this issue for now.

If you find out more then feel free to add more info and im happy to reopen.

Cheers

Oli :)