CSS is always injected

[radeno]

Hello,

i tried to disable injecting css with directive injectCSS: false but css is always injected with map init.

Test: in example/src/demos/heatmap.tsx changed line 9 to: const Map = ReactMapboxGl({ accessToken: token, injectCSS: false });

Screenshot with injectCSS: false

Always tested on production: React: 16.5.2 Mapbox: 0.50 React-Mapbox: 4.0

[sheerun]

Same issue. Simple if (injectCSS) in code doesn't mean css is not injected with some webpack setups. Personally I think this "feature" should be reverted asap :(

[sheerun]

That is CSS compilation works almost always at build time, not runtime. Webpack doesn't habe access to value of injectCSS variable so it just imports all require('*.css') it can find in code, and it happens it finds yours.

[radeno]

@sheerun you are right about Webpack. It always preprocess required CSS. I think auto requiring CSS for component is not the right thing. It forcing to use predefined design every time. We are using React Leaflet as fallback for MapboxGL and there are not any CSS. Must be imported manually or make own. It allows us have CSS under control. By my opinion injectCSS should be removed completely and let the user to make own decision.

[vasturiano]

Having the same issue, which is preventing us from upgrading to 4.0.0. Our webpack config does not have a css loader, and we do not wish to add one as it will introduce a burden on all the consuming applications of the package that depends on react-mapbox-gl.

The issue is that, even with injectCSS: false, webpack (or most other bundlers) will still import the css at build time, as it sweeps through this line: https://github.com/alex3165/react-mapbox-gl/blob/bd2827f79cdc4e84b94d247541dd2b138c623cfb/src/map.tsx#L144

And will consequently fail the import because it has no css loader. Perhaps a solution here is to use dynamic imports, so the if (injectCSS) runtime condition is respected.

On a separate note, the docs have the wrong casing for the config option:

injectCss (Default: true): boolean If false, the factory won't require the mapbox-gl.css sheet.

Should be injectCSS instead.

[allenan]

I think I'm running into the same issue after attempting to upgrade to 4.0.2 from 3.8.0.

I get the following error from mapbox-gl.css:1:

Uncaught SyntaxError: Unexpected token .
    at createScript (vm.js:80)
    at Object.runInThisContext (vm.js:139)
    at Module._compile (module.js:606)
    at Object.Module._extensions..js (module.js:653)
    at Module.load (module.js:561)
    at tryModuleLoad (module.js:504)
    at Function.Module._load (module.js:496)
    at Module.require (module.js:586)
    at require (internal/module.js:11)
    at ReactMapboxFactory (map.tsx:144)

I'm guessing I don't have some webpack rule to be able to process that css file the way it's expecting to be processed. I tried disabling injectCSS but as others above have mentioned, webpack still attempts to process the css file

[sheerun]

Pleeeese remove this require from code... It just doesn't play well with bundlers.

I don't want to use this built-in .css I have my own. And now it's nearly impossible for me to make webpack ignore this css require from react-mapbox-gl so there is no duplicate css bundled

[ryan-mahoney]

Just hit this issue as well... seems like a bad architectural decision, but maybe too early for me to say. I got around this using this webpack plugin: https://www.npmjs.com/package/ignore-loader

Was able to use it because our team does not create any CSS files so we can simply have webpack ignore any attempt to require any CSS file.

[mklopets]

I agree, think it should be removed for v5. Don't think there's anything to do for v4 releases in the meanwhile, though.

[stereobooster]

My solution is

const path = require("path");
module.exports = {
  resolve: {
    alias: {
      "mapbox-gl/dist/mapbox-gl.css": path.resolve(__dirname, "src/empty.js"),
    },
  },
};

[nathanredblur]

This issue looks pretty old and important for me, so I create this pull request. I hope get approved. https://github.com/alex3165/react-mapbox-gl/pull/843

[JClackett]

this also doesnt play well with the new Next.js version where you HAVE to import css fils in _app. Only solution is to use the, now not recommended, @zeit/next-css plugin...

[fredbralvalex]

I faced the same problem... I spent some hours to understand and how could be the solution. And, as Mapbox allow "injectCSS: false" what is great at compilation time as @vasturiano said. But breaks at build time... so using both solutions: @vasturiano and @ryan-mahoney I was able to solve the problem.

next.config.js at custom webpack config.module.rules.push({ test: /\.css$/, loader: 'ignore-loader' })

Some tsx export const Map = ReactMapboxGl({ accessToken: config.get('accessToken'), injectCSS: false })

[nathanredblur]

this also doesnt play well with the new Next.js version where you HAVE to import css fils in _app. Only solution is to use the, now not recommended, @zeit/next-css plugin...

my PR solve this issue in new Next versions.

pages/_app

import 'mapbox-gl/dist/mapbox-gl.css';

and then you import your map inside your page

import ReactMapboxGl from 'react-mapbox-gl/src';

NOTE: because next try to do server side render (SSR) and Mapbox require window object (that not exist in server) you should have in mind that you will need load dynamically your component.

pages/index.tsx

const MapView = dynamic<MapViewProps>(
  () => import('../../components/MapView/MapView').then(mod => mod.MapView),
  {
    loading: () => <LoadingLayer />,
    ssr: false,
  }
);

be free to use my PR untly a final solution is taken: package.json

"react-mapbox-gl": "github:nathanredblur/react-mapbox-gl",