search

doczjs / docz

✍ It has never been so easy to document your things!
https://docz.site
MIT License
23.6k stars 1.45k forks source link

[gatsby-theme-docz] Using Standard Markdown Anchor Tag Syntax [LinkName](http://url.com) Breaks Gatsby Build #832

Closed AryanJ-NYC closed 5 years ago

AryanJ-NYC commented 5 years ago

Bug Report

Describe the bug Running gatsby build when using standard Markdown anchor tag syntax throws an error:

To Reproduce

  1. git clone https://github.com/AryanJ-NYC/docz-theme-example
  2. cd docz-theme-example
  3. npm i && gatsby build
  4. See error
error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  624 |     const docs = useDocs();
  625 |     const toCheck = useMemo(() => [
> 626 |         location.pathname
      | ^
  627 |             .split(separator)
  628 |             .slice(0, -1)
  629 |             .join(separator)

  WebpackError: ReferenceError: location is not defined

  - index.esm.js:626 Link.Object
    [lib]/[docz-theme-default]/dist/index.esm.js:626:1

  - bootstrap:17 Object.useMemo
    lib/webpack/bootstrap:17:1

  - index.esm.js:625 Link
    [lib]/[docz-theme-default]/dist/index.esm.js:625:28

  - bootstrap:22 c
    lib/webpack/bootstrap:22:1

  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1

  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1

  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1

  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1

  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1

  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1

  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

Expected behavior Lack of error. Please note that gatsby develop works fine.

Environment

jsjoeio commented 5 years ago

Hey @AryanJ-NYC ! 👋🏼

I believe this is happening because location is not defined at build time (because it's a web API and the build process is run with Node. You should be able to fix this by adding this 

const docs = useDocs();
if (typeof window === 'undefined') return
const toCheck = useMemo(() => [
// the rest of your code...

Let me know if that fixes it!

AryanJ-NYC commented 5 years ago

Hey @jsjoeio! Appreciate the feedback.

I've tried to fix that in const Link of docz-theme-default. I've also tried the fix Gatsby suggests here AND I've upgraded to gatsby-source-filesystem 2.0.32.

All those potential fixes lead to the same error message:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

   8 |  else
   9 |          root["lib"] = factory(root["@reach/router"], root["core-js/fn/object/assign"], root["core-js/modules/es6.array.find"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.object.is-extensible"], root["core-js/modules/es6.object.to-string"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/es7.object.entries"], root["core-js/modules/web.dom.iterable"], root["crypto"], root["fs"], root["lodash"], root["lodash/fp"], root["lodash/get"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_fn_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_find__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_is_extensible__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es7_object_entries__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_crypto__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_lodash_fp__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return 

  WebpackError: Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Link for the full message or use the non-mi  nified dev environment for full errors and additional helpful warnings.

  - universalModuleDefinition:10 ba
    lib/webpack/universalModuleDefinition:10:2

  - bootstrap:21 Ra
    lib/webpack/bootstrap:21:1

  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1

  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1

  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1

  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1

  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1

  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1

  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1
jsjoeio commented 5 years ago

Hmm...that's strange. Okay I'll see if I can reproduce this later with the repo you provided and hopefully we can figure out a fix.

jsjoeio commented 5 years ago

After some investigating, I think your issue is valid. I believe this error stems from the Link component.

I wonder if it would be as "easy" as changing this:

const docs = useDocs()
  const toCheck = useMemo(
    () =>
      [
        location.pathname
          .split(separator)
          .slice(0, -1)
          .join(separator)
          .slice(1),
        (href || '').replace(/^(?:\.\/)+/gi, ''),
      ].join('/'),
    [separator]
)

to this:

const docs = useDocs()
  const toCheck = useMemo(
    () => {
     if (typeof window === 'undefined') return
     return [
        location.pathname
          .split(separator)
          .slice(0, -1)
          .join(separator)
          .slice(1),
        (href || '').replace(/^(?:\.\/)+/gi, ''),
      ].join('/'),
    [separator]
     }
)
AryanJ-NYC commented 5 years ago

@jsjoeio Made your proposed change in node_modules/docz-theme-default/dist/index.esm.js. I get the following error:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

   8 |  else
   9 |          root["lib"] = factory(root["@reach/router"], root["core-js/fn/object/assign"], root["core-js/modules/es6.array.find"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.object.is-extensible"], root["core-js/modules/es6.object.to-string"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/es7.object.entries"], root["core-js/modules/web.dom.iterable"], root["crypto"], root["fs"], root["lodash"], root["lodash/fp"], root["lodash/get"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_fn_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_find__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_is_extensible__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es7_object_entries__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_crypto__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_lodash_fp__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return 

  WebpackError: Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Link for the full message or use the non-mi  nified dev environment for full errors and additional helpful warnings.

  - universalModuleDefinition:10 ba
    lib/webpack/universalModuleDefinition:10:2

  - bootstrap:21 Ra
    lib/webpack/bootstrap:21:1

  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1

  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1

  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1

  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1

  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:206:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1

  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1

  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

Hopefully some weekday help tomorrow will lead us to finding the fix.

jsjoeio commented 5 years ago

Ah, bummer. Yeah, hopefully we can get someone who knows more to help us figure this out!

AryanJ-NYC commented 5 years ago

I updated gatsby-theme-docz to 1.1.0 and gatsby to 2.4.2. I am now getting the following, similar error when running gatsby build:

error Building static HTML failed for path "/src-pages-example"

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  683 |   } = useConfig();
  684 |   const docs = useDocs();
> 685 |   const toCheck = useMemo(() => [location.pathname.split(separator).slice(0, -1).join(separator).slice(1), (href || '').replace(/^(?:\.\/)+/gi, '')].join('/'), [separator]);
      |                          ^
  686 |   const matched = docs && docs.find(doc => doc.filepath === toCheck);
  687 |   const nHref = matched ? matched.route : href;
  688 |   const isInternal = nHref && nHref.startsWith('/');

  WebpackError: ReferenceError: location is not defined

  - index.esm.js:685 Link.Object
    [lib]/[docz-theme-default]/dist/index.esm.js:685:26

  - bootstrap:17 Object.useMemo
    lib/webpack/bootstrap:17:1

  - index.esm.js:685 Link
    [lib]/[docz-theme-default]/dist/index.esm.js:685:26

  - bootstrap:22 c
    lib/webpack/bootstrap:22:1

  - bootstrap:25 Sa
    lib/webpack/bootstrap:25:1

  - bootstrap:30 a.render
    lib/webpack/bootstrap:30:1

  - bootstrap:30 a.read
    lib/webpack/bootstrap:30:1

  - bootstrap:42 renderToString
    lib/webpack/bootstrap:42:1

  - static-entry.js:206 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
    lib/.cache/static-entry.js:206:18

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1

  - default-html.js:9 Promise._resolveFromExecutor
    lib/.cache/default-html.js:9:9

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

  - bootstrap:20 Promise.map.path
    lib/webpack/bootstrap:20:1

  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

Anyone?

AryanJ-NYC commented 5 years ago

@jsjoeio Now that https://github.com/gatsbyjs/gatsby/issues/13641 is fixed, your suggested fix at https://github.com/pedronauck/docz/issues/832#issuecomment-487398890 works. Thanks!

jsjoeio commented 5 years ago

@AryanJ-NYC awesome! Glad to that fixed it 🙌🏼