rollup / rollup-plugin-babel

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

const transformed = transformSync(inputCode, options);

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.
For other users who are also facing the similar issue, following workarounds could be applied:

Use version 1.10.5 of babel-plugin-styled-components instead of 1.10.6 . It works as expected
Otherwise as @mbrowne suggested, install rollup-plugin-babel version 5.0.0-alpha.0
And configure rollup-plugin-babel as following in rollup.config.js,
```
babel({
	skipBabelHelpersCheck: true,
	babelHelpers: 'bundled'
})
```
This also fixes the issue

@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.

Babel helpers check (preflightCheck) interferes with presets/plugin ordering