bug: Nextjs app can't resolve relative asset imports from stream-chat-react css

[trozzelle]

Describe the bug

This may be more of a Nextjs issue but I figure I'd ask here first. Our app is using Next 14 in a turborepo monorepo. Importing stream-chat-react/dist/css/v2/index.css into the Stream Chat component or a separate style sheet causes Next to throw errors trying to resolve icons from assets/icons/. Next looks to spit out an error for fragmented font icon urls such as ../../assets/icons/stream-chat-icons.svg#stream-chat-icons and ../../assets/icons/stream-chat-icons.eot#iefix. So far, I've tried various ways to resolve the paths as well as providing overrides but I'm at a loss.

Expected behavior

stream-chat-react/dist/css/v2/index.css should import into the component without issue.

Package version

• stream-chat-react: 12.0.0

• stream-chat-js: 8.40.9

• Nextjs: 14.2.11

• turbo: 2.1.2

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version 129.0.668.60

Additional context

./node_modules/.pnpm/stream-chat-react@12.0.0_@types+react@18.3.9_jquery@3.7.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_stream-chat@8.40.9/node_modules/stream-chat-react/dist/css/v2/index.css:2:2070
Module not found: Can't resolve '../../assets/icons/stream-chat-icons.eot#iefix'
  1 | .str-chat{box-sizing:border-box;font-family:var(--str-chat__font-family)}.str-chat *{box-sizing:border-box}.str-chat .ngxp__container,.str-chat .float-ui-container{z-index:1;padding:0 !important;box-shadow:none !important;border-color:rgba(0,0,0,0) !important;max-width:100vw}.str-chat .ngxp__container .ngxp__arrow,.str-chat .float-ui-container .ngxp__arrow{display:none}stream-icon,stream-icon-placeholder{display:flex;justify-content:center;align-items:center}.stream-chat__paginated-list{display:flex;flex-direction:column;height:100%;overflow-x:hidden;overflow-y:scroll;max-height:100%;min-height:0;gap:var(--str-chat__spacing-2)}.stream-chat__paginated-list .str-chat__loading-indicator{margin:auto}stream-paginated-list{height:100%;max-height:100%}stream-user-list{height:100%;max-height:100%}stream-user-list .str-chat__user-list-item{display:flex;align-items:center;gap:var(--str-chat__spacing-2)}:root{--str-chat__theme-version: 2}.str-chat{--str-chat__spacing-px: 1px;--str-chat__spacing-0_5: 0.125rem;--str-chat__spacing-1: 0.25rem;--str-chat__spacing-1_5: 0.375rem;--str-chat__spacing-2: 0.5rem;--str-chat__spacing-2_5: 0.625rem;--str-chat__spacing-3: 0.75rem;--str-chat__spacing-3_5: 0.875rem;--str-chat__spacing-4: 1rem;--str-chat__spacing-5: 1.25rem;--str-chat__spacing-6: 1.5rem;--str-chat__spacing-7: 1.75rem;--str-chat__spacing-8: 2rem;--str-chat__spacing-9: 2.25rem;--str-chat__spacing-10: 2.5rem;--str-chat__spacing-11: 2.75rem;--str-chat__spacing-12: 3rem;--str-chat__spacing-14: 3.5rem;--str-chat__spacing-16: 4rem;--str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=")}@font-face{font-family:"stream-chat-icons";src:url("../../assets/icons/stream-chat-icons.eot");src:url("../../assets/icons/stream-chat-icons.eot#iefix") format("embedded-opentype"),url("../../assets/icons/stream-chat-icons.woff") format("woff2"),url("../../assets/icons/stream-chat-icons.woff") format("woff"),url("../../assets/icons/stream-chat-icons.ttf") format("truetype"),url("../../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg");font-weight:normal;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family:"stream-chat-icons";src:url("../../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg")}} 

Here is relevant portion of our next.config.mjs

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  /** Enables hot reloading for local packages without a build step */
  transpilePackages: INTERNAL_PACKAGES,
  images: {
    remotePatterns: getRemotePatterns(),
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  experimental: {
    mdxRs: true,
    instrumentationHook: true,
    turbo: {
      resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'],
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
        },
      },
    },
    // needed for supporting dynamic imports for local content
    outputFileTracingIncludes: {
      '/*': ['./content/**/*'],
    },
    optimizePackageImports: [
      ...INTERNAL_PACKAGES,
    ],
  },
  modularizeImports: {
    lodash: {
      transform: 'lodash/{{member}}',
    },
  },
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
};

[MartinCupela]

@trozzelle this will be related to Turbopack configuration. Please see #2395

[trozzelle]

Thanks! Updating to the 14.3.0 canary released fixed this for me.