warning on build: Attempted import error: 'withCSSContext' is not exported from '@emotion/core'.

Bug Report

We are using storybook in the project along with docz, and it seems there is conflicts with storybook around emotion/core and other emotion dependencies. I’ve tried to run docz with basic install, but it requires to install a peer dependencydocz-theme-default, and it requires emotion/core@10 while storybook/react requires emotion/core@0.x.x

> docz build

✓ Parsing mdx files 77 ms
✓ Initializing data server 132 ms
✓ Running onPreBuild() 0 ms
✓ Creating production build 23.2 secs

⚠  warning   Compiled with warnings.

⚠  warning   ./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js
Attempted import error: 'withCSSContext' is not exported from '@emotion/core'.
 @ ./node_modules/@emotion/styled/dist/styled.esm.js
 @ ./node_modules/docz-theme-default/dist/index.m.js
 @ ./.docz/app/root.jsx
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/docz-core/node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@babel/polyfill/lib/index.js ./.docz/app/index.jsx
⚠  warning
Search for the keywords to learn more about each warning.
⚠  warning   To ignore, add // eslint-disable-next-line to the line before.


File sizes after gzip:

  487.49 KB  dist/static/js/vendors.15dee703.js
  14.89 KB   dist/static/js/src-docs-bicycling-layer~src-docs-circle~src-docs-google-map~src-docs-ground-overlay~src-docs-marker~35867d2f.a336d15c.js
  3.9 KB     dist/static/js/runtime~app.456cfeac1ae35546dcc7.js
  2.26 KB    dist/static/js/src-docs-shapes.e551947c.js
  1.77 KB    dist/static/js/src-docs-polyline.76cf78ef.js
  1.73 KB    dist/static/js/src-docs-polygon.8ae61def.js
  1.72 KB    dist/static/js/src-docs-circle.9d3dcb80.js
  1.63 KB    dist/static/js/src-docs-ground-overlay.10de9680.js
  1.57 KB    dist/static/js/src-docs-bicycling-layer.c30362e8.js
  1.56 KB    dist/static/js/src-docs-rectangle.e336ea4d.js
  1.54 KB    dist/static/js/src-docs-marker.44b0003f.js
  1.51 KB    dist/static/js/app.74fb59c9.js
  1.46 KB    dist/static/js/src-docs-google-map.2dcba111.js
  1.13 KB    dist/static/js/src-docs-changelog.b962d24a.js
  1.09 KB    dist/static/js/src-docs-main.d020e437.js
  438 B      dist/static/js/15.5748e0ef.js

✓ Running onPostBuild() 0 ms

Node: v11.4.0 docz: 0.13.7

[RobinCsl]

Hi @JustFly1984, I wanted to thank you for pointing this out: the realisation that it was conflicting with Storybook was what helped me towards a solution for using docz inside a project with Storybook too.

My trick was to create a docs folder, and add a package.json there with all dependencies necessary for docz to work. Then, because I really wanted to document from the root of my repo and not just from this docs folder, I used the following doczrc.js file:

export default {
  src: '..',
  dest: '../.docz/dist',
  native: true,
};

and having /index.mdx at the root of my repo was correctly taken into account by docz, to give the following generated docs: https://wizardly-bassi-29ad3e.netlify.com/

If you want to see more of the code, it’s currently in that PR (https://github.com/kiwicom/universal-components/pull/190)

Hope that can help you in any way!

[JustFly1984]

@danilosilvadev run npm ls @emotion/styled-base to see which other part of your sub-dependency tree is requiring older version of @emotion/styled-base

@RobinCsl We’ve end up separating docz and storybook and into separate packages with lerna and creating npm @react-google-maps/api