Build fails if there's a broken tsconfig.json file outside the project

[machour]

What version of Remix are you using?

latest

Steps to Reproduce

• npx create-remix@latest (just the basics, typescript)
• cd my-remix-app
• touch ../tsconfig.json
• npm run dev

Expected Behavior

The build should work fine, and the tsconfig.json file outside my project should be ignored

Actual Behavior

🍺 ~/my-remix-app npm run dev

dev
remix dev

Watching Remix app in development mode...

✘ [ERROR] Unexpected end of file

../tsconfig.json:1:0:
  1 │
    ╵ ^

Build failed with 1 error:
../tsconfig.json:1:0: ERROR: Unexpected end of file

[machour]

@F3n67u 👋🏼
Could this be caused by tsconfig-paths ?

[F3n67u]

@F3n67u 👋🏼
Could this be caused by tsconfig-paths ?

I think yes. tsconfig-paths will walk to parent directory until to root to find a tsconfig.json. if the found tsconfig.json is not valid, then error will throw when parse the invalid json config. I think error message could be improved.

[machour]

Can we tell it to stop searching when reaching the remix app root?
I do have a valid tsconfig.json file that was generated by create-remix, so I don't see why it continues looking up the path

[nivekithan]

I don't think there is any problem with tsconfig-paths, rather I think problem is with esbuild. Setting tsconfig key in esbuild.build function on both createServerBuild and createBrowserBuild have solved error for me.

EDIT: This is causing lot of test to fail on running yarn test

async function createBrowserBuild(
  config: RemixConfig,
  options: BuildOptions & { incremental?: boolean }
): Promise<esbuild.BuildResult> {
  ...
  ...
  ...
  return esbuild.build({
    ...
    tsconfig: `${config.rootDirectory}/tsconfig.json`, // Setting tsconfig explicitly
  });
}

function createServerBuild(
  config: RemixConfig,
  options: Required<BuildOptions> & { incremental?: boolean },
  assetsManifestPromiseRef: AssetsManifestPromiseRef
): Promise<esbuild.BuildResult> {
  ...
  ...
  ...
  
  return esbuild
    .build({
      ...
      tsconfig: `${config.rootDirectory}/tsconfig.json`,
    })
    .then(...);
}

[F3n67u]

I think yes. tsconfig-paths will walk to parent directory until to root to find a tsconfig.json. if the found tsconfig.json is not valid, then error will throw when parse the invalid json config. I think error message could be improved.

@machour I am wrong a lot. after some debugging, I found it's not a problem with tsconfig-paths;

$ npx create-remix@latest (just the basics, typescript)
$ cd my-remix-app
$ touch ../tsconfig.json
$ npm run dev

> dev
> remix dev

Watching Remix app in development mode...
config loader result {
  resultType: 'success',
  configFileAbsolutePath: '/Users/feng/test/my-remix-app/tsconfig.json',
  baseUrl: '.',
  absoluteBaseUrl: '/Users/feng/test/my-remix-app',
  paths: { '~/*': [ './app/*' ] }
}
✘ [ERROR] [plugin browser-route-module] Build failed with 1 error:
../tsconfig.json:1:0: ERROR: Unexpected end of file

 ✘ [ERROR] [plugin browser-route-module] Build failed with 1 error:
../tsconfig.json:1:0: ERROR: Unexpected end of file


Build failed with 2 errors:
error: Build failed with 1 error:
../tsconfig.json:1:0: ERROR: Unexpected end of file
error: Build failed with 1 error:
../tsconfig.json:1:0: ERROR: Unexpected end of file
💿 Built in 486ms

config loader result log is added by me after let configLoaderResult = loadTsConfig();:

https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/utils/tsconfig/index.ts#L8

the log result shows tsconfig-paths does find the correct tsconfig.json: /Users/feng/test/my-remix-app/tsconfig.json, but not the empty(invalid) tsconfig.json which is at /Users/feng/test/tsconfig.json

[MichaelDeBoey]

Looking at the error message, it seems to be an error in our own browserRouteModulesPlugin (haven't really checked it though)

https://github.com/remix-run/remix/blob/15d18e624e9de6fe22cc44db8db7e509d218fc4e/packages/remix-dev/compiler/plugins/browserRouteModulesPlugin.ts

[MichaelDeBoey]

Closed by #3936