yarn run build: [ERROR] Client bundle compiled with errors therefore further build is impossible.

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

🐛 Bug Report

Building inside node container by using the command RUN yarn run build results in an error. Both in the Production and Development environment.

This is the output:

Module parse failed: Unexpected end of JSON input while parsing empty string
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
JSONParseError: Unexpected end of JSON input while parsing empty string
[ERROR] Client bundle compiled with errors therefore further build is impossible.
error Command failed with exit code 1.

Docusaurus Version

2.0.0-rc.1

Reproducible demo

https://github.com/getLucre/lucre-baseapp

Steps to reproduce

Build the Docker file below by running:

docker build -f Dockerfile.prod -t lucre-baseapp:1.0.0 .

Or you can reproduce this by using the public version of the git repo and run

yarn build

Dockerfile.prod

FROM node:latest as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm install -g npm@8.15.1 --silent
RUN npm install react-scripts@latest -g --silent
COPY . ./
RUN yarn install
RUN yarn run build #This line results in error on production. Also, `yarn build` returns the same error on development env

Docker Output:

Step 7/13 : RUN yarn install
 ---> Running in d0a8c58a75fd
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@docusaurus/core > react-loadable-ssr-addon-v5-slorber@1.0.1" has unmet peer dependency "react-loadable@*".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react@3.1.1" has unmet peer dependency "@types/react@>= 16.8.0 < 19.0.0".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.7.1" has unmet peer dependency "@algolia/client-search@^4.9.1".
[4/4] Building fresh packages...
Done in 66.56s.
Removing intermediate container d0a8c58a75fd
 ---> 481272ad4da5
Step 8/13 : RUN yarn run build
 ---> Running in 812df6c25ba6
yarn run v1.22.19
$ docusaurus build
[INFO] [en] Creating an optimized production build...
ℹ Compiling Client
ℹ Compiling Server
✔ Client: Compiled with some errors in 49.66s


Module parse failed: Unexpected end of JSON input while parsing empty string
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
JSONParseError: Unexpected end of JSON input while parsing empty string
[ERROR] Client bundle compiled with errors therefore further build is impossible.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn run build' returned a non-zero code: 1

Expected behavior

Build success.

Actual behavior

Module parse failed: Unexpected end of JSON input while parsing empty string You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders JSONParseError: Unexpected end of JSON input while parsing empty string [ERROR] Client bundle compiled with errors therefore further build is impossible. error Command failed with exit code 1.

Your environment

package.json

{
  "name": "getlucre",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@docusaurus/core": "^2.0.0-rc.1",
    "@docusaurus/plugin-google-gtag": "^2.0.0-rc.1",
    "@docusaurus/plugin-sitemap": "^2.0.0-rc.1",
    "@docusaurus/preset-classic": "^2.0.0-rc.1",
    "@mdx-js/react": "^1.6.22",
    "autoprefixer": "^10.4.7",
    "clsx": "^1.1.1",
    "postcss": "^8.4.14",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "tailwindcss": "^3.0.24"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "^2.0.0-rc.1",
    "@tsconfig/docusaurus": "^1.0.4",
    "typescript": "^4.6.2"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

babel.config.js

module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

Yarn Version

v1.22.19

**Node Docker Tag **

node:latest # This result in docker tag version 5.0.1

Self-service

• I’d be willing to fix this bug myself.

[Josh-Cena]

@AfolabiOlaoluwa FYI, you have three empty _category_.json files. Writing {} in them or removing them entirely fixes the error.

Normally, these JSON files are only read on server-side, where we can both silently ignore the file (because it’s empty) and, failing that, emit a better error message. The reason why Webpack is complaining here is because in your templates.tsx file, you have a line that says require(`@site/docs/05-templates/${template.name}/${template.logo}`). When Webpack is bundling your site, it has to statically analyze all imports. This require is dynamic, so Webpack has to compromise and analyze what it can—i.e. bundling everything under @site/docs/05-templates because literally anything could come as the ${template.name}/${template.logo} part. Therefore, it ends up bundling the empty _category_.json file.

Unfortunately, it’s not possible for us to give a better error message in this case—because it’s not a very canonical case to handle! I’m going to close this since it’s a user error. One way to fix this is to ensure every JSON file has at least {} in it. If you have further questions (there are other errors after fixing this one), feel free to comment below.

[AfolabiOlaoluwa]

@Josh-Cena Thank you. That fixed it totally.