Docz: Can't resolve '@emotion/core' Webpack Error on docz build

[auermi]

Bug Report

Describe the bug

I am able to work and run the site locally, but when I go to build, I am getting a Webpack error for all 3 files on my site 1 .js and 2 .mdx files.

When running the docz build command, I am getting Webpack errors for all files (JS and MDX). For example:

ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Can't resolve '@emotion/core' in '/Users/michael/Documents/quill'

File: ../home.mdx

I am not using emotion. The only dependencies in my package.json are docz, react, and react-dom

To Reproduce

1. Run the build command for docz

Expected behavior

Should build successfully

Environment

• OS: OSX 10.14.6
• Node version: v11.6.0

[rakannimer]

Hey @auermi,

Thanks for reporting this issue.

Could you share the repo, a repro or home.mdx and its imported files ?

[auermi]

@rakannimer

home.mdx

---
name: Home
route: /
---

# Quill

color.mdx

---
name: Color
route: /color
menu: Foundations
---

import { Playground } from 'docz'

import { ColorGroup } from './color.js'

# Color

This is a list of all approved colors for use across Sigstr's paid UI properties.

<ColorGroup/>

color.js

import React from 'react'

export const ColorBlock = ({
  hex,
  label
}) => {
  return (
    <div style={{
      width: 160,
      marginRight: 32,
      marginBottom: 48
    }}>
      <div style={{
        height: 96,
        width: 160,
        backgroundColor: '#' + hex,
        marginBottom: 12,
        borderRadius: 3
      }}>
      </div>
      <div>{label}</div>
      <div>{hex}</div>
    </div>
  );
};

const colors = ({
  onyx: '1B262B',
  basalt: '3D4D54',
  slate: '6A7173',
  tufa: 'ACB3B6',
  limestone: 'DEE1E3',
  marble: 'ECECEC',
  chalk: 'F2F4F5',
  blue: '76B8FF',
  error: 'D13842',
  graph_blue: '00CCFF',
  graph_pink: 'FF6EE3',
  graph_yellow: 'FFD26E',
  leaf: '75C97B',
  moss: '2E7533',
  orange: 'FFAE76',
  purple: '885FBD',
  red: 'FF8276',
  sigstr: '4aa951',
  tag_blue: '005D7D',
  tag_yellow: '856D39',
  yellow: 'FFC74C'
});

export const ColorGroup = () => {
  const blocks = Object.entries(colors).map(([key, value]) => (<ColorBlock hex={value} label={key} />));
  return (
    <div style={{
      display: 'flex',
      flexWrap: 'wrap'
    }}>
      {blocks}
    </div>
  );
};

[auermi]

@rakannimer Hmm still getting this error. Only thing I changed was adding the docz dev and docz build commands to the package.json. I ran the dev command first, then closed it. Then I ran the build command which is where I am seeing this error. Would it have to do with my node or yarn version?

[rakannimer]

Hey @auermi, I'm sorry for that, I was able to reproduce the error too !

I'm working on a fix right now, will ping here in a bit when it's fixed/released

[rakannimer]

Ok, it's fixed in [email protected] and I updated the issue repo.

Thanks for catching and reporting it 👍

[auermi]

@rakannimer Thanks so much! Working now ✌️