[GLOBAL CSS IMPORT ISSUE] --- Help Wanted

[piyush546]

Trying to use the react-azure-maps with my next js project but getting below issue

./node_modules/mapbox-gl/src/css/mapbox-gl.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/react-azure-maps/dist/react-azure-maps.es5.js

versions of dependencies ----
    "next": "12.2.3",
    "react": "17.0.2",
    "react-azure-maps": "^0.4.2",
    "react-dom": "17.0.2"

Please provide proper steps to integrate this library in my project

[KenSuenobu]

I am also getting this in NextJS. I think it's because the project is pulling in a CSS from another project and not importing or using it directly. This is a security issue, and it should be addressed.

[seyyed-sina]

is there any solution for this issue? I face the same problem in Nextjs 12.2.2

[seyyed-sina]

apparently next-remove-imports has this ability to remove all .less/.css/.scss/.sass/.styl imports from all packages in node_modules.

Just put this line in next.config file and everything will be OK after that!

// next.config.js
const nextConfig = {...}

const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: "\\.(less|css|scss|sass|styl)$"
});

module.exports = removeImports(nextConfig);

[dz-andrej-zecevic]

I managed to get this working two different ways.

1. Use version 1.0.0-beta.0 of react-azure-maps. There is an example in this repo: https://github.com/yulinscottkang/nextjs-azure-maps
2. Adding next.config.js, installing next-remove-imports, and configuring as follows: `const removeImports = require('next-remove-imports')({ test: /node_modules([\s\S]*?).(tsx|ts|js|mjs|jsx)$/, matchImports: "\.(less|css|scss|sass|styl)$" });

module.exports = removeImports();`

There is apparently another potential solution which is to use the new "app" directory in Next 13+. This feature is in beta, but there is a comment saying that this is no longer an issue when you use the "app" directory: https://github.com/vercel/next.js/issues/19936#issuecomment-1352888527

[PranshuBansalDev]

Since nextjs is now recommended by the official react.dev docs see here, could we please prioritize fixing this?

The impact is that any new project starting with nextjs is hard blocked from consuming this react wrapper library for Azure Maps

I hear that moving to the nextjs app directory structure could fix that see here, but its in Beta right now, so I don't want to take a production dependency on it.

I'm currently being forced to stay on React (no framework) to consume the Map SDK

I did however find this from @yulinscottkang (https://github.com/yulinscottkang/nextjs-azure-maps). Is this the recommended way to consume the library for a Nextjs app?

[yulinscottkang]

@PranshuBansalDev yes, react-azure-maps@next (1.0.0) is the recommended way going forward. azure-maps-control has also been moved to the peerDependencies so that you may upgrade it independently in the future. Please refer to the MIGRATION.md for more details.