Docz: Failed to compile: Unexpected token

Created on 19 Apr 2019  路  11Comments  路  Source: doczjs/docz

Bug Report

Describe the bug

 ERROR  Failed to compile with 3 errors                                                                                                                      09:51:13
 error  in D:/workspace/education-webclient/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/react';
|
> 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 D:/workspace/education-webclient/node_modules/docz-core/node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

 error  in D:/workspace/education-webclient/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 D:/workspace/education-webclient/node_modules/docz-core/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 D:/workspace/education-webclient/node_modules/docz-core/node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

Expected behavior

A clear and concise description of what you expected to happen..

Environment

  • OS: [Windows 10]
  • Node/npm version: [e.g. Node 10.14.1/npm 6.5.0]

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

picture tianyanqiu
👍7

Most helpful comment

Same issue with create-react-app (latest version) + using yarn. Windows 10 and yarn

yarn create react-app app
yarn add docz docz-theme-default --dev
yarn docz:dev

```
Failed to compile.

./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```

picture Persepolis1 on 3 May 2019
👍3

All 11 comments

I hit this same issue as well running a fresh install of 1.0.4 in a Babel-Typescript project

ssured picture ssured on 19 Apr 2019

Hi, could you provide a minimal demo to reproduce this error? Or you got any clue which package caused this error? Thanks!

same error as #808

fi3ework picture fi3ework on 20 Apr 2019

I've been dealing with #808, but unfortunately, it still hasn't been solved.

package.json

"devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@storybook/addon-actions": "^4.1.11",
    "@storybook/react": "^4.1.11",
    "@types/archiver": "^2.1.2",
    "@types/circular-dependency-plugin": "^5.0.0",
    "@types/classnames": "^2.2.7",
    "@types/color": "^3.0.0",
    "@types/commander": "^2.12.2",
    "@types/compression-webpack-plugin": "^2.0.0",
    "@types/connect-history-api-fallback": "^1.3.1",
    "@types/enhanced-resolve": "^3.0.6",
    "@types/enzyme": "^3.1.9",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/fs-extra": "^5.0.3",
    "@types/html-webpack-plugin": "^2.30.3",
    "@types/http-proxy-middleware": "^0.17.4",
    "@types/intro.js": "^2.4.3",
    "@types/jest": "^23.3.10",
    "@types/lodash": "^4.14.106",
    "@types/minimist": "^1.2.0",
    "@types/node": "^9.6.1",
    "@types/ramda": "^0.25.24",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^5.0.19",
    "@types/react-router-dom": "^4.2.6",
    "@types/react-test-renderer": "^16.0.1",
    "@types/react-virtualized": "^9.18.11",
    "@types/recompose": "^0.26.1",
    "@types/shelljs": "^0.8.3",
    "@types/storybook__addon-actions": "^3.0.3",
    "@types/storybook__react": "^3.0.7",
    "@types/warning": "^3.0.0",
    "@types/webpack": "^4.1.3",
    "@types/webpack-bundle-analyzer": "^2.9.2",
    "add-asset-html-webpack-plugin": "^2.1.3",
    "archiver": "^3.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.4",
    "cache-loader": "^1.2.5",
    "chart.js": "^2.8.0",
    "circular-dependency-plugin": "^5.0.2",
    "colors": "^1.3.3",
    "commander": "^2.19.0",
    "compression-webpack-plugin": "^2.0.0",
    "connect-history-api-fallback": "^1.5.0",
    "cross-env": "^5.1.6",
    "css-loader": "^2.0.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "fast-glob": "^2.2.6",
    "file-loader": "^2.0.0",
    "fs-extra": "^6.0.1",
    "glob": "^7.1.2",
    "happypack": "^5.0.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy-middleware": "^0.18.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "jest-styled-components": "^5.0.1",
    "koa-connect": "^2.0.1",
    "loader-utils": "^1.1.0",
    "minimist": "^1.2.0",
    "react-chartjs-2": "^2.7.4",
    "react-test-renderer": "^16.4.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "thread-loader": "^2.0.0",
    "ts-jest": "^23.10.5",
    "ts-node": "^6.2.0",
    "tsconfig-paths": "^3.3.2",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.10.0",
    "tslint-react": "^3.5.1",
    "typescript": "^3.3.1",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-serve": "^1.0.4"
  },
tianyanqiu picture tianyanqiu on 22 Apr 2019

Same here
log | project

arvigeus picture arvigeus on 23 Apr 2019

hi @arvigeus :
Thanks for the re-produce repo. I reproduce the same error by using npm. However, everything goes well by using yarn. You can have a try of yarn first to bypass this problem. And I'll try to figure out how to bypass this in docz.

fi3ework picture fi3ework on 23 Apr 2019

I'm having this problem with yarn. yarn doesn't bypass this problem. You can reproduce this issue right now using the latest create-react-app as I've done here: https://github.com/MarkMurphy/docz-issue-808

MarkMurphy picture MarkMurphy on 1 May 2019
👍1

I'm also having the same issue using yarn. In some versions ago adding ansi-styles to our resolutions was fixing this issue:

"resolutions": {
  "ansi-styles": "^3.2.0"
},

However, that isn't working anymore.

wceolin picture wceolin on 2 May 2019

Same issue with create-react-app (latest version) + using yarn. Windows 10 and yarn

yarn create react-app app
yarn add docz docz-theme-default --dev
yarn docz:dev

```
Failed to compile.

./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```

Persepolis1 picture Persepolis1 on 3 May 2019
👍3

Run yarn add --dev webpack

doasync picture doasync on 19 May 2019

This solved it for me. No need to install webpack

arvigeus picture arvigeus on 19 May 2019
👍1

This solved it for me. No need to install webpack

Seems to work, thanks.

Persepolis1 picture Persepolis1 on 23 May 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tsnolan23 picture tsnolan23  路  3Comments
capaj picture capaj  路  3Comments
koddr picture koddr  路  3Comments
fenbka picture fenbka  路  3Comments
ssylvia picture ssylvia  路  3Comments