Emotion 11 is trying to use previous styled-base dependency when bundling with Babel

[robertfyffe]

When I bundle my library that has the below dependency versions, the component is trying to import the older version of styled-base rather than the latest styled/base.

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProductDetails = void 0;
var _styledBase = _interopRequireDefault(require("@emotion/styled-base")); // This is wrong
...
...

This causes a problem when trying to install this library in a peer application. I get an error saying it cannot find @emotion/styled-base due to it not being installed as the new version 11 does not require it.

I did notice within this library that styled-base is being installed as a dependency, but I assume thats because one of my storybook modules has it as a dependency.

It seems like this is causing a confusion when bundling?

Environment information:

 "dependencies": {
    "@babel/runtime": "^7.15.3",
    "@emotion/cache": "^11.4.0",
    "@emotion/is-prop-valid": "^1.1.0",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@emotion/stylis": "^0.8.5",
  },

[dylanpoll]

this appears to be a issue others have had in the past moving into 11, I am currently just rolling back to release within 10 due to the complications with using 11 I have found, but it certainly could be better handled especially for instances where people are using TS.

honestly the team on this is awesome, this is no real strike against them, but it does seem like a legitimate problem, especially when generic imports with yarn will automatically position you to 11 despite the dependency issue still being present for enough to see a number of bug reports.

this is a link to a comment about it in the 11 bug thread, but there are a number of those comments. https://github.com/emotion-js/emotion/issues/1606#issuecomment-757710120

again, love the fact people work so hard on things like this that many use for free. Simple fix for me tbh.

[Andarist]

This might mean that you are using babel-plugin-emotion (v10) rather than @emotion/babel-plugin (v11). It's really hard to tell without a repro case but @emotion/styled-base is nowhere in the v11 codebase so if you are using v11 dependencies exclusively there is a zero chance of this happening.

[ciaranschutte]

I had this issue using no emotion babel plugin. Using @emotion/babel-plugin fixed it. Maybe docs could be updated to reflect a potential need for this as docs currently read : "@emotion/babel-plugin is highly recommended, but not required in version 8 and above of Emotion."

[srmagura]

@ciaranschutte @emotion/babel-plugin is not necessary to use Emotion 11. If you can share a repository that demonstrates this issue, I can look into it.

Are you using Storybook? I believe Storybook is still using Emotion 10 internally.