[Bug]: Typescript error importing chart enums with SvelteKit

Contact Details

[e-mail]

What happened?

I am using SvelteKit with typescript and trying to follow the basic example as per the github home page - here

I have setup my svelte.config.js as per the example - full config below - note the APP_MODE is just a custom startup environment variable.

import preprocess from 'svelte-preprocess';
import node from '@sveltejs/adapter-node';

const production = process.env.APP_MODE === 'production';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: {
			optimizeDeps: {
				include: ['@carbon/charts']
			},
			ssr: {
				noExternal: [production && '@carbon/charts'].filter(Boolean)
			},
			// default to development as a guard
			mode: process.env.APP_MODE || 'development'
		},
		adapter: node({
			// default options are shown
			out: 'build',
			precompress: true
		})
	}
};

export default config;

On my demo page I am trying to test the BarChartSimple using the example shown on the github page. The example shown however is not using typescript. When I use the demo code I get a type error relating to the scaleType bar chart option. I wont paste the code here as it is exactly the same as the code on the github page. Instead I attach an image showing the reported error.

To try to resolve this - I discovered that the ScaleTypes enum can be found in the @carbon/charts/interfaces/enums.js file so I try to import it using import { ScaleTypes } from `@carbon/charts/interfaces/enums. The problem when I do this is that I receive the following error when visiting the page

D:\......\node_modules\@carbon\charts\interfaces\enums.js:1
import * as EventEnums from './events';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (D:\.......\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (D:\.........\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
    at eval (D:\.........\src\routes\demo.svelte:9:31)

Can anyone provide some advice?

Version

@carbon/charts-svelte: “^0.48.0”

Data & options used

data={[
    { group: 'Qty', value: 65000 },
    { group: 'More', value: 29123 },
    { group: 'Sold', value: 35213 },
    { group: 'Restocking', value: 51213 },
    { group: 'Misc', value: 16932 }
]}
options={{
    title: 'Simple bar (discrete)',
    height: '400px',
    axes: {
        left: { mapsTo: 'value' },
	bottom: { mapsTo: 'group', scaleType: 'labels' }
    }
}}

Relevant log output

D:\......\node_modules\@carbon\charts\interfaces\enums.js:1
import * as EventEnums from './events';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (D:\.......\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
    at ssrImport (D:\.........\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
    at eval (D:\.........\src\routes\demo.svelte:9:31)

Codesandbox example

No response

[leetrout]

I tried your example and it is not working

➜  sveltekit-typescript git:(master) ✗ node --version
v16.13.1
➜  sveltekit-typescript git:(master) ✗ npm --version
8.1.2
➜  sveltekit-typescript git:(master) ✗ npx tsc --version
Version 4.5.4

➜  sveltekit-typescript git:(master) npm i

added 269 packages, and audited 270 packages in 22s

21 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  sveltekit-typescript git:(master) ✗ ls
node_modules  package-lock.json  package.json  src  svelte.config.js  tsconfig.json  yarn.lock
➜  sveltekit-typescript git:(master) ✗ npm run dev

> dev
> svelte-kit dev

Pre-bundling dependencies:
  svelte/store
  svelte
  @carbon/charts/interfaces
  @carbon/charts
  svelte/animate
  (...and 4 more)
(this will be run only when your dependencies or config have changed)

  SvelteKit v1.0.0-next.202

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


(node:32029) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
5:29:28 PM [vite] Error when evaluating SSR module /src/routes/Basic.svelte:
/home/user/code/github.com/metonym/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/@carbon/charts/interfaces/index.js:1
export * from './a11y';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
5:29:28 PM [vite] Error when evaluating SSR module /src/routes/index.svelte:
/home/user/code/github.com/metonym/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/@carbon/charts/interfaces/index.js:1
export * from './a11y';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
Unexpected token 'export'
/home/user/code/github.com/metonym/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/@carbon/charts/interfaces/index.js:1
export * from './a11y';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)

[leetrout]

@benmccann was also looking for things that reproduce this issue