Docz: Failed to compile v1 and higher

[zarabotaet]

Bug Report

Failed to compile with 3 errors                                                              22:07:38
 error  in ./node_modules/docz/dist/index.esm.js

Module parse failed: Unexpected token (16:38)
You may need an appropriate loader to handle this file type.
| import { MDXProvider } from '@mdx-js/tag';
|
> const BasePlayground = loadable(() => import('./chunk.esm2.js'));
| const Playground = props => window && typeof window !== 'undefined' ? (createElement(Suspense, { fallback:
null },
|     createElement(BasePlayground, Object.assign({}, props)))) : null;

 @ ./.docz/app/root.jsx 9:0-59 17:2-15 20:19-23 27:25-31
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

 error  in ./node_modules/docz-theme-default/dist/index.esm.js

Module parse failed: Unexpected token (251:34)
You may need an appropriate loader to handle this file type.
| `;
|
> const CodeMirror = loadable(() => import('./chunk.esm2.js'));
| const getLanguage = (children) => {
|     const defaultLanguage = 'jsx';

 @ ./.docz/app/root.jsx 11:0-39 18:29-34
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

 error  in ./.docz/app/imports.js

Module parse failed: Unexpected token (8:11)
You may need an appropriate loader to handle this file type.
| export var imports = {
|   'src/components/AccountNotifications/accountNotifications.mdx': function srcComponentsAccountNotificationsAccountNotificationsMdx() {
>     return import(
|     /* webpackPrefetch: true, webpackChunkName: "src-components-account-notifications-account-notifications" */
|     'src/components/AccountNotifications/accountNotifications.mdx');

 @ ./.docz/app/root.jsx 12:0-36 28:13-20
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

Expected behavior

In dev and prod mode have this error

Environment

• OS: [ Windows 10]
• Node 8.12.0/npm 6.9.0

[ericclemmons]

Same error for me with [email protected] on an existing project (macOS, Node v8.11.4).

However, a fresh install works fine.

There must be something conflicting with the current project, based on what I saw here:

https://github.com/webpack/webpack/issues/8656#issuecomment-484134366

tldr;

• npm ls acorn showed a missing peerDependency.
• Manually add npm i --save-dev [email protected]
• Add resolutions to package.json
• 🎉 It worked!

diff --git a/package.json b/package.json
index e5266c46..54fd5e41 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,10 @@
     "test": "nps test",
     "writeTranslations": "node scripts/writeTranslations.js"
   },
+  "resolutions": {
+    "webpack/acorn": "6.1.1"
+  },
@@ -91,11 +87,14 @@
     "@sindresorhus/fnv1a": "1.0.0",
     "@starbucks/eslint-config-starbucks": "1.1.0",
     "@starbucks/openapi-mock": "4.1.0",
+    "acorn": "6.1.1",
     "artillery": "1.6.0-26",
     "babel-eslint": "10.0.1",
     "chai": "4.2.0",
     "cross-env": "5.1.3",
     "deep-freeze": "0.0.1",
+    "docz": "1.0.4",
+    "docz-theme-default": "1.0.4",
     "dotenv-safe": "6.1.0",
     "easy-fix": "3.1.0",
     "eslint": "5.7.0",
@@ -114,6 +113,8 @@
     "nps": "5.9.0",
     "nps-utils": "1.5.0",
     "prettier": "1.12.1",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "require-inject": "1.4.4",
     "sinon": "7.2.3",
     "sinon-chai": "3.3.0",

[fi3ework]

As @ericclemmons mentioned. This should be cuased by Webpack not docz.
Accroading the conversation under this https://github.com/webpack/webpack/issues/8656#issuecomment-484134366 issue. There are some workarounds.

• Use yarn to install instead of npm
• Lock webpack version to [email protected] and reinstall. This bug starts from 4.29.0.

There are also some more useful workarounds in the conversation but they are a little more complicated. Have a try. 😀

[huchenme]

@fi3ework can we lock the webpack version or acorn in docz instead? currently webpack or acorn is not listed in our project dependencies and we do not want to add one just for this issue and need to maintain one more package (remember why the dependency is there and remember to upgrade it when bug is fixed, especially it is not easy to comment in package.json)

[fi3ework]

@huchenme
I believe it's a solution. However, I'm not pretty sure does it really can solve the problem as currently no reproduced repo is provided and due to https://github.com/pedronauck/docz/issues/817, after lock webpack to 4.28.4. The problem still exist. Could you provide a minimal reprodced repo or give me a hint how to reproduce it?

[huchenme]

Sure, I will find some time to create one
On 22 Apr 2019, 1:02 PM +0800, Wee [e-mail], wrote:

@huchenme
I believe it's a solution. However, I'm not pretty sure does it really can solve the problem as currently no reproduced repo is provided and due to #817, after lock webpack to 4.28.4. The problem still exist. Could you provide a minimal reprodced repo or give me a hint how to reproduce it?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Glazy]

Hey @huchenme, did you manage to find time to come up with a reproduction repo?

[huchenme]

Sorry will try later today
On 28 Apr 2019, 9:49 AM +0800, Luke Glazebrook [e-mail], wrote:

Hey @huchenme, did you manage to find time to come up with a reproduction repo?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Glazy]

Thanks @huchenme :raised_hands:

[huchenme]

@Glazy sorry I could not reproduce it on my personal laptop today, I might spend sometimes deep into the issue this week using work laptop

[huchenme]

@Glazy I managed to create a repo, the error is not exactly the same as what described here so I created another issue: https://github.com/pedronauck/docz/issues/841

[MarkMurphy]

• Use yarn to install instead of npm

Using yarn instead of npm doesn't prevent this problem.

[MarkMurphy]

I believe I was able to reproduce this issue with this repo: https://github.com/MarkMurphy/docz-issue-808

[codeBelt]

I have the same issue with Create React App 3.0. Here is what I've noticed:

To get it working with CRA 3 I need to use docz version 1.0.0-rc.9 and use npm. Using yarn will cause problems. As soon as I update to docz: 1.1.0 I get the following error. So I am currently stuck on docz: 1.0.0-rc.9.

./node_modules/docz/dist/index.esm.js 23:38
Module parse failed: Unexpected token (23:38)
You may need an appropriate loader to handle this file type.
| import { MDXProvider } from '@mdx-js/react';
| 
> const BasePlayground = loadable(() => import('./chunk.esm2.js'));
| const Playground = props => typeof window !== 'undefined' ? createElement(Suspense, {
|   fallback: null

Here is a working repo with version docz: 1.0.0-rc.9 https://github.com/codeBelt/docz-typescript-sass-cra and if you update you will get the above error.

[doasync]

Run yarn add --dev webpack

[arvigeus]

This solved it for me. No need to install webpack

[codeBelt]

If I add yarn add --dev webpack docz builds correctly but when I open the browser I get the following issue:

TypeError: Cannot read property 'expirationTime' of undefined
processUpdateQueue
node_modules/react-dom/cjs/react-dom.development.js:16319
  16316 | var update = queue.firstUpdate;
  16317 | var resultState = newBaseState;
  16318 | while (update !== null) {
> 16319 |   var updateExpirationTime = update.expirationTime;
        | ^  16320 |   if (updateExpirationTime < renderExpirationTime) {
  16321 |     // This update does not have sufficient priority. Skip it.
  16322 |     if (newFirstUpdate === null) {

[billjs]

If I add yarn add --dev webpack docz builds correctly but when I open the browser I get the following issue:

TypeError: Cannot read property 'expirationTime' of undefined
processUpdateQueue
node_modules/react-dom/cjs/react-dom.development.js:16319
  16316 | var update = queue.firstUpdate;
  16317 | var resultState = newBaseState;
  16318 | while (update !== null) {
> 16319 |   var updateExpirationTime = update.expirationTime;
        | ^  16320 |   if (updateExpirationTime < renderExpirationTime) {
  16321 |     // This update does not have sufficient priority. Skip it.
  16322 |     if (newFirstUpdate === null) {

yarn add react-hot-loader@latest --dev

It can solve your problem.

[CarlosOlave]

I was having the same issue even with resolutions in my package.json. Removing the resolution and adding react-hot-loader worked for me.

[huchenme]

@rakannimer what is the reason this issue get closed?