react-bootstrap carousel not working

[1846689910]

after loading the react-bootstrap, the carousel cannot load.

• Reason: the react-bootstrap cannot work with css-modules, but our next.config.js set cssModules:true, so

  import "bootstrap/dist/css/bootstrap.min.css";

  will become transpiled css className.

• workaround: to exclude the bootstrap.min.css from the next-css css modules conversion by adding:

  cssModules: true,
  cssLoaderOptions: {
  importLoaders: 1,
  localIdentName: `${
    enableShortHash ? "" : "[name]__[local]___"
  }"[hash:base64:5]"`,
  getLocalIdent(loaderContext, localIdentName, localName, options){
    return loaderContext.resourcePath.includes("bootstrap.min.css")
      ? localName
      : localIdentName;
  },
  },

[1846689910]

needs to be recorded to type-18-next

[1846689910]

solution: https://github.com/vercel/next.js/discussions/14946#discussioncomment-34888