svelte/register does not seem to handle imported components from Svelte Material UI

Question

I'm currently having problems with using svelte/register to use imported components.

I've currently been following a tutorial to mess around with NestJS and Svelte.

The tutorial has been good at explaining what's happening and getting a simple NestJS and Svelte app running. However, I'm currently new to both of these things and not understanding why I'm unable to import a components library like Svelte Material UI in to use.

Below is the file that's causing issues:

<script lang="ts">
  import IconButton from '@smui/icon-button'; // Commenting this line, makes it work
</script>


<p>blah</p>

And below is the error I get:

(node:29906) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/hypofreak/dev/svelte-nestjs-app/node_modules/@smui/icon-button/dist/index.js
require() of ES modules is not supported.
require() of /home/hypofreak/dev/svelte-nestjs-app/node_modules/@smui/icon-button/dist/index.js from /home/hypofreak/dev/svelte-nestjs-app/src/app/shared/views/nav.svelte is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/hypofreak/dev/svelte-nestjs-app/node_modules/@smui/icon-button/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/home/hypofreak/dev/svelte-nestjs-app/src/app/shared/views/nav.svelte:5:33)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.require.extensions.<computed> [as .svelte] (/home/hypofreak/dev/svelte-nestjs-app/node_modules/svelte/register.js:49:17)
    at Module.load (internal/modules/cjs/loader.js:950:32)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29906) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:29906) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I've tried seeing if someone else had the same issues but the problem seems unique to the way the app has been setup.

I can get it working if I comment out the line but I would like to be able to use and import other Svelte components from npm later on if going down this path.

Just learning how to use Svelte and NestJS to understand what's possible at the moment.

Any help or guidance is much appreciated!

Answer 1

Doesn't seem to be possible since svelte/register uses the CommonJS modules recognised by Node.

https://svelte.dev/docs#run-time-svelte-register