jsonlint breaks angular apps, replace it.

[raysuelzer]

mapbox-gl-js version: 0.51.0
mapbox-gl-draw version: ^1.1.1

Steps to Trigger Behavior

1. import * as MapboxDraw from '@mapbox/mapbox-gl-draw';
2. ng build

Expected Behavior

Webpack / Angular should be able to build package

Actual Behavior

WARNING in ./node_modules/jsonlint-lines/lib/jsonlint.js
684:16-23 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./node_modules/jsonlint-lines/lib/jsonlint.js
Module not found: Error: Can't resolve 'fs' in 'C:\an\interact-frontend\node_modules\jsonlint-lines\lib'
ERROR in ./node_modules/jsonlint-lines/lib/jsonlint.js
Module not found: Error: Can't resolve 'path' in 'C:\an\interact-frontend\node_modules\jsonlint-lines\lib'

Please remove the dependecy on jsonlint, it is no longer supported or maintained and will not work for people using angular-cli. We do not have an option to specify node property since webpack.config is abstracted.

[hallo02]

Is there a workaround?

[The-End-Hero]

I have encountered the same problem

[ghost]

I was in the same situation. This worked for me:

import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';

[laurenoldham1202]

Up until yesterday, I was able to use the workaround detailed here in which you add this bit of code to your package.json file (at the same level as name, version, scripts, etc.):
"browser": { "fs": false, "path": false, "os": false },

Worked up until I did a git rebase on my code today. The above solution import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'; worked for me! +1

[silberjan]

Using a deep import like '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'; is not really a solution. (see microsoft/TypeScript#20160 (comment))

Ivy starts to complain about them already. It would be way better to either fork jsonlint-lines or use something else

[vinayakkulkarni]

Facing a similar issue in the Nuxt based Vue App

+ import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';
- import * as MapboxDraw from '@mapbox/mapbox-gl-draw';

This hack works successfully though.

[kkaefer]

You should use the packaged version in the dist folder to avoid bundling errors as @vinayakkulkarni pointed out. For those curious, we're excluding the path and fs modules from being bundled. The geojsonlint module only uses them in the main function which we never call, so it's eliminated from the final build anyway.

[trygveaa]

@kkaefer: If we should use the version from the dist directory, why do you set main: "index.js" in package.json?

[deepaksslibra]

import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'

Stuck on this right now 😆

[yogeshhrathod]

import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'

This is not working as well getting error

./node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js
Module not found: Error: Can't resolve 'fs' in '/home/po/practice/mapbox/mapbox_test_1/node_modules/@mapbox/mapbox-gl-draw/dist'