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

[JustFly1984]

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/[email protected]

> 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]

@RobinCsl Thank you for sharing solution! I wanted to add lerna package but your solution looks good

[danilosilvadev]

I'm getting this problem today. I did try everything, included create a new project, but always is getting this warning and the project is not loading.

./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js
Attempted import error: 'withCSSContext' is not exported from '@emotion/core'.

I'm using CRA but not using storybook. So i don't see what is the problem.

[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

[danilosilvadev]

@JustFly1984 this is the output:

npm ls @emotion/styled-base
[email protected] /Users/criacaolucas/Desktop/bluefoot/blueTex2/bluedocs_gitlab/bluedocz
├─┬ [email protected]
│ └─┬ @emotion/[email protected]
│   └── @emotion/[email protected]
└─┬ [email protected]
  └─┬ @emotion/[email protected]
    └── @emotion/[email protected]

What can i do with this information?

[RobinCsl]

I believe this information tells you that you have conflicting versions of @emotion/styled-base. That's why your project is not working, because withCSSContext is trying to be imported from version 0.10.6 instead of version 10.0.5.
My solution above https://github.com/pedronauck/docz/issues/557#issuecomment-453732468 could help you: the trick was to create a separate folder with a separate package.json file, dedicated just to docz. Then, you can use the doczrc.js configuration I gave above too, and docz should be able to parse your mdx files in your CRA project.
Hope that helps!

[JustFly1984]

@danilosilvadev Yes, exactly. You have a conflict of dependencies of [email protected] and [email protected]

[email protected] has outdated version. You can post an issue in their repo and link this issue there, and meanwhile you can use lerna, or just separate docz to separate project with its own package.json. Anyway you could get some issues with modules conflict with parent directory package.json, so I would recommend to use lerna