[Bug]: Typescript error importing chart enums with SvelteKit
See original GitHub issueContact Details
kevin.pye@fabdata.io
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
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
I tried your example and it is not working
@benmccann was also looking for things that reproduce this issue