[fast-serve] Unexpected token } in JSON at position 1014

DmitriyVdE commented 2 months ago

Hi

I'm currently having an issue I can't seem to find the cause of.

Some info before the explanation:

I'm not getting the error when using gulp serve
We use turborepo as our monorepo solution to contain many SPFx solutions along with some reusable code projects that are just normal node/react projects.
We extend some files like tsconfig.json with some centralized files (Which can be found below) with files imported from other packages within the monorepo.
Both gulpfile.js and fast-serve/webpack.extend.json contain configuration to add support for .mjs and set fs: "empty" along with some other simple scripts that don't cause problems in other webparts
Below when using '--REDACTED--' just replaces the name of the monorepo

When using fast-serve, I'm getting the following error:

[11:52:16] [fast-serve] Unexpected token } in JSON at position 1014
undefined:42
    }
    ^

SyntaxError: Unexpected token } in JSON at position 1014
    at JSON.parse (<anonymous>)
    at parse (F:\repos\--REDACTED--\node_modules\.pnpm\tsconfig@7.0.0\node_modules\tsconfig\dist\tsconfig.js:135:17)
    at F:\repos\--REDACTED--\node_modules\.pnpm\tsconfig@7.0.0\node_modules\tsconfig\dist\tsconfig.js:116:32
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

Node.js v18.20.2
[11:52:16] [fast-serve] The process terminated unexpectedly

package.json for the webpart:

{
  "name": "--WEBPART NAME REDACTED--",
  "version": "4.1.12",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.16.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test",
    "package": "gulp clean && gulp build && gulp bundle --ship && gulp package-solution --ship",
    "serve": "fast-serve",
    "--WEBPART NAME REDACTED--:watch": "gulp clean && fast-serve",
    "--WEBPART NAME REDACTED--:build": "gulp clean && gulp bundle --ship && gulp package-solution --ship"
  },
  "dependencies": {
    "@floating-ui/react": "0.26.11",
    "@fluentui/react": "^8.115.6",
    "@fluentui/react-charting": "^5.19.3",
    "@fluentui/react-components": "^9.47.5",
    "--REDACTED--/builds": "workspace:*",
    "--REDACTED--/common": "workspace:*",
    "--REDACTED--/styles": "workspace:*",
    "--REDACTED--/tsconfig": "workspace:*",
    "--REDACTED--/ux": "workspace:*",
    "@microsoft/microsoft-graph-client": "3.0.2",
    "@microsoft/sp-core-library": "1.18.2",
    "@microsoft/sp-http": "1.18.2",
    "@microsoft/sp-lodash-subset": "1.18.2",
    "@microsoft/sp-property-pane": "1.18.2",
    "@microsoft/sp-webpart-base": "1.18.2",
    "@pnp/graph": "^3.24.0",
    "@pnp/sp": "^3.24.0",
    "@pnp/spfx-controls-react": "^3.17.0",
    "@pnp/spfx-property-controls": "^3.16.0",
    "moment": "^2.29.4",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-csv": "2.2.2",
    "react-icons": "^5.0.1",
    "recharts": "2.2.0"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.18.2",
    "@microsoft/eslint-plugin-spfx": "1.18.2",
    "@microsoft/sp-build-web": "1.18.2",
    "@microsoft/sp-module-interfaces": "1.18.2",
    "@rushstack/eslint-config": "3.1.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.25",
    "@types/recharts": "^1.8.24",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint-plugin-react-hooks": "4.6.0",
    "file-loader": "^6.2.0",
    "spfx-fast-serve-helpers": "~1.18.0"
  }
}

tsconfig.json for the webpart:

{
  "extends": "./node_modules/--REDACTED--/tsconfig/rush-4.7/tsconfig-web.json",
  "compilerOptions": {
    "target": "es6",
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "strictNullChecks": false,
    "noUnusedLocals": false,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015",
      "es2015.collection",
      "es2015.promise",
      "es2016",
      "es2021"
    ],
    "paths": {
      "react": [
        "./node_modules/@types/react"
      ],
      "react-dom": [
        "./node_modules/@types/react-dom"
      ],
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

extends (from another monorepo package):

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": "./tsconfig-base.json",
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es5",
      "scripthost",
      "es2015.collection",
      "es2015.promise",
      "es2015.iterable",
      "dom"
    ]
  }
}

and extends (within the same monorepo package as the extends above):

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "extends": "./../node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": true,
    "jsx": "react",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "outDir": "../../../../lib",
    "rootDir": "../../../../src",
    "sourceMap": true,
    "strictNullChecks": true,
    "types": []
  },
  "include": [
    "../../../../src/**/*.ts",
    "../../../../src/**/*.tsx"
  ],
  "exclude": [
    "../../../../node_modules",
    "../../../../lib"
  ]
}

package.json for the monorepo package with the above extends files:

{
  "name": "--REDACTED--/tsconfig",
  "version": "1.0.0",
  "private": true,
  "files": [
    "base.json",
    "nextjs.json",
    "react-library.json",
    "rush-4.5/tsconfig-base.json",
    "rush-4.5/tsconfig-node.json",
    "rush-4.5/tsconfig-web.json",
    "rush-4.7/tsconfig-base.json",
    "rush-4.7/tsconfig-node.json",
    "rush-4.7/tsconfig-web.json"
  ],
  "devDependencies": {
    "@microsoft/rush-stack-compiler-4.7": "0.1.1"
  }
}

s-KaiNet commented 2 months ago

Other dev reported strange issue with fast-serve and pnpm versioning. Could you run pnpm list spfx-fast-serve-helpers and tell me the installed version? If, for some reason, version is 1.18.0, please run pnpm install spfx-fast-serve-helpers@latest -DE and make sure that the installed version is 1.18.12 and try to run your project.

s-KaiNet commented 2 months ago

Also, common advice when such kind of problems happen would be completely deleting node_modules, pnpm lock file and reinstalling all dependencies, if not done before.

DmitriyVdE commented 2 months ago

Hi, thank you for responding

I ran the pnpm list spfx-fast-serve-helpers command and got the following output:

devDependencies:
spfx-fast-serve-helpers 1.18.12

I tried reverting to 1.18.2, this did not work, and I also tried your suggestion and ran pnpm install spfx-fast-serve-helpers@latest -DE which set the version to 1.18.12 which also did not solve the issue. I also checked in the root of the mono repo, and the version there is also 1.18.12.

I have removed the node_modules folder and the lock file multiple times. I also updated my node to 18.20.2 and made sure my pnpm store/cached packages etc. was completely empty before running pnpm i so as to make sure there were no corrupt/outdated packages.

Are there maybe other files I have to check that could cause this issue?

DmitriyVdE commented 2 months ago

I managed to reproduce the problem in a clean webpart.

Because of some react types versioning issues, we had to add the following to our tsconfig.json under the compilerOptions:

    "paths": {
      "react": [
        "./node_modules/@types/react"
      ],
      "react-dom": [
        "./node_modules/@types/react-dom"
      ],
    }

Once this is added, fast-serve throws the error.

The versions installed are the following:

"@types/react": "17.0.45",
"@types/react-dom": "17.0.25",

DmitriyVdE commented 2 months ago

I did some more testing and when only leaving the following elements in the tsconfig.json it works:

    "paths": {
      "react": [
        "./node_modules/@types/react"
      ]
    }

So it seems the @types/react-dom reference was causing this. I'm not sure if the version (17.0.25) was the cause, but since we don't need it we'll just leave it out.

DmitriyVdE commented 2 months ago

My colleague noticed the trailing comma after the @types/react-dom entry in the paths property and asked me to remove it. Which solved the issue. It's strange that I wasn't getting any linting errors for this specifically, and my linter was also not removing it.

DmitriyVdE commented 2 months ago

Apparently, there's an exception for 'tsconfig.json' that allows trailing commas, so it probably has to do with how fast-serve parses the tsconfig.json files.

Reference: https://github.com/TypeStrong/tsconfig/issues/30

s-KaiNet commented 2 months ago

Glad it finally resolved.

Apparently, there's an exception for 'tsconfig.json' that allows trailing commas, so it probably has to do with how fast-serve parses the tsconfig.json files.

Yeah.. you're right, fast-serve uses require to load some configs, which is stricter to the json format. I will check if I could fix it.

s-KaiNet commented 2 months ago

JFYI I published spfx-fast-serve-helpers@1.18.13, which is more relaxed to tsconfig.json and allows extra commas, comments and some other things in TS config file. Please try it, I will close the issue, please reopen if there are still some problems.

s-KaiNet / spfx-fast-serve

[fast-serve] Unexpected token } in JSON at position 1014 #132