Building product Javascrript and CSS bundles failed (WEBPACK ERROR #98123)

This is my first time using Issues and reaching out for help from the public. @_@ Link to my repository here.

Description

I am able to build fine for development, but not production.

Steps to reproduce

yarn develop

gatsby-config.js

  siteMetadata: {
    title: `#100DaysOfCode`,
    description: `Steffie Harner hereby commits herself to 100DaysofCode to learn more about GatsbyJS, creative coding, & motion graphics`,
    author: `steffie harner`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

package.json

  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[e-mail]>",
  "dependencies": {
    "@types/react": "^16.9.23",
    "core-js": "^3.6.4",
    "gatsby": "^2.19.7",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-anime": "^3.0.3",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "scss": "^0.2.4",
    "typescript": "^3.8.3"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "yarn develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Expected result

Have a nice build in /pubilc to deploy.

Actual result

⠀
failed Building production JavaScript and CSS bundles - 4.393s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Expected an opening square bracket.

Environment

    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.32
    gatsby-image: ^2.2.39 => 2.2.43
    gatsby-plugin-manifest: ^2.2.39 => 2.2.44
    gatsby-plugin-offline: ^3.0.32 => 3.0.37
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.23
    gatsby-plugin-sharp: ^2.4.3 => 2.4.7
    gatsby-source-filesystem: ^2.1.46 => 2.1.50
    gatsby-transformer-sharp: ^2.3.13 => 2.3.17```

[herecydev]

The issue is in the css here: https://github.com/steffieharner/100daysofcode/blob/master/src/styles/layout.css#L93

Just remove that opening square bracket. Let me know if that helps

[olegkorol]

The issue is in the css here: https://github.com/steffieharner/100daysofcode/blob/master/src/styles/layout.css#L93 Just remove that opening square bracket. Let me know if that helps

Hi, can you recall what the mistake was? That repo does not seem to exist anymore. Thanks a lot in advance!

Just a typo really, opening square bracket that wasn’t needed.

Just figured out what the problem was. Thanks anyway for the quick answer though!

For the record (maybe this could be helpful to someone), here’s what happened and how I was able to solve it.

Problem

I was getting the exact same error as described above:

failed Building production JavaScript and CSS bundles - x.xxxs

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Expected an opening square bracket.

The root cause was a bug when using postcss-preset-env in conjunction with TailwindCSS. This issue is well described here: https://github.com/tailwindlabs/tailwindcss/issues/1190#issuecomment-546621554

Solution

Modifying the PostCSS config solved the problem:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import')({
      plugins: [require('stylelint')],
    }),
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-preset-env')({
      features: {
        'focus-within-pseudo-class': false, // <-- Added this line
      },
      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
    }),
  ],
};