search

microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 61 forks source link

babel-preset: transforms don't work with native ESM packages that use `.mjs` #513

Closed Hotell closed 7 months ago

Hotell commented 8 months ago

if package A imports from package B, where B ships native ESM via exports map (exports#import ) , where those files have .mjs extension and all relative imports use .mjs, babel processing fails.

Stack trace

it explodes on https://github.com/microsoft/griffel/blob/main/packages/babel-preset/src/utils/evaluatePathsInVM.ts#L106

while invoking babel valueToNode function , logging value arg throws following:

TypeError: Cannot read properties of undefined (reading 'fontFamilyBase')
      at /Users/martinhochel/Projects/msft/fluentui/packages/react-components/react-divider/lib/components/Divider/useDividerStyles.styles.js:32:33
      at _wrap (/Users/martinhochel/Projects/msft/fluentui/packages/react-components/react-divider/lib/components/Divider/useDividerStyles.styles.js:18:12)
      at /Users/martinhochel/Projects/msft/fluentui/packages/react-components/react-divider/lib/components/Divider/useDividerStyles.styles.js:23:23
      at /Users/martinhochel/Projects/msft/fluentui/packages/react-components/react-divider/lib/components/Divider/useDividerStyles.styles.js:198:3
      at Script.runInContext (node:vm:135:12)
      at Module.evaluate (/Users/martinhochel/Projects/msft/fluentui/node_modules/@linaria/babel-preset/lib/module.js:283:12)
      at evaluate (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/utils/evaluatePathsInVM.js:22:9)
      at evaluatePathsInVM (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/utils/evaluatePathsInVM.js:82:21)
      at evaluatePaths (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/utils/evaluatePaths.js:22:51)
      at PluginPass.exit (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/transformPlugin.js:114:59)

original error

Error: /Users/martinhochel/Projects/msft/fluentui/packages/react-components/react-divider/lib/components/Divider/useDividerStyles.styles.js: don't know how to turn this value into a node
    at Object.valueToNode (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/types/lib/converters/valueToNode.js:74:9)
    at evaluatePathsInVM (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/utils/evaluatePathsInVM.js:85:43)
    at evaluatePaths (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/utils/evaluatePaths.js:22:51)
    at PluginPass.exit (/Users/martinhochel/Projects/msft/fluentui/node_modules/@griffel/babel-preset/src/transformPlugin.js:114:59)
    at newFn (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/visitors.js:160:14)
    at NodePath._call (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/path/context.js:90:8)
    at TraversalContext.visitQueue (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/traverse/lib/index.js:52:34)
    at transformFile (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/core/lib/transformation/index.js:82:31)
    at transformFile.next (<anonymous>)
    at run (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at Function.<anonymous> (/Users/martinhochel/Projects/msft/fluentui/node_modules/@babel/core/lib/transform-file.js:27:33)
    at Generator.next (<anonymous>)
    at step (/Users/martinhochel/Projects/msft/fluentui/node_modules/gensync/index.js:261:32)
    at /Users/martinhochel/Projects/msft/fluentui/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/martinhochel/Projects/msft/fluentui/node_modules/gensync/index.js:223:11)
    at /Users/martinhochel/Projects/msft/fluentui/node_modules/gensync/index.js:189:28
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  code: 'BABEL_TRANSFORM_ERROR'
}

Repro

layershifter commented 7 months ago

@Hotell indeed, currently both @griffel/babel-preset & @griffel/webpack-loader use Linaria v3. Linaria v3 does not support .mjs and will not as it's EOL. The longterm plan is to drop @griffel/babel-preset and have only bundler plugins i.e. @griffel/webpack-loader, etc.

I created a POC using @wyw-in-js/transform (https://github.com/microsoft/fluentui/pull/30992), once it will have proper resolver configured it should have .mjs extensions.

layershifter commented 7 months ago

FYI I improved error reporting for current tooling, so errors won't be so cryptic anymore, https://github.com/microsoft/griffel/pull/522.