Unspecified WebpackError on Gatsby Build

coreyward commented 6 years ago

Description

I'm running into an issue wheregatsby build is failing on the second Building static HTML for pages despite gatsby develop running. I've followed the advice in the docs regarding ensuring window and document aren't referenced outside of componentDidMount and componentWillUnmount to no avail.

The particular error message I'm getting is rather unhelpful (I reduced vertical whitespace for formatting reasons):

error Building static HTML for pages failed

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

  WebpackError: 

  - static-entry.js:172 done
    .cache/static-entry.js:172:16

  - index.js:46 
    ~/gatsby/~/react-router-dom/index.js:46:1

  - static-entry.js:43 
    .cache/static-entry.js:43:7

  - static-entry.js:117 
    .cache/static-entry.js:117:5

  - static-entry.js:32 applyPluginsParallelBailResult.createInnerCallback.log
    .cache/static-entry.js:32:1

  - static-entry.js:50 
    .cache/static-entry.js:50:3

  - emptyObject.js:13 FSReqWrap.readFileAfterOpen [as oncomplete]
    ~/fbjs/lib/emptyObject.js:13:1

At a glance, I'm using the postcss out of the box and have some “legacy” TypeScript stuff, but most of my pages are in ES6 JS. I have a single file under pages (404.js) and a template under src/templates that I use in conjunction with createPage in my gatsby-node.js.

I've gone through and commented out swaths of code that I thought might be responsible, including temporarily killing dependencies like @vimeo/player or dynamic_dom (which I also tried to disable using the null-loader pattern I saw in these issues).

I also tried looking at the .cache/static-entry.js file at the referenced line (172:16) but I couldn't figure out where it might be relevant. I also naively added some console.log statements, but they were swiftly destroyed on the next call to gatsby build. 🤦‍♂️

// .cache/static-entry.js:165–175
      // If sourcemaps are enabled, then the entry will be an array with
      // the script name as the first entry.
      fetchedScript = isArray(fetchedScript) ? fetchedScript[0] : fetchedScript
      const prefixedScript = `${pathPrefix}${fetchedScript}`

      // Make sure we found a component.
      if (prefixedScript === `/`) {
        return null
      }

      return prefixedScript

Environment

Gatsby version (npm list gatsby): 1.9.246
gatsby-cli version (gatsby --version): 1.1.49
Node.js version: 9.9.0
Operating System: macOS High Sierra 10.13.3

File contents (if changed):

gatsby-config.js:

plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-resolve-src",
    "gatsby-plugin-svgr",
    "gatsby-plugin-typescript",
    {
      resolve: "gatsby-source-contentful",
      options: { ... }
    },

package.json:

"dependencies": {
    "@vimeo/player": "^2.5.0",
    "bowser": "^1.9.3",
    "gatsby": "^1.9.243",
    "gatsby-link": "^1.6.28",
    "gatsby-plugin-react-css-modules": "^1.0.9",
    "gatsby-plugin-react-helmet": "^2.0.1",
    "gatsby-plugin-resolve-src": "^1.0.0",
    "gatsby-plugin-svgr": "^1.0.0",
    "gatsby-plugin-typescript": "^1.4.19",
    "gatsby-source-contentful": "^1.3.44",
    "prop-types": "^15.6.0",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-helmet": "^5.2.0",
    "react-lazyload": "^2.3.0",
    "xr": "^0.3.0"
  },

gatsby-node.js:

This is modified per this issue and specifically this post to resolve issues I was having with relative CSS imports (non-Sass).

The other changes are to resolve this issue (called out) and to configure SVGR to be simpler to use (no url imports, which we don't use on this project).

exports.modifyWebpackConfig = ({ config, stage, program }, options) => {
  const { plugins, ...svgrOptions } = options

  if (stage === `build-javascript`) {
    config.loader(`css`, {
      test: /\.css$/,
      exclude: /\.module\.css$/,

      // Original loader
      // loader: (0, _gatsby1ConfigExtractPlugin.extractTextPlugin)(stage).extract([`css`])

      // Including postcss here to resolve issues with relative path imports of CSS files
      loader: (0, _gatsby1ConfigExtractPlugin.extractTextPlugin)(stage).extract([`css?minimize`, `postcss`])
    });

    // CSS modules
    config.loader(`cssModules`, {
      test: /\.module\.css$/,
      loader: (0, _gatsby1ConfigExtractPlugin.extractTextPlugin)(stage).extract(`style`, [(0, _gatsby1ConfigCssModules.cssModulesConfig)(stage), `postcss`])
    });

    // Merging Postcss configuration from the build-css section in the original Gatsby webpack config
    config.merge({
      postcss: [require(`postcss-import`)(), require(`postcss-cssnext`)({
        browsers: program.browserslist
      })]
    });
  }

  // Fix build issues
  if (stage === "build-html") {
      // test: /(src\/lib|src\/shared|auth_middleware|help_widget|browser)/,
    config.loader("null", {
      test: /(dynamic_dom|pen_tool_demo|vimeo)/,
      loader: "null-loader",
    });
  }

  // Replace SVGR loader to simplify imports (no base64 inlining of SVG assets)
  config.removeLoader('svgr')
  config.loader('svgr', {
    test: /\.svg$/,
    loaders: [
      `babel-loader?${JSON.stringify({
        presets: ['env', 'react', 'stage-0'],
      })}`,
      `svgr/webpack?${JSON.stringify(svgrOptions)}`,
    ],
  })

  return config
}

gatsby-browser.js: Not present gatsby-ssr.js: Not present

m-allanson commented 6 years ago

Thanks for the detailed write-up! That is... not a very helpful error, you're right. It looks like the actual error message isn't being shown, just the stack trace?

I think that error message is created around here. Could you do some digging and see if there's additional info that's not being reported to the terminal?

You could dive straight in to node_modules/gatsby/dist/commands/build-html.js for the transpiled ES5 code, or follow the contributing docs to set up a local Gatsby dev environment.

Alternatively if you're able to share a public repo I can take a look?

coreyward commented 6 years ago

Thanks for the guidance, @m-allanson. I was able to log the stats.toJson().errors and there is indeed an error message that isn't getting printed to the terminal.

Unfortunately, it looks like something I previously thought I solved coming back to bite me: I can't figure out how to import CSS without a relative path during build (hence the build-javascript changes above). Perhaps I need to apply the same changes to the build-html stage as well? Is there a better way of handling imports in CSS (plain CSS, not Sass)?

./src/shared/components/external_page/external_page.module.css
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../../styles/constants/constants in /Users/corey/src/thisproject/src/shared/components/external_page
    at /Users/corey/src/thisproject/node_modules/webpack/lib/Compilation.js:229:38

I'm 99% certain the file exists at the path specified, but apparently I'm not as accurate as a machine and I make typos, so here's the relevant portion of the file tree if you want to check my work:

src/
├── pages
│   ├── 404.js
│   └── 404.module.css
├── shared
│   ├── components
│   │   ├── external_page
│   │   │   ├── external_page.css.d.ts
│   │   │   ├── external_page.module.css
│   │   │   └── external_page.tsx
│   └── styles
│       ├── constants
│       │   ├── constants.css
└── templates
    └── text_page.jsx

coreyward commented 6 years ago

Okay, so I was able to get past this by adding in this config.merge call to the build-javascript and build-html/develop-html stages of the Gatsby webpack.config.js:

// node_modules/gatsby/dist/utils/webpack.config.js:198
// CSS modules
config.loader(`cssModules`, {
  test: /\.module\.css$/,
  loader: (0, _gatsby1ConfigExtractPlugin.extractTextPlugin)(stage).extract(`style`, [(0, _gatsby1ConfigCssModules.cssModulesConfig)(stage), `postcss`])
});

// These lines added
config.merge({
  postcss: [require(`postcss-import`)(), require(`postcss-cssnext`)({
    browsers: program.browserslist
  })]
});
// End of added lines

return config;

I have a limited understanding what these lines do, but I suspect the postcss-import is what we're missing.

pieh commented 6 years ago

Seems like issue was resolved and what caused by custom webpack modifications, so I'll close this.

gatsbyjs / gatsby