Cluster component fail - ol@6.5.0

[santiagotsp]

Dependencies installed:
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.16",
"@types/ol": "^6.5.3",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"ol": "^6.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"rlayers": "^1.0.4",
"typescript": "^4.3.5",
"web-vitals": "^1.1.2"

Cluster component fails on load feojson file:
Line 20 - import earthquakes from "!!file-loader!./data/earthquakes.geojson";
Error:
src\Cluster.tsx
Line 20:1: Unexpected '!' in '!!file-loader!./data/earthquakes.geojson'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

[mmomtchev]

You have enabled import/no-webpack-loader-syntax which is an eslint plugin that forbids this syntax

[santiagotsp]

Could you recommend a dependency configuration to be able to correctly test all the components. thanks in advance.

[mmomtchev]

You can take the webpack/eslint/TSC configurations used (you can find them in node_modules/rlayers), but generally the project should be configuration-agnostic.

This particular way of including webpack modules cannot be removed from the examples, because it uses a special technique to display both the raw code used and the resulting output:
https://mmomtchev.medium.com/making-examples-displaying-code-along-its-output-with-webpack-a28dcf5439c6

You don't need to do this in your code - you can simply remove the "!" and use whatever means you have to load the GeoJSON file.