docz: Module parse failed: Unexpected token (473:30)

Bug Report

Clean install of last version of docz. When I run docz dev, I got:

./node_modules/docz/dist/index.m.js 473:30
Module parse failed: Unexpected token (473:30)
You may need an appropriate loader to handle this file type.
| async function loadFromImports(path) {
|     // tslint:disable-next-line
>     const { imports } = await import('~imports');
|     const { default: Component$$1, getInitialData } = await imports[path]();
|     const ExportedComponent = props => (createElement(AsyncComponent, Object.assign({}, props, { as: Component$$1 || 'div', getInitialData: getInitialData })));
 @ ./node_modules/docz-theme-default/dist/index.m.js 39:0-72 243:12-16 374:35-39 466:34-45 467:8-12 511:25-29 552:50-54 640:16-27 643:41-45 942:20-24 1024:28-39 1098:16-27 1490:33-44 1601:16-27 1872:16-27 1935:29-40 2029:45-56 2040:25-36 2041:8-18 2073:16-21
 @ ./.docz/app/root.jsx
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@babel/polyfill/lib/index.js ./.docz/app/index.jsx

I can’t share a project link.

I check webpack aliases with:

modifyBundlerConfig : (config) => {
    console.log(config.resolve.alias);
    return config;
}),

and ~imports is present.

Thanks in advance

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 23
Comments: 24 (6 by maintainers)

Commits related to this issue

add docz. Note: reads mdx files, not md. docz-core dependency needs specific webpack version: https://github.com/pedronauck/docz/issues/596#issuecomment-470202127 `cd node_modules/docz-core && npm i ... — committed to stencila/schema by jwijay 5 years ago

Most upvoted comments

If someone is stuck on this, and following @dfee’s hints, this seems to fix it:

npm i -D webpack@4.28.4

+29

lucalanca on Jan 22, 2019

I can tell you @pedronauck exactly where the problem is:

The incompatibility lies with an upgrade of webpack@4.28.4 -> webpack@4.29.0.

diff --git b/package-lock.json a/package-lock.json
index f0a5074..054340d 100644
--- b/package-lock.json
+++ a/package-lock.json
@@ -1787,10 +1787,13 @@
       "dev": true
     },
     "acorn-dynamic-import": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
-      "dev": true
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz",
+      "integrity": "sha512-zVWV8Z8lislJoOKKqdNMOB+s6+XV5WERty8MnKBeFgwA+19XJjJHs2RP5dzM57FftIs+jQnRToLiWazKr6sSWg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^5.0.0"
+      }
     },
     "acorn-globals": {
       "version": "4.3.0",
@@ -16621,17 +16624,17 @@
       "dev": true
     },
     "webpack": {
-      "version": "4.29.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.29.0.tgz",
-      "integrity": "sha512-pxdGG0keDBtamE1mNvT5zyBdx+7wkh6mh7uzMOo/uRQ/fhsdj5FXkh/j5mapzs060forql1oXqXN9HJGju+y7w==",
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.28.4.tgz",
+      "integrity": "sha512-NxjD61WsK/a3JIdwWjtIpimmvE6UrRi3yG54/74Hk9rwNj5FPkA4DJCf1z4ByDWLkvZhTZE+P3C/eh6UD5lDcw==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.7.11",
         "@webassemblyjs/helper-module-context": "1.7.11",
         "@webassemblyjs/wasm-edit": "1.7.11",
         "@webassemblyjs/wasm-parser": "1.7.11",
-        "acorn": "^6.0.5",
-        "acorn-dynamic-import": "^4.0.0",
+        "acorn": "^5.6.2",
+        "acorn-dynamic-import": "^3.0.0",
         "ajv": "^6.1.0",
         "ajv-keywords": "^3.1.0",
         "chrome-trace-event": "^1.0.0",
@@ -16652,12 +16655,6 @@
         "webpack-sources": "^1.3.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.5.tgz",
-          "integrity": "sha512-i33Zgp3XWtmZBMNvCr4azvOFeWVw1Rk6p3hfi3LUDvIFraOMywb1kAtrbi+med14m4Xfpqm3zRZMT+c0FNE7kg==",
-          "dev": true
-        },
         "schema-utils": {
           "version": "0.4.7",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",

+22

dfee on Jan 22, 2019

Just got the same problem on a fresh installation. For me, the issue got solved by creating the project again with Yarn. npm installation failed with the error similar to what @ohardy posted.

Reproduction of an error:

npm init -y
npm install -D docz@next docz-theme-default@next
# Add scripts to the package.json from the documentation.
npm run docz:dev

Reproduction of a success:

npm init -y
yarn add docz@next docz-theme-default@next --dev
# Add scripts to the package.json from the documentation.
yarn run docz:dev

Full error:

 ERROR  Failed to compile with 2 errors                                                                       1:39:50 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 16:2-15 18:19-23 25: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 17:29-34
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

Versions:

docz and docz-theme-default 1.0.0-rc.3
node 11.6.0
npm 6.5.0
yarn 1.12.1

Hope this might help in some way.

mateuszkocz on Mar 24, 2019

Thanks @dfee, this is already fixed on v0.14 that will be launch. Can I close this issue?

pedronauck on Jan 22, 2019

Definitely getting the same issue. I can share my project.

https://github.com/dfee/rbx/

dfee on Jan 22, 2019

Thanks a lot for your help. It looks like everything works with Yarn, and the problem appears only with NPM and the WebPack issue. I have an empty project for testing with only a package.json and using the instructions from @mattietea, I have managed to make docz work, but now I have an error in the browser. I think I will use Yarn until the docz@0.14 update.

Screenshot 2019-03-12 11 44 30

timbergus on Mar 12, 2019

@bichotll I think they mean you need to update the version inside node_modules/docz-core. I’ve been using this cd node_modules/docz-core && npm i -D webpack@4.28.4 && cd .. && cd ..

ghost on Mar 6, 2019

@timbergus I had the same issue, it gets solve if you lock buble@0.19.6. I opened an issue around this: https://github.com/bublejs/buble/issues/189

davixyz on Mar 13, 2019

fyi pedro is currently sick and will get back to this in a few days (i dont speak for him but just relaying the info)

swyxio on Jan 30, 2019

when will v0.14 be released?

CyberNika on Feb 15, 2019