This problem affected #20918:
ERR! [12:17:49 PM] x SyntaxError: office-ui-fabric-react\packages\react-button\lib-commonjs\components\CompoundButton\useCompoundButtonStyles.js: Evaluation of a code fragment failed, this is a bug, please report it
ERR! 7 | exports.compoundButtonClassName = 'fui-CompoundButton';
ERR! 8 | exports.cBClassName = 'fui-CompoundButton';
ERR! > 9 | const compoundButtonSecondaryContentClassName = `${exports.cBClassName}-secondaryContent`;
ERR! | ^^^^^^^^^^^^^^^^^^^
ERR! 10 | const useRootStyles = react_make_styles_1.makeStyles({
ERR! 11 | // Base styles
ERR! 12 | base: {
ERR! at File.buildCodeFrameError (office-ui-fabric-react\node_modules\@babel\core\lib\transformation\file\file.js:244:12)
ERR! at NodePath.buildCodeFrameError office-ui-fabric-react\node_modules\@babel\traverse\lib\path\index.js:133:21)
I traced it down to a minimal repro:
import { makeStyles } from '@fluentui/react-make-styles';
import { className, selector } from './consts';
export const useStyles = makeStyles({
root: {
[selector]: { color: 'red' },
[`& .${className}`]: { color: 'blue' },
},
});It works fine when selector is defined in current file as Babel can evaluate it:
|
const argumentPath = callExpressionPath.get('arguments.0') as NodePath<t.ObjectExpression>; |
|
|
|
const evaluationResult = argumentPath.evaluate(); |
But it fails when computed key is complex like ${exports.cBClassName}-secondaryContent or imported from a separate file.
This problem affected #20918:
I traced it down to a minimal repro:
It works fine when
selectoris defined in current file as Babel can evaluate it:fluentui/packages/babel-make-styles/src/plugin.ts
Lines 549 to 551 in 8985d65
But it fails when computed key is complex like
${exports.cBClassName}-secondaryContentor imported from a separate file.