Develop works, build fails: Cannot read property 'initial' of undefined #1846

rshah03 · 2017-08-17T20:18:26Z

My develop version runs fine, with no issues. However, I get the following error(s) when I run gatsby build or any sort of production script:

/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:22
			if(c.initial) return;
			    ^

TypeError: Cannot read property 'initial' of undefined
    at ExtractTextPlugin.<anonymous> (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:22:8)
    at Array.forEach (native)
    at ExtractTextPlugin.mergeNonInitialChunks (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:21:16)
    at ExtractTextPlugin.<anonymous> (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:275:12)
    at Array.forEach (native)
    at ExtractTextPlugin.<anonymous> (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:273:21)
    at /home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:52:16
    at Object.async.forEachOf.async.eachOf (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:236:30)
    at Object.async.forEach.async.each (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:209:22)
    at ExtractTextPlugin.<anonymous> (/home/coder/Developer/portfolio/node_modules/extract-text-webpack-plugin/index.js:237:10)
    at Compilation.applyPluginsAsync (/home/coder/Developer/portfolio/node_modules/tapable/lib/Tapable.js:71:13)
    at Compilation.seal (/home/coder/Developer/portfolio/node_modules/webpack/lib/Compilation.js:525:7)
    at Compiler.<anonymous> (/home/coder/Developer/portfolio/node_modules/webpack/lib/Compiler.js:397:15)
    at /home/coder/Developer/portfolio/node_modules/tapable/lib/Tapable.js:103:11
    at Compilation.<anonymous> (/home/coder/Developer/portfolio/node_modules/webpack/lib/Compilation.js:445:10)
    at /home/coder/Developer/portfolio/node_modules/webpack/lib/Compilation.js:417:12

I have absolutely no idea what the root of this problem is. Any help would be appreciated.

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

rshah03 · 2017-08-17T23:34:55Z

Fix: Add if (typeof c === 'undefined') return; right below line 21 in node_modules/extract-text-webpack-plugin/index.js

just-boris · 2017-08-21T16:12:44Z

I could reproduce the same problem. It is somehow related to the number of pages that you have.
There is a sample project, where you can look at it: https://github.com/just-boris/gatsby-issue-1846

I have created a file src/pages/AbstractPage.js and three src/pages/ChildPage-N.js files, which are depending from AbstractPage. When you run npm run build, you will see the expected error

error UNHANDLED EXCEPTION
  TypeError: Cannot read property 'initial' of undefined
  - index.js:23 ExtractTextPlugin.<anonymous>
    [test]/[extract-text-webpack-plugin]/index.js:23:8

Also, I would like to mention, that there is an issue webpack-contrib/extract-text-webpack-plugin#115 which says that CommonsChunkPlugin somehow screws up the build under some conditions.

just-boris · 2017-08-21T16:13:57Z

@rshah03 could you please re-open the issue? The solution of editing files in node_modules is not acceptable, because people usually do not modify third-party-dependencies directly.

rshah03 · 2017-08-21T16:25:07Z

@just-boris Thanks! Re-opened the issue. Yeah, I was trying to find other possible solutions, but wasn't able to. Thought I would stick with that temp fix for the time being. I will take a look at your sample project and likely redo my project with fewer pages/components.

azoff · 2017-08-24T20:13:50Z

My workaround, fwiw, in my package.json file:

{ ...
    "scripts": {
        "patch": "sed -i -e 's/if(c\\.initial) return;/if(!c||c.initial) return;/g' ./node_modules/extract-text-webpack-plugin/index.js",
        "build": "npm run patch && gatsby build",
    }
...
}

nickguletskii · 2017-09-03T11:33:49Z

This seems to be caused by Webpack's RemoveEmptyChunksPlugin and how Webpack removes chunks. Before applying ExtractTextWebpackPlugin, Webpack runs RemoveEmptyChunksPlugin which can remove component chunks from Webpack's chunk list. The problem is that it doesn't remove the empty chunk from the chunk called app, and when ExtractTextWebpackPlugin is called it tries to look up a chunk that doesn't exist. Since there is no consistency check there, extractedChunks[chunks.indexOf(c)] returns undefined and undefined gets added to the list of chunks.

I am not sure where I should report this, and what is the best workaround at the moment.

fkoner · 2017-09-04T03:26:09Z

Have you checked the following link:

webpack-contrib/extract-text-webpack-plugin#170

webpack/webpack@79eb404

Applying @azoff workaround gives the following error:

error Generating static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error:
    Error: Module not found: Error: Cannot resolve 'file' or 'directory' ../public/chunk-manifest.json in /opt/  development/github-projects/dentegra/static-cus  tomer-website/.cache
    resolve file
      /opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json doesn't exist
      /opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json.js doesn't exist
      /opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json.jsx doesn't exist
    resolve directory
      /opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json doesn't exist (directory default file)
      /opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json/package.json doesn't exist (directory descri  ption file)
    [/opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json]
    [/opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json.js]
    [/opt/development/github-projects/dentegra/static-customer-website/public/chunk-manifest.json.jsx]
     @ ./.cache/static-entry.js 143:22-67


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default@1.0.0 build: `npm run patch && gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-default@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Carlos/.npm/_logs/2017-09-04T03_52_39_891Z-debug.log

Related to #1850

It seems the version of webpack and extract-text-webpack-plugin is too old in gatsby.

nickguletskii · 2017-09-04T07:37:40Z

I guess this bug will have to wait for Gatsby 2 (#1824), since I don't think Webpack devs will be interested in bug reports for Webpack 1. I am pretty sure that the bug still exists in Webpack 3, but I currently don't have the time to create a minimal example. Maybe someone else could take a Webpack 3 config and try to replicate as follows:

Create a file we will call shared, tell Webpack to make a chunk for it (or however that works, I am not sure).
Create a lot of files that import shared and have Webpack make chunks for them.
Create a chunk that depends on all chunks.
Make sure that the shared chunk is being deleted by RemoveEmptyChunksPlugin.
Check if the chunk that depends on all chunks still references the shared chunk. If it does, then the bug is not fixed in Webpack 3.

I worked around this bug by eliminating inter-page imports. I had a lot of pages import stuff from an index page and that was causing the index page to become an empty chunk (my guess is that it was being inlined into other chunks).

fkoner · 2017-09-04T08:01:08Z

@nickguletskii
So it is advisable not to nest pages, or at least not concentrate all the pages inside a main.

What was the process you followed?

With this procedure you avoid the workaround of @azoff and also the error #1850?

nickguletskii · 2017-09-04T08:52:33Z

My process involved moving common logic and data into a file outside the pages directory. I had a system for getting metadata from parent pages, which I had to replace with a centralised metadata store. I never had issue #1850, but my workaround is not related to @azoff's in any way.

c2pig · 2017-09-05T03:01:37Z

upgrade to latest version "gatsby": "^1.9.23", i dont see the error anymore.

canoqb10 · 2017-09-05T20:00:43Z

I have upgraded to latest version and I continue with same issue

Ayorinde · 2017-09-18T10:08:57Z

Works fine when I don't have gatsby develop running.

revolunet · 2017-10-03T02:44:42Z

hitting the same issue here but with ~100 markdown files and 5 templates... any idea how to solve this ?

canoqb10 · 2017-10-03T15:43:28Z

Yes @revolunet you should not have pages or components that are called within other pages within the folder of pages, that is, inside the folder of pages you must only have the pages that are functional for gatsby, if any of those pages needs some components you must position them outside of the page folder, this resolve the issue for me

revolunet · 2017-10-03T19:03:06Z

in my case i have nothing in /pages except 404.js , just a lot of markdown in /content and 5 templates in /templates

revolunet · 2017-10-03T23:12:27Z

after a fun hunt, i found a hacky workaround, but i cant understand why it solves the issue

In src/templates, i had 9 templates using src/templates/page.js and had the "initial" bug on build, but for some reason, extracting page.js to "src/page.js" solved the issue.

so as @canoqb10 mentions, one shouldn't put reusable components inside templates or pages

revolunet · 2017-11-04T23:22:23Z

Stumbled upon the same error, triggered from that buggy code :

 const onRef = {
    log404();
  };
  return (
    <Page
      ref={onRef}

the onRef should be a function.

 const onRef = () => {
    log404();
  };

BTW, this trigger via webpack the infamous "Cannot read property 'initial' of undefined".

The issue source is the user code itself, but the error come from https://github.com/webpack-contrib/extract-text-webpack-plugin, just submitted a PR for webpack 1 users

neilyoung · 2017-12-14T21:18:16Z

@rshah03 In fact your answer from August it the only right answer, if you do the same alt line 23 also

adrienharnay · 2018-01-07T22:01:27Z

Bump, stumbling on this also. Tried the patch from #1846 (comment), but got the error from #1846 (comment)

rshah03 · 2018-01-10T01:07:15Z

@neilyoung Though that works, it's generally bad practice to modify files within the node_modules directory, so it's not an ideal fix. I guess it would be okay for development, but probably not a good idea for production.

@Zephir77167 I ended up creating a new iteration of my project without nesting components within each other. This worked fine and the issue didn't come up again. I think Gatsby can handle 1 layer of directly embedded components, but no more.

adrienharnay · 2018-01-10T06:34:31Z

Yeah I guess so, I moved all the components in pages to another folder (src/views), and then imported the root component in each page. That solved it for me

BipinBhandari · 2018-01-11T17:02:32Z

To me, this issue occurred when I imported constant in one page from another page.
Fixed by moving constant to utilities folder and importing from there.

ntnbst · 2018-03-13T11:53:54Z

Did anyone find the fix of this issue??
Other than modifying the node modules files .

…standard component. See: gatsbyjs/gatsby#1846

* initial speakers and workshops commit * fix build error by moving out shared page component from template to standard component. See: gatsbyjs/gatsby#1846 * use lodash to split speaker list into chunks of two speakers for column formatting * break out NavigationLink into separate component * Added fa bullets to content, shaded background

gatsbyjs/gatsby#1846

philippefutureboy · 2018-05-15T13:00:50Z

If that can help anyone out there, I encountered this error because a component under layouts was referencing a page under page. Moving the page to layouts solved the problem.

@KyleAMathews Could this be in the docs, in shiny flashing bold?

KyleAMathews · 2018-06-27T01:20:04Z

v2 is out which upgrades webpack and plugins + removes the confusing layouts component so closing. See the v2 migration guide to upgrade! https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/

alexlouden · 2018-08-27T03:43:57Z

I hit this issue too - I added the workaround to node_modules/gatsby-1-config-extract-plugin/node_modules/extract-text-webpack-plugin, and then when I re-ran gatsby build the actual error showed up. There was a syntax error in my page template - I was assigning to a const. Just a heads up - for me this error was masking the syntax error, so when I fixed the syntax error I could remove the workaround and the build succeeded.

…4367

* chore(pf4-docs): show components as secondary items and package * remove pascal-case * try gatsby/webpack patch from gatsbyjs/gatsby#1846 (comment) * fix error reserved keyword switch * remove patch * patch again * try out different travis build env * travis linux build * reset travis config

Jvalal-zz · 2019-03-15T05:07:37Z

I'm still getting this error. I tried adding the patch from 1846, but no dice.

rshah03 changed the title ~~Develop works, build fails: UNHANDLED REJECTION TypeError: Cannot read property 'component' of undefined~~ Develop works, build fails: if(c.initial) return; TypeError: Cannot read property 'initial' of undefined Aug 17, 2017

rshah03 changed the title ~~Develop works, build fails: if(c.initial) return; TypeError: Cannot read property 'initial' of undefined~~ Develop works, build fails: Error with extract-text-webpack-plugin Aug 17, 2017

rshah03 changed the title ~~Develop works, build fails: Error with extract-text-webpack-plugin~~ Develop works, build fails: Cannot read property 'initial' of undefined Aug 17, 2017

rshah03 closed this as completed Aug 17, 2017

rshah03 reopened this Aug 21, 2017

brsanthu mentioned this issue Oct 18, 2017

Error while building with react-stripe-elements #2505

Closed

habibridho mentioned this issue Nov 20, 2017

Redux integration failed during build #2963

Closed

neilyoung mentioned this issue Dec 15, 2017

It might not be allowed to say that here, but.. #3230

Closed

aderaaij mentioned this issue Jan 4, 2018

What happen with gatsby build? #3408

Closed

This was referenced Feb 24, 2018

Gatsby Build Error jamesadarich/james.adarich.com#6

Closed

Gatsby build issue jamesadarich/static-site-seed#25

Closed

sielay mentioned this issue Mar 25, 2018

DO NOT MERGE!!! This PR is meant to test what in package-lock.json breaks netlify fabien0102/gatsby-starter#55

Closed

derektiffany added a commit to productmindset/site that referenced this issue Mar 29, 2018

fix build error by moving out shared page component from template to …

a5a7336

…standard component. See: gatsbyjs/gatsby#1846

gilesbutler mentioned this issue Apr 11, 2018

Is it possible to have 2 layouts? #1494

Closed

jameshadfield added a commit to nextstrain/static that referenced this issue May 2, 2018

fix bug (gatsby issue 1846)

cb7f331

gatsbyjs/gatsby#1846

KyleAMathews closed this as completed Jun 27, 2018

agarrharr mentioned this issue Jul 12, 2018

Upgrade to Gatsby 2.0 orbitfm/orbit.fm#98

Closed

sanandnarayan mentioned this issue Aug 16, 2018

Refactoring branch not building on netlify, we might need to upgrade to v2 netlify Codebrahma/serverless-gatsby#34

Closed

justsml added a commit to justsml/dans-blog that referenced this issue Sep 26, 2018

adding patch cmd from: gatsbyjs/gatsby/issues/1846#issuecomment-32474…

e8c4bb9

…4367

jschuler added a commit to jschuler/patternfly-react that referenced this issue Nov 16, 2018

try gatsby/webpack patch from gatsbyjs/gatsby#1846 (comment)

c610145

jschuler mentioned this issue Nov 16, 2018

chore(pf4-docs): show components as secondary items and package patternfly/patternfly-react#928

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop works, build fails: Cannot read property 'initial' of undefined #1846

Develop works, build fails: Cannot read property 'initial' of undefined #1846

rshah03 commented Aug 17, 2017 •

edited

Loading

rshah03 commented Aug 17, 2017

just-boris commented Aug 21, 2017 •

edited

Loading

just-boris commented Aug 21, 2017

rshah03 commented Aug 21, 2017

azoff commented Aug 24, 2017 •

edited

Loading

nickguletskii commented Sep 3, 2017

fkoner commented Sep 4, 2017 •

edited

Loading

nickguletskii commented Sep 4, 2017

fkoner commented Sep 4, 2017

nickguletskii commented Sep 4, 2017

c2pig commented Sep 5, 2017

canoqb10 commented Sep 5, 2017 •

edited

Loading

Ayorinde commented Sep 18, 2017

revolunet commented Oct 3, 2017

canoqb10 commented Oct 3, 2017

revolunet commented Oct 3, 2017

revolunet commented Oct 3, 2017 •

edited

Loading

revolunet commented Nov 4, 2017

neilyoung commented Dec 14, 2017

adrienharnay commented Jan 7, 2018

rshah03 commented Jan 10, 2018

adrienharnay commented Jan 10, 2018

BipinBhandari commented Jan 11, 2018

ntnbst commented Mar 13, 2018 •

edited

Loading

philippefutureboy commented May 15, 2018

KyleAMathews commented Jun 27, 2018

alexlouden commented Aug 27, 2018

Jvalal-zz commented Mar 15, 2019

Develop works, build fails: Cannot read property 'initial' of undefined #1846

Develop works, build fails: Cannot read property 'initial' of undefined #1846

Comments

rshah03 commented Aug 17, 2017 • edited Loading

rshah03 commented Aug 17, 2017

just-boris commented Aug 21, 2017 • edited Loading

just-boris commented Aug 21, 2017

rshah03 commented Aug 21, 2017

azoff commented Aug 24, 2017 • edited Loading

nickguletskii commented Sep 3, 2017

fkoner commented Sep 4, 2017 • edited Loading

nickguletskii commented Sep 4, 2017

fkoner commented Sep 4, 2017

nickguletskii commented Sep 4, 2017

c2pig commented Sep 5, 2017

canoqb10 commented Sep 5, 2017 • edited Loading

Ayorinde commented Sep 18, 2017

revolunet commented Oct 3, 2017

canoqb10 commented Oct 3, 2017

revolunet commented Oct 3, 2017

revolunet commented Oct 3, 2017 • edited Loading

revolunet commented Nov 4, 2017

neilyoung commented Dec 14, 2017

adrienharnay commented Jan 7, 2018

rshah03 commented Jan 10, 2018

adrienharnay commented Jan 10, 2018

BipinBhandari commented Jan 11, 2018

ntnbst commented Mar 13, 2018 • edited Loading

philippefutureboy commented May 15, 2018

KyleAMathews commented Jun 27, 2018

alexlouden commented Aug 27, 2018

Jvalal-zz commented Mar 15, 2019

rshah03 commented Aug 17, 2017 •

edited

Loading

just-boris commented Aug 21, 2017 •

edited

Loading

azoff commented Aug 24, 2017 •

edited

Loading

fkoner commented Sep 4, 2017 •

edited

Loading

canoqb10 commented Sep 5, 2017 •

edited

Loading

revolunet commented Oct 3, 2017 •

edited

Loading

ntnbst commented Mar 13, 2018 •

edited

Loading