looks like we missed some issues while enabling babel-plugin-module-resolver.

Every package that uses @griffel transform will trigger following babel warnings:

Initially I thought that this is caused by not all packages are aware about our module-resolver (those that don't use @griffel) and to fix this we should add module-resolver to very package that is using babel.

Based on more deep investigation that assumption was wrong as the issues seems more complicated.

Why is this happening

griffel babel processing works as babel internally emits every file with module-resolve, then transforms makeStyles , and emits back original file without module-resolve applied but with correct makeStyles transform.

Now because babel transforms every file in isolated context( file by file ), when second file is transformed and that file contains in its import tree previously internally transformed file, it will trigger warning Could not resolve "packages/react-components/react-theme/lib/index.js" in file ~/packages/react-components/react-text/lib/components/presets/Subtitle2Stronger/Subtitle2Stronger.js.

To easily repro this outside griffel context all that is needed is to directly use module-resolver like this:

within packages/react-components/react-text/.babelrc.json:

{
"plugins": [
    [
      "babel-plugin-module-resolver",
      {
        "root": ["../../../"],
        "alias": {
          "@fluentui/tokens": "packages/tokens/lib/index.js",
          "^@fluentui/(?!react-icons)(.+)": "packages/react-components/\\1/lib/index.js"
        }
      }
    ],

    "annotate-pure-calls",
    "@babel/transform-react-pure-annotations"
  ]
}

now we can run yarn workspace @fluentui/react-text babel lib/ -d dist/lib

Originally posted by @Hotell in #27250 (comment)