v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token #704

davidtaboas · 2019-03-22T11:09:37Z

Bug Report

Describe the bug

When I try to run docz dev I get multiple errors regarding an appropriate loader

✖ Docz
  Compiled with some errors in 29.12s



 ERROR  Failed to compile with 3 errors              12:00:39 PM

 error  in ./node_modules/docz/dist/index.esm.js

Module parse failed: Unexpected token (15: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 => 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 (245:30)
You may need an appropriate loader to handle this file type.
| `;
|
> const CodeMirror = lazy(() => 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/index.mdx': function srcIndexMdx() {
>     return import(
|     /* webpackPrefetch: true, webpackChunkName: "src-index" */
|     'src/index.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

Environment

node v10.15.1
npm v6.8.0
react v16.8.4
npm ls webpack
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]

Additional context/Screenshots

The text was updated successfully, but these errors were encountered:

mlshv · 2019-03-22T11:51:11Z

Having the same issue. Though it was similar to #596, but I couldn't fix it by downgrading webpack

davidtaboas · 2019-03-22T11:52:57Z

@mlshv Same here!

pedronauck · 2019-03-22T16:32:06Z

I'll close this issue in order do #596

davidtaboas · 2019-03-25T09:04:12Z

@pedronauck But #596 doesn't show the same error and the solution is not the same

michaelw85 · 2019-04-02T06:20:43Z

Having the same issue with rc7

Node v10.15.1
NPM 6.9.0

"react": "^16.8.6",
"react-dom": "^16.8.6",

+-- [email protected]
| `-- [email protected]
|   `-- [email protected]  deduped
`-- [email protected]

Downgrading webpack using npm i -D [email protected] resolves the issue for me.

JoeCMorgan · 2019-04-02T08:51:37Z

Having the same issue with rc7. Downgrading my webpack version to 4.28.4 does not solve it.

michaelw85 · 2019-04-02T10:09:05Z

@JoeCMorgan I also tried a clean project using Yarn instead of npm and that seems to work without the downgrade.

cupofjoakim · 2019-04-02T11:54:48Z

Just wanted to chime in and say that I'm also having this issue on rc7. The workaround mentioned in #596 (#596 (comment)) is valid if you're able to use yarn, but I for one can't go that route due to how our packages are built in our CI engine.

JoeCMorgan · 2019-04-02T13:14:15Z

Unfortunately I'm still getting the issue with yarn and a clean project:

yarn
yarn add docz@next docz-theme-default@next --dev
add the optional scripts to package.json
yarn docz:dev

Still getting the same error.

davidtaboas · 2019-04-03T09:01:05Z

For me, use yarn solves the problem, but it's a temporal solution because I need to use npm.

agonbina · 2019-04-04T12:55:15Z

Yep, it would be great to make this work properly with npm. I had to install the package and its dependencies with yarn otherwise it would not work.

pedronauck · 2019-04-04T22:51:15Z

Digging into this, I saw that has a problem related to the way that npm solves dependencies, you can see more details about this here:
webpack/webpack#8656

I'll try to find some solution and release in the next version.

pedronauck · 2019-04-04T23:00:25Z

I'll pin acorn to the right dependency version on docz, but if you want some solution, try this:

Keep docz dependencies like that:

"devDependencies": {
  "docz": "1.0.0-rc.7",
  "docz-core": "1.0.0-rc.7",
  "docz-theme-default": "1.0.0-rc.7",
},

It's important to keep absolute version without ^.

Then, add [email protected] as a devDependency as well:

$ npm add [email protected] --save-dev

Finally, make a clean install of your packages

$ rm -rf node_modules package-lock.json && npm install

This could work 👍

dannyrb · 2019-04-05T13:18:33Z

I'm experiencing this issue. The above fix does not resolve.

"devDependencies": {
    "acorn": "6.0.5",
    "docz": "1.0.0-rc.8",
    "docz-core": "1.0.0-rc.8",
    "docz-theme-default": "1.0.0-rc.8",
    ...
}

I have a single .mdx file:

/src/index.mdx

---
name: Getting Started
route: /
---

# Getting Started

I deleted yarn.lock and node_modules
Clean install.

When I run docz dev, I see identical output to what's mentioned by the top post in this thread.

pedronauck · 2019-04-05T13:51:51Z

Did you try to downgrade webpack @dannyrb?

dannyrb · 2019-04-05T14:25:19Z

Cleaning .docz, yarn.lock, package-lock.json, node_modules between attempts:

👍 Works

npm install
npm run docz:dev

👎 Fails

yarn install
yarn run docz:dev

Solution

yarn install
yarn add -D [email protected]
yarn run docz:dev

Thanks for your help, @pedronauck 👍 I know answering questions like this one aren't fun, but I do really, really appreciate your time <3

elv1n · 2019-04-05T15:51:41Z

Downgrading webpack or setting acorn to 6.0.5 didn't help

❯ yarn why webpack
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "webpack"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "react-scripts" depends on it
   - Hoisted from "react-scripts#webpack"
   - Hoisted from "docz#docz-core#webpack"
info Disk size without dependencies: "2.34MB"
info Disk size with unique dependencies: "7.26MB"
info Disk size with transitive dependencies: "27.41MB"
info Number of shared dependencies: 118
✨  Done in 1.27s.

Do you have an ideas what else can be an issue?

JoeCMorgan · 2019-04-11T14:33:05Z

Still broken for me as well, reverted back to version 0.13.7 for now.

thilak-rao · 2019-04-13T13:42:24Z

I'm trying to migrate Docz from v0.13.7 to v1.0.0. My project is in TypeScript, so I have my doczrc.js configured like this:

{
  wrapper: "wrapper.tsx",
  typescript: true
}

and wrapper.tsx contains this:

import * as React from "react";
import { AppContext } from "./src/AppContext";
import { LanguagePicker } from "./src/LanguagePicker";

let defaultLanguage = "en-us";

const Wrapper: React.FunctionComponent = (props) => {
  return (
    <AppContext lang={defaultLanguage}>
      <div>{props.children}</div>
      <div>
        <LanguagePicker/>
      </div>
    </AppContext>
  );
};

export default Wrapper;

This setup used to work, but after upgrading to docz v1, I get this error:

Module parse failed: Unexpected token (7:13)
You may need an appropriate loader to handle this file type.
| let defaultLanguage = "en-us";
| 
> const Wrapper: React.FunctionComponent = (props) => {
|   return (
|     <AppContext lang={defaultLanguage}>

kennyglenn · 2019-05-08T15:00:36Z

This issue should not be closed.

sanohin · 2019-05-09T11:36:33Z

Also instead of installing [email protected], you can specify it in resolutions in package.json

"resolutions": {
    "docz/**/webpack": "4.28.4"
}

gokulkrishh · 2019-05-13T15:02:56Z

@sanohin Adding above resolution and clean yarn install after that works for me. Thanks

aarondancer · 2019-05-13T22:05:36Z

TLDR: Try webpack 4.31.0

I was facing this issue with 1.2.0. It took me an entire day, but upgrading all of my babel-related and
webpack packages fixed it for me.

I tried pretty much everything in this thread, related threads, and Webpack issues and none of them worked.

After playing around with different combinations of package versions, I think the one that fixed it for me was upgrading webpack to 4.31.0.

adrianoresende · 2019-05-26T23:33:47Z

@sanohin Thanks! It solves for me.

wangpin34 · 2019-05-28T06:19:12Z

@sanohin Works for me, thanks.

JoeCMorgan · 2019-05-28T10:34:35Z

@sanohin finally a fix that works, thanks a lot.

emersonlaurentino · 2019-05-28T19:23:33Z

Also instead of installing [email protected], you can specify it in resolutions in package.json
"resolutions": {
    "docz/**/webpack": "4.28.4"
}

apparently this does not work when using workspaces

marlonmleite · 2019-06-04T11:51:07Z

@pedronauck why this is closed?

I'm use CRA and installed [email protected], but after run the script there error ocurred:

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('./Playground.esm.js'));
| const Playground = props => typeof window !== 'undefined' ? createElement(Suspense, {
|   fallback: null

aleksanderd · 2019-06-04T15:30:56Z

+1

jacobjonsson · 2019-06-11T11:54:00Z

Switching back to Storybook... such a waste of time.

No need to add those comments, the maintainer is doing a great job and does not deserve comments like that.

JorgeCeja · 2019-06-16T00:50:17Z

Also instead of installing [email protected], you can specify it in resolutions in package.json
"resolutions": {
    "docz/**/webpack": "4.28.4"
}

This method only works when doing the following:

Specify the resolutions in package.json as mentioned above

yarn: rm -rf node_modules yarn.json && yarn
or
npm: rm -rf node_modules package-lock.json && npm install

mlshv · 2019-06-17T10:13:07Z

Couldn't get it working by any of these methods:

downgrading to [email protected]
upgrading to [email protected]
[email protected] or @4.31.0 in resolutions

What is actually worked:

"acorn": "^6.1.1",
"webpack": "~4.34.0",

rm -rf node_modules package-lock.json && npm i

axe312ger · 2019-06-18T20:06:19Z

Also instead of installing [email protected], you can specify it in resolutions in package.json
"resolutions": {
    "docz/**/webpack": "4.28.4"
}

This would only work with yarn. resolutions is not supported by npm.

For npm this might work https://www.npmjs.com/package/npm-force-resolutions

To verify what you have installed and resolved, use:

yarn list webpack
npm list webpack

Still: Does not fix it for me, started with a fresh 1.2.0 and just try to embed a wrapper to provide my styled-components theme

export default {
  src: 'src/components/mdx',
  files: 'docs/**/*.{md,markdown,mdx}',
  wrapper: 'src/docz-wrapper.js'
}

src/docz-wrapper.js

import React from 'react'
import { ThemeProvider } from 'styled-components'
import themeConfig from './utils/styling/theme.config'

export default ({ children }) => (
  <ThemeProvider theme={themeConfig}>{children}</ThemeProvider>
)

Any ideas? Now trying docz@~0.0.0 🤷‍♂

Update:

Turned out this is not related at all to my issue, my config above is wrong. I exclude the wrapper by setting src so deep down. This works now:

export default {
  files: './docs/**/*.{md,markdown,mdx}',
  wrapper: 'src/docz-wrapper'
}

gugadev · 2019-06-20T14:40:34Z

My case is particular. I have a monorepo:

elements/
lib/
docs/

docs depends of lib, so, I use Lerna to handle this dependencies. I have tried all advices written here and the resolutions was the only one that works.

Use Yarn as package manager: npm can't perform the resolutions field.
Remove node_modules and lock file.

Done!

nanxiaobei · 2019-09-09T08:40:57Z

I've tried the solutions above, but no one works, still not solved this problem.
Anyone have a perfect solution? help me...

pedronauck closed this as completed Mar 22, 2019

davidtaboas mentioned this issue Mar 26, 2019

Following "Getting Started" guide results in compilation errors #718

Closed

davidtaboas changed the title ~~v1.0.0-rc.3 Compiled with errors: Module parse failed: Unexpected token~~ v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token Apr 4, 2019

pedronauck mentioned this issue Apr 4, 2019

Module parse failed: Unexpected token (473:30) #596

Closed

pedronauck reopened this Apr 4, 2019

pedronauck closed this as completed Apr 4, 2019

j8seangel mentioned this issue Apr 11, 2019

Fix docz GlobalFishingWatch/map-components#44

Closed

AryanJ-NYC mentioned this issue May 8, 2019

CRA with docz: doesn't work #858

Closed

AryanJ-NYC mentioned this issue May 9, 2019

MDX not works #860

Closed

This was referenced May 19, 2019

Failed to compile: Unexpected token #817

Closed

Failed to compile v1 and higher #808

Closed

doh98 mentioned this issue May 29, 2019

docz, docz-plugin-css 관련 의존성 문제 해결 piction-protocol/piction-web#1

Merged

v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token #704

v1.0.0-rc.* Compiled with errors: Module parse failed: Unexpected token #704

Comments

davidtaboas commented Mar 22, 2019

Bug Report

mlshv commented Mar 22, 2019

davidtaboas commented Mar 22, 2019

pedronauck commented Mar 22, 2019

davidtaboas commented Mar 25, 2019

michaelw85 commented Apr 2, 2019 • edited Loading

JoeCMorgan commented Apr 2, 2019

michaelw85 commented Apr 2, 2019

cupofjoakim commented Apr 2, 2019

JoeCMorgan commented Apr 2, 2019

davidtaboas commented Apr 3, 2019

agonbina commented Apr 4, 2019

pedronauck commented Apr 4, 2019

pedronauck commented Apr 4, 2019 • edited Loading

dannyrb commented Apr 5, 2019 • edited Loading

pedronauck commented Apr 5, 2019

dannyrb commented Apr 5, 2019

elv1n commented Apr 5, 2019

JoeCMorgan commented Apr 11, 2019

thilak-rao commented Apr 13, 2019 • edited Loading

kennyglenn commented May 8, 2019

sanohin commented May 9, 2019 • edited Loading

gokulkrishh commented May 13, 2019

aarondancer commented May 13, 2019

adrianoresende commented May 26, 2019

wangpin34 commented May 28, 2019

JoeCMorgan commented May 28, 2019

emersonlaurentino commented May 28, 2019

marlonmleite commented Jun 4, 2019

aleksanderd commented Jun 4, 2019

jacobjonsson commented Jun 11, 2019 • edited Loading

JorgeCeja commented Jun 16, 2019

mlshv commented Jun 17, 2019

axe312ger commented Jun 18, 2019 • edited Loading

Update:

gugadev commented Jun 20, 2019

nanxiaobei commented Sep 9, 2019

michaelw85 commented Apr 2, 2019 •

edited

Loading

pedronauck commented Apr 4, 2019 •

edited

Loading

dannyrb commented Apr 5, 2019 •

edited

Loading

thilak-rao commented Apr 13, 2019 •

edited

Loading

sanohin commented May 9, 2019 •

edited

Loading

jacobjonsson commented Jun 11, 2019 •

edited

Loading

axe312ger commented Jun 18, 2019 •

edited

Loading