search

carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
904 stars 184 forks source link

[Bug]: React+Typescript generates source-map warnings #1474

Closed stepoibm closed 1 year ago

stepoibm commented 1 year ago

Contact Details

What happened?

yarn start gives generates 166 warnings similar to this one:

WARNING in ./node_modules/@carbon/charts/model/heatmap.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/heatmap.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/heatmap.js.map'

As far as I can tell it's due to this: https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-1969071

Version

    "@carbon/charts": "^1.6.1",
    "@carbon/charts-react": "^1.6.1",
    "@carbon/import-once": "^10.7.0",
    "@carbon/react": "^1.17.0",
    "d3": "^7.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
    "@types/node": "^18.7.6",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "prettier": "^2.7.1",
    "sass": "1.51.0",
    "typescript": "^4.7.4"

Data & options used

See App.tsx here:

https://github.com/stepoibm/chart-warnings

Relevant log output

WARNING in ./node_modules/@carbon/charts/components/graphs/bullet.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/bullet.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/bullet.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/circle-pack.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/circle-pack.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/circle-pack.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/donut.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/donut.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/donut.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/gauge.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/gauge.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/gauge.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/heatmap.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/heatmap.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/heatmap.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/histogram.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/histogram.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/histogram.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/line.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/line.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/line.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/lollipop.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/lollipop.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/lollipop.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/meter.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/meter.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/meter.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/pie.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/pie.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/pie.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/radar.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/radar.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/radar.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/scatter-stacked.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/scatter-stacked.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/scatter-stacked.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/scatter.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/scatter.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/scatter.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/skeleton-lines.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/skeleton-lines.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/skeleton-lines.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/skeleton.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/skeleton.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/skeleton.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/tree.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/tree.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/tree.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/treemap.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/treemap.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/treemap.js.map'

WARNING in ./node_modules/@carbon/charts/components/graphs/wordcloud.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/wordcloud.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/graphs/wordcloud.js.map'

WARNING in ./node_modules/@carbon/charts/components/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/index.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/index.js.map'

WARNING in ./node_modules/@carbon/charts/components/layout/layout.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/layout/layout.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/layout/layout.js.map'

WARNING in ./node_modules/@carbon/charts/components/layout/spacer.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/layout/spacer.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/components/layout/spacer.js.map'

WARNING in ./node_modules/@carbon/charts/configuration-non-customizable.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/configuration-non-customizable.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/configuration-non-customizable.js.map'

WARNING in ./node_modules/@carbon/charts/configuration.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/configuration.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/configuration.js.map'

WARNING in ./node_modules/@carbon/charts/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/index.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/index.js.map'

WARNING in ./node_modules/@carbon/charts/interfaces/a11y.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/a11y.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/a11y.js.map'

WARNING in ./node_modules/@carbon/charts/interfaces/enums.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/enums.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/enums.js.map'

WARNING in ./node_modules/@carbon/charts/interfaces/events.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/events.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/events.js.map'

WARNING in ./node_modules/@carbon/charts/interfaces/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/index.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/interfaces/index.js.map'

WARNING in ./node_modules/@carbon/charts/model/alluvial.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/alluvial.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/alluvial.js.map'

WARNING in ./node_modules/@carbon/charts/model/binned-charts.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/binned-charts.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/binned-charts.js.map'

WARNING in ./node_modules/@carbon/charts/model/boxplot.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/boxplot.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/boxplot.js.map'

WARNING in ./node_modules/@carbon/charts/model/bullet.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/bullet.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/bullet.js.map'

WARNING in ./node_modules/@carbon/charts/model/cartesian-charts.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/cartesian-charts.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/cartesian-charts.js.map'

WARNING in ./node_modules/@carbon/charts/model/circle-pack.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/circle-pack.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/circle-pack.js.map'

WARNING in ./node_modules/@carbon/charts/model/gauge.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/gauge.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/gauge.js.map'

WARNING in ./node_modules/@carbon/charts/model/heatmap.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/heatmap.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/heatmap.js.map'

WARNING in ./node_modules/@carbon/charts/model/meter.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/meter.js.map' file: Error: ENOENT: no such file or directory, open '/home/work/workspace/design-collab/frontend/node_modules/@carbon/src/model/meter.js.map'

Codesandbox example

No response

rajcrk commented 1 year ago

+1

rajcrk commented 1 year ago

@stepoibm Have you tried moving the following CSS imports to App.ts. This fixed the issue for me.

import "@carbon/styles/css/styles.css";
import "@carbon/charts/styles.css";
theiliad commented 1 year ago

Hi, this seems like a broader issue with CRA https://github.com/facebook/create-react-app/discussions/11767

I'm going to close for now, but let me know if there's anything else to look at 🙂