docz: Failed to compile v1 and higher

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 16
  • Comments: 19 (4 by maintainers)

Most upvoted comments

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.

@rakannimer what is the reason this issue get closed?

Same error for me with docz@1.0.4 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 acorn@6.1.1
  • 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",

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

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) {

@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

@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

Sure, I will find some time to create one On 22 Apr 2019, 1:02 PM +0800, Wee notifications@github.com, 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.