Can't set React-Leaftlet Maps CRS using a JSON variable - react-leaflet

Question

I can't set the crs for React-Leaflet using this code:
import CONFIG from 'config/config.json';
.
.
.
.
<Map
ref={(m) => { this.leafletMap = m; }}
center={this.props.mapCenter}
zoom={zoomLevel}
crs={CRS.EPSG900913} // This works
crs={CONFIG.leafletMapCRS} // This doesn't
>
Here's my config.json file
{
"leafletMapURL": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"leafletMapCRS": "CRS.EPSG900913"
}
The leafletMapURL config entry works fine but the leafletMapCRS doesn't work for some reason. Any help is appreciated.

Answer 1

CRS is an object with some properties. In your config.json you are making it a string. So what you need to do to make this work is to remove "" and then import CRS from 'leaflet'. After you do that you will see that you have to make your file a .js instead of .json to be able to import CRS.
therefore you would have:
import { CRS } from "leaflet";
export const config = () => {
return {
leafletMapURL: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
leafletMapCRS: CRS.EPSG900913
};
};
and then:
import { config } from "./config";
...
function App() {
const bounds = [[-26.5, -25], [1021.5, 1023]];
const configs = config();
return (
<Map
center={[0, 0]}
zoom={0}
style={{ height: "100vh" }}
crs={configs.leafletMapCRS} // This works
>
<ImageOverlay
url="https://leafletjs.com/examples/crs-simple/uqm_map_full.png"
bounds={bounds}
/>
</Map>
);
}
Last but not least are you sure you can use CRS.EPSG900913? as the available reference systems are described here and CRS.EPSG900913 is not included there.
Demo