Gatsby webpack can not load topojson or csv with D3

[TheeMattOliver]

Description

Gatsby can't load topojson file.

Steps to reproduce

https://laughing-golick-8189af.netlify.app/

navigate to /d3-hello-world, note that D3 works

navigate to /topojson-page, note that topojson can not be loaded (doesn't seem to matter where you put the file -- static folder or in the component folder next to the component).

This line is supposed to load the data, but is unable to load the file.

useEffect(() => {
    d3.json('./us_county_2019_topo.json').then((topoJsonData) => {
      setGeo(topoJsonData);
    });
  }, []);

Minimal repro in Gatsby on Github here.

Using dynamic import syntax like this didn't work either. :

useEffect(() => {
    async function dynamicImportTopojson() {
      const dynamictopojson = (await import('./us_county_2019_topo.json'))
      d3.json(dynamictopojson).then((topoJsonData) => {
        setGeo(topoJsonData);
      });
    }

Expected result

This is a working example in CRA

Actual result

If passing topojson file directly to d3.json, e.g.

useEffect(() => {
    d3.json('./us_county_2019_topo.json').then((topoJsonData) => {
      setGeo(topoJsonData);
    });
  }, []);

here's the error:

Uncaught TypeError: Cannot read property 'us_county_2019' of undefined
    at eval (mapchart.js:24)
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at performSyncWorkOnRoot (react-dom.development.js:22269)
eval @ mapchart.js:24
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
eval @ map.js:18
Promise.then (async)
eval @ map.js:10
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
eval @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

The above error occurred in the <MapChart> component:

    at MapChart (webpack-internal:///./src/components/mapviz/mapchart.js:29:19)
    at div
    at Map (webpack-internal:///./src/components/mapviz/map.js:22:66)
    at main
    at div
    at Layout (webpack-internal:///./src/components/layout.js:34:23)
    at TopojsonPage
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:282:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ne (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-6ab2b891.js:879:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:213:68)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
overrideMethod @ react_devtools_backend.js:2560
logCapturedError @ react-dom.development.js:20085
callback @ react-dom.development.js:20154
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
eval @ map.js:18
Promise.then (async)
eval @ map.js:10
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
eval @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

If using ES modules and import with the topojson file, e.g :

import countyTopo from './us_county_2019_topo.json'

...
useEffect(() => {
    d3.json(countyTopo).then((topoJsonData) => {
      setGeo(topoJsonData);
    });
  }, []);

this is the error:

VM13297:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
eval @ map.js:24
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
eval @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

when loading the csv with d3.csv using import, e.g.,

useEffect(() => {
    d3.csv(csvDataFile).then((csvData) => {
      csvData.forEach((row) => {
        // do D3 stuff
      });
      setCsvData(csvData); // set csv in state to pass to chart
    });
  }, []);

here's the error:

[HMR] bundle has 1 errors
client.js:196 Module parse failed: Unexpected token (2:9)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| stateAbbrev,countyName,FIPS,totalVotes,VAP,state,turnoutPerc,nNonVote,percFromMean> PA,Adams County,42001,47489,78370,Pennsylvania,60.59589128,30881,5.095891285| PA,Allegheny County,42003,650114,961595,Pennsylvania,67.60788066,311481,12.10788066| PA,Armstrong County,42005,31618,54155,Pennsylvania,58.38426738,22537,2.884267381

Environment

gatsby info --clipboard

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.6.0 - ~/.nvm/versions/node/v15.6.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.2 - ~/.nvm/versions/node/v15.6.0/bin/npm
  Languages:
    Python: 3.8.0 - /Users/matthewoliver/.pyenv/shims/python
  Browsers:
    Chrome: 91.0.4472.77
    Safari: 14.0.2
  npmPackages:
    gatsby: ^3.4.1 => 3.6.2
    gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.6.1
    gatsby-plugin-image: ^1.4.0 => 1.6.0
    gatsby-plugin-manifest: ^3.4.0 => 3.6.0
    gatsby-plugin-offline: ^4.4.0 => 4.6.0
    gatsby-plugin-react-helmet: ^4.4.0 => 4.6.0
    gatsby-plugin-sharp: ^3.4.1 => 3.6.0
    gatsby-source-filesystem: ^3.4.0 => 3.6.0
    gatsby-transformer-sharp: ^3.4.0 => 3.6.0
  npmGlobalPackages:
    gatsby-cli: 3.0.0
    ```

[TheeMattOliver]

Answer:

Don't host the files locally. Host the files elsewhere.