./node_modules/mapbox-gl/dist/mapbox-gl.css Module build failed: TypeError: Cannot read property 'toFixed' of undefined

[myselfsum]

I have integrated Mapbox GL JS (Version: 1.8.0) in a React (Version: 16.12.0) and it is working fine. But when I am trying run the build command it throws me the below error:

./node_modules/mapbox-gl/dist/mapbox-gl.css
Module build failed: TypeError: Cannot read property 'toFixed' of undefined
at Array.filter ()
at Array.filter ()
at Array.filter ()
at Array.forEach ()

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] staging: env-cmd .env.staging npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Can anybody tell me why react build command throwing the error whereas npm start command not?

[mourner]

We haven't heard about anything similar to your problem unfortunately. I'll have to close this because it's not a GL JS issue, but if you find out what that was, please let us know so that others can find it. You could also try asking on StackOverflow.

[myselfsum]

I have fixed it by the following two steps:

1. By removing mapbox-gl.css imports from the jsx page
2. And add the following line in the index.html page
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />

Thanks

[Twansparant]

We haven't heard about anything similar to your problem unfortunately

I've got the exact same issue with my webpack setup. On production builds all images get optimized via the imagemin-webpack-plugin which uses svgo for svg's. When importing the mapbox css in my sass file like this:

@import "~mapbox-gl/dist/mapbox-gl.css";

I get the same error as described here.

But when I import the source css like this:

@import "~mapbox-gl/src/css/mapbox-gl.css";

I have no compiling errors, but I seem to be missing all svg images in the mapbox styles.

[SitCode1993]

@myselfsum You mind specifying which jsx page did you change?the one in the node_modules or?

[myselfsum]

@SitCode1993, I have removed "imports mapbox-gl.css" from the main jsx page which is rendering in the browser and wriiten import state like the above way in index.html page.

[kevinblackdesk]

When I'm running npm run build:production or yarn build:production in my [email protected] project (https://github.com/roots/sage/tree/9.0.9) I got the same error:

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined

in resources/assets/styles/main.scss I did what @Twansparant did (#9345 (comment)) and it worked.

[headnut]

we solved ELIFECYCLE problem by removing tsconfig.json before build.
tsconfig.json gets automatically recreated if not there.
-- that is from memory - I hope it is the write file name
-- though sorry, we did not see a toFixed problem, so it may be a different issue