theiliad
commented
2 years ago Hi, not sure what needs to happen here. date-fns seems to work ok, and I'm not sure whether some part of vite could cause this issue.
Closed 6peterlu closed 1 year ago
theiliad
commented
2 years ago Hi, not sure what needs to happen here. date-fns seems to work ok, and I'm not sure whether some part of vite could cause this issue.
ispyinternet
commented
2 years ago same issue using sveltekit / vite. Would be great if someone could investigate / suggest a workaround
Some explanation may be found through the following external issues:
nstuyvesant
commented
2 years ago Just created a new SvelteKit project this morning, added @carbon/charts-svelte@0.54.12, modified svelte.config.js, loaded @import '@carbon/charts/styles.css'; from my main styles.scss and then tried out a slight variation on the GaugeChart sample...
<script lang="ts">
import { GaugeChart } from '@carbon/charts-svelte'
export let name = ''
export let value = 50
export let color = 'black'
</script>
<GaugeChart
data={[{ group: 'value', value }]}
options={{
color: {
scale: {
value: color
}
},
resizable: true,
height: '60px',
width: '100%',
gauge: {
type: 'semi',
showPercentageSymbol: false,
},
toolbar: {
enabled: false
}
}}
/>
<span>{name}</span>Got...
500
exports is not defined
ReferenceError: exports is not defined
at /node_modules/date-fns/locale/en-US/index.js?v=f5457668:3:23
at instantiateModule (/Users/nates/dev/salesforce-svelte/node_modules/vite/dist/node/chunks/dep-3d5f2596.js:56176:15)when I try to load this simple component. I'm not displaying anything with a date or using date-ins directly.
theiliad
commented
2 years ago Did you follow this doc? https://github.com/carbon-design-system/carbon-charts/blob/master/packages/svelte/README.md
nstuyvesant
commented
2 years ago Yep, I did. I have the Carbon Charts working in another SvelteKit project but there, I'm using LineChart and DonutChart. This was my first time using GaugeChart. Wondering if it's specific to that component?
Here's my svelte.config.js...
import adapter from '@sveltejs/adapter-node'
import preprocess from 'svelte-preprocess'
const production = process.env.NODE_ENV === 'production'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter({
out: 'public'
})
},
vite: {
optimizeDeps: {
include: ['@carbon/charts'],
exclude: ['@carbon/telemetry']
},
ssr: {
noExternal: [production && "@carbon/charts"].filter(Boolean)
},
serviceWorker: {
files: (filepath) => !/\.DS_Store/.test(filepath)
}
}
}
export default configI should mention since it's a new SvelteKit project as of yesterday... @sveltejs/kit@1.0.0-next.269.
Here's the package.json...
{
"name": "salesforce-svelte",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@carbon/charts-svelte": "^0.54.12",
"@popperjs/core": "^2.11.2",
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"@typescript-eslint/parser": "^5.12.0",
"bootstrap": "^5.1.3",
"d3": "^7.3.0",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.4.0",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.6.0",
"sass": "^1.49.7",
"svelte": "^3.46.4",
"svelte-check": "^2.4.3",
"svelte-preprocess": "^4.10.3",
"tslib": "^2.3.1",
"typescript": "~4.5.5"
},
"type": "module",
"engines": {
"node": "^16.14.0",
"npm": "^8.5.0"
}
}
julienchazal
commented
2 years ago hello
any news ?
i'm using SvelteKit 1.0.0-next.350 and charts-svelte 1.3.2
i get this error : Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<XXX>/node_modules/date-fns/locale/en-US/index' only when i build (no error on dev)
I never import this locale from date-fns with my code so maybe it's imported by charts-svelte ? Maybe related to this : https://github.com/date-fns/date-fns/issues/2964
Thanks
julienchazal
commented
2 years ago @nstuyvesant @6peterlu did you managed to make it work ? @theiliad can you reproduce this problem ?
nstuyvesant
commented
2 years ago I am using the latest @carbon/charts-svelte@1.5.0, @sveltejs/kit@1.0.0-next.394, vite@3.0.3.
Here's my vite.config.js:
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import helmet from 'helmet'
const myPlugin = {
name: 'improve-security',
configureServer(server) {
server.middlewares
// Main difference between dev and production: Heroku HTTP to HTTPS redirect not needed here
// Apply all but two helmet protections
.use(helmet({
contentSecurityPolicy: false, // using SvelteKit CSP
referrerPolicy: {
policy: 'strict-origin-when-cross-origin'
},
crossOriginResourcePolicy: false,
crossOriginEmbedderPolicy: false,
crossOriginOpenerPolicy: false
}))
}
}
const production = process.env.NODE_ENV === 'production'
/** @type {import('vite').UserConfig} */
const config = {
optimizeDeps: {
include: ['@carbon/charts'],
exclude: ['@carbon/telemetry']
},
plugins: [sveltekit(), myPlugin],
server: {
port: 3000,
fs: {
allow: [
'..',
'/api/file/'
]
}
},
serviceWorker: {
files: (filepath) => !/\.DS_Store/.test(filepath)
},
ssr: {
noExternal: [production && '@carbon/charts'].filter(Boolean)
}
}
export default configMy svelte.config.js no longer has anything special for @carbon/charts-svelte.
<script lang="ts">
import { DonutChart, LineChart } from '@carbon/charts-svelte'
import type { LineChartOptions, DonutChartOptions } from '@carbon/charts/interfaces'
import { Alignments, ScaleTypes } from '@carbon/charts/interfaces/enums'
import { dashboardData } from '../../stores'
import "@carbon/charts/styles.css"
// import "@carbon/charts/styles/styles.scss" // requires "@carbon/import-once" in package.json
const getDayName = (day: number):string => {
let d = new Date()
d.setDate(d.getDate() + day - d.getDay())
return d.toLocaleDateString('en-US', { weekday: 'long' })
}
const options = <LineChartOptions> {
tooltip: {
valueFormatter: (value: number | Date, category: string) => {
if (category == 'Revenue')
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD', notation: 'compact', maximumSignificantDigits: 3, maximumFractionDigits: 0 })
if (category == 'Attendees')
return value.toLocaleString('en-US', { notation: 'compact', maximumSignificantDigits: 3, maximumFractionDigits: 0 })
if (category == 'Date') {
const d = <Date> value
return d.toLocaleDateString('en-US')
}
}
},
axes: {
bottom: {
mapsTo: 'month_start',
title: 'Date',
scaleType: ScaleTypes.TIME // 'time'
},
left: {
mapsTo: 'revenue',
title: 'Revenue',
scaleType: ScaleTypes.LINEAR, //'linear',
main: true,
correspondingDatasets: [
'Revenue'
]
},
right: {
mapsTo: 'attendees',
title: 'Attendees',
scaleType: ScaleTypes.LINEAR, // 'linear',
correspondingDatasets: [
'Attendees'
]
}
},
curve: 'curveMonotoneX',
height: '500px',
toolbar: {
enabled: false
}
}
const popularProductsOptions = <DonutChartOptions> {
tooltip: {
valueFormatter: (value: number) => value.toLocaleString('en-US', { style: 'currency', currency: 'USD', notation: 'compact', maximumSignificantDigits: 3, maximumFractionDigits: 0 })
},
toolbar: {
enabled: false
},
resizable: true,
legend: {
alignment: Alignments.CENTER // 'center'
},
donut: {
center: {
label: 'Revenue',
numberFormatter: (value: number) => value.toLocaleString('en-US', { style: 'currency', currency: 'USD', notation: 'compact', maximumSignificantDigits: 3, maximumFractionDigits: 0 })
},
alignment: Alignments.CENTER // 'center'
},
height: '440px'
}
</script>
<div class="card mt-4">
<div class="card-body">
<h4 class="mb-4">Revenue and Attendance (Last 18 months)</h4>
<LineChart data={$dashboardData.attendanceRevenue} {options} />
</div><!--card-body-->
</div><!--card-->
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4>Attendance by location (Last 90 days)</h4>
<DonutChart data={$dashboardData.attendanceLocation} options={{
toolbar: {
enabled: false
},
resizable: true,
legend: {
alignment: Alignments.CENTER // 'center'
},
donut: {
center: {
label: 'Attendees'
},
alignment: Alignments.CENTER // 'center'
},
height: '440px',
color: {
scale: {
'Strip District': '#c9bddb',
'Squirrel Hill': '#c9bddb',
'North Hills': 'orange',
'Online': '#5f4884'
}
}
}} />
</div><!--card-body-->
</div><!--card-->
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="mb-4">Popular Products (Last 90 days)</h4>
<DonutChart data={$dashboardData.popularProducts} options={popularProductsOptions} />
</div><!--card-body-->
</div><!--card-->
</div>
</div>thanks @nstuyvesant
using latest @carbon/charts-svelte@1.5.0, @sveltejs/kit@1.0.0-next.394 and vite@3.0.3., i no longer have my initial error, but getting this one instead, running vite build only (no error with dev server) :
.svelte-kit/output/server/_app/immutable/chunks/heatmap-728a6b64.js 646.71 KiB
(node:15325) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
file:///Users/julienchazal/DEV/wip-sveltekit/.svelte-kit/output/server/_app/immutable/chunks/heatmap-728a6b64.js:12
import { Modal as Modal$2 } from "carbon-components";
^^^^^
SyntaxError: Named export 'Modal' not found. The requested module 'carbon-components' 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 'carbon-components';
const { Modal: Modal$2 } = 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:385:24)
at async Promise.all (index 2)
at async respond$1 (file:///Users/julienchazal/DEV/wip-sveltekit/.svelte-kit/output/server/index.js:1944:13)
at async resolve (file:///Users/julienchazal/DEV/wip-sveltekit/.svelte-kit/output/server/index.js:2332:114)
at async Object.handle (file:///Users/julienchazal/DEV/wip-sveltekit/.svelte-kit/output/server/_app/immutable/chunks/hooks-14480421.js:105:18)
at async respond (file:///Users/julienchazal/DEV/wip-sveltekit/.svelte-kit/output/server/index.js:2282:22)
at async visit (file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/prerender.js:626:20)
file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/prerender.js:460
throw new Error(format_error(details, config));
^
Error: 500 /
at file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/prerender.js:460:11
at save (file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/prerender.js:744:4)
at visit (file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/prerender.js:635:3)
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess.<anonymous> (file:///Users/julienchazal/DEV/wip-sveltekit/node_modules/@sveltejs/kit/dist/vite.js:2447:14)
at ChildProcess.emit (node:events:527:28)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Process finished with exit code 1
@julienchazal - looks like you are trying to import a Modal from 'carbon-components' - a different package and that package doesn't appear to have a Modal class exported. I use Bootstrap for my modals.
julienchazal
commented
2 years ago @nstuyvesant i use my own modal component it looks like a carbon dependency
lassebomh
commented
2 years ago I got the same error while using sveltekit and fixed the problem:
First I installed @carbon/charts and @carbon/charts-svelte.
$ npm i -D @carbon/charts @carbon/charts-svelteFrom @carbon/charts I added styles.css to my +layout.svelte file. This would probably be your main entry if you're only using vite.
// src/routes/+layout.svelte
import '@carbon/charts/styles.css';And lastly I added both @carbon/charts-svelte and @carbon/charts to my optimized dependencies in my vite config.
// vite.config.js
const config = {
plugins: [
sveltekit(),
],
optimizeDeps: {
include: ['@carbon/charts-svelte', '@carbon/charts']
},
};@6peterlu - is this still an issue with @carbon/charts@latest and @carbon/charts-svelte@latest?
The former now uses vite as its bundler (previously rollup).
theiliad
commented
1 year ago I will close for now, pls let us know @6peterlu
Contact Details
6peterlu@gmail.com
What happened?
Running
vite devyieldsalong with a bunch of sourcemap warnings that look like this:
Clicking into the console error yields:
That enUSLocaleObject import is causing the issues.
Version
0.52.3 vite 2.7.1
Data & options used
No response
Relevant log output
Codesandbox example
No response