Can't get react-leaflet to work with fusion.js

51 Views Asked by At

I'm trying to use react-leaflet with fusion.js and running into issues with css loading. Fusion is opinionated, and I can't/don't want to mess with the webpack config, so there's no css loader in my project. Any line like this won't work:

import 'leaflet/dist/leaflet.css'

Fusion docs recommend using fusion-plugin-react-helmet-async to load third party styles, so the code would theoretically look like:

import { assetUrl } from "fusion-core";
import { Helmet } from "fusion-plugin-react-helmet-async";

const cssUrl = assetUrl('../node_modules/leaflet/dist/leaflet.css')

const root = (
  <>
    <Helmet>
      <link rel="stylesheet" href={cssUrl} />
    </Helmet>
    <MyApp />
  </>
);

This appears to load leaflet.css into html <head />, but when I then try

import { MapContainer } from "react-leaflet"

the app crashes and I get a this server error which seems to be related to fusion-cli:

Error: Aborted because of self decline: ./node_modules/fusion-cli/entries/server-entry.js
Update propagation: ./node_modules/fusion-cli/entries/server-entry.js
    at applyHandler (/Users/jakeadicoff/Work/myWebsite/webpack/runtime/require chunk loading:151:1)
    at /Users/jakeadicoff/Work/myWebsite/webpack/runtime/hot module replacement:310:1
    at Array.map (<anonymous>)
    at internalApply (/Users/jakeadicoff/Work/myWebsite/webpack/runtime/hot module replacement:309:1)
    at /Users/jakeadicoff/Work/myWebsite/webpack/runtime/hot module replacement:279:1
    at waitForBlockingPromises (/Users/jakeadicoff/Work/myWebsite/webpack/runtime/hot module replacement:233:1)
    at /Users/jakeadicoff/Work/myWebsite/webpack/runtime/hot module replacement:277:1
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
warn: HMR Failed. Attempting full server reload...
TypeError: start is not a function
    at [eval]:31:11
    at Script.runInThisContext (node:vm:123:12)
    at Object.runInThisContext (node:vm:299:38)
    at node:internal/process/execution:82:21
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:81:62)
    at evalScript (node:internal/process/execution:103:10)
    at node:internal/main/eval_string:29:3

Any suggestions?

0

There are 0 best solutions below