Babel helpers check (preflightCheck) interferes with presets/plugin ordering
mbrowne opened this issue · 3 comments
I am having an issue with babel-plugin-styled-components
not working (apparently it runs too late) when @babel/preset-env
is also present. It works fine when compiling with Babel directly.
After quite a bit of debugging, I found that the preFlight check is what's causing the issue, specifically this line:
rollup-plugin-babel/src/preflightCheck.js
Line 38 in 4d8c0c5
I'm not sure what's going on inside of @babel/core
, but it must be caching something, because when I disable preflightCheck
it works fine. The problem seems to be that it affects how the current file is transpiled because of the filename
option. If you pass some other file for filename
, that also avoids the issue, e.g.:
transformSync(inputCode, {...options, filename: '/path/to/package.json'})
As a workaround, I'm going to add the skipBabelHelpersCheck
option to my rollup config until this issue is resolved:
babel({ skipBabelHelpersCheck: true, ... })
Here is my Babel config:
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-export-default-from',
[
'@babel/plugin-proposal-class-properties',
{
loose: true, // important; needed to match TypeScript semantics
},
],
// helps reduce bundle size
'@babel/transform-runtime',
[
'babel-plugin-styled-components',
{
// Better Debugging -- adds className and displayName
displayName: true,
// Suport for SSR
ssr: true,
// Template String Transpilation -- smaller output
transpileTemplateLiterals: true,
// Dead Code Elimination
pure: true,
},
],
],
}
Would be helpful if you could share a repository with the issue reproduced in it.
-
I am also facing the same issue with
babel-plugin-styled-components
. Everything works fine when compiling directly with Babel. -
There is already one issue opened in
babel-plugin-styled-components
repository #243 for same problem. -
@Andarist as asked in above comment, I have created repository rollup-babel-issue-repo to reproduce this issue.
- Upon installation execute
npm run build
and verify the compiled file created in dist folder - If everything is fine, displayName must be set on Button component.
- Upon installation execute
-
For other users who are also facing the similar issue, following workarounds could be applied:
- Use version
1.10.5
ofbabel-plugin-styled-components
instead of 1.10.6 . It works as expected - Otherwise as @mbrowne suggested, install
rollup-plugin-babel
version5.0.0-alpha.0
And configurerollup-plugin-babel
as following in rollup.config.js,This also fixes the issuebabel({ skipBabelHelpersCheck: true, babelHelpers: 'bundled' })
@ppiyush13 thanks for the repro! Seems like babel-plugin-styled-components
implements caching its results based on the filename. That cache is global and thus this breaks in combination with our preflight check. I'm not entirely sure if this can be easily fixed - but it's worth reporting the problem to styled-components team. A potential fix would be to cache those per babel run - with a cache kept on Babel's state
.
I don't think there is anything actionable here on our side (workarounds have been mentioned by you), so I'm going to close this as I'm cleaning up the issues. Feel free to comment back though I'll make sure I get back to you sooner than the last time. Hope you understand.