search

chiubaka / genesis

Creates standardized monorepos and pre-configured project scaffolding for Chiubaka Technologies projects.
2 stars 0 forks source link

Create a React app generator #123

Closed chiubaka closed 2 years ago

chiubaka commented 2 years ago

Complete with Storybook for component testing and Cypress for E2E testing!

chiubaka commented 2 years ago

Started this today. I'm using @nrwl/react:app as a base. Here's what I'm noticing about the project it outputs:

Here are some things that need to be modified:

Here are some test cases I absolutely need:

chiubaka commented 2 years ago

Encountering an interesting problem while I play with this.

I've made some pretty heavy modifications to the tsconfig.json generation code, but because I have snapshots I'm pretty confident that existing project generators were not affected by that.

When I install and run linting on e.g. just node-lib, everything works fine.

However, when I install react-app, linting suddently breaks for all projects, including node-lib even if it that was working just a second ago.

Actual linting error appears to be something around jest typings. Suddenly all expect calls are flagging invocation of any.

chiubaka commented 2 years ago

Even more interesting! The linting issues here aren't about dependency installs, which is what I had suspected.

If I leave any new dependencies in the workspace package.json, then delete the react-app project directory, linting starts working on node-lib again.

Somehow something inside of react-app is affecting other projects! Wondering if relative pathing of includes is not working the way I might otherwise expect here.

chiubaka commented 2 years ago

Interestingly, if I generate Nx's react-app, the same problem occurs. Makes me wonder if the workspace was somehow not designed for this.

I'm going to generate a blank Nx workspace and do some playing around to test this theory.

chiubaka commented 2 years ago

Blank Nx workspace with Nx's react-app works just fine. Now going to try to modify that until it stops working properly to try and isolate what's different in my workspace.

chiubaka commented 2 years ago
  1. Moved app.spec.tsx to test/unit and linting continues to work fine with no modifications to tsconfig.spec.json
  2. Copied base tsconfig.json into project. No problems.
  3. Copied tsconfig.spec.json into project. No problems.
  4. Copied jest.config.ts into project. No problems.
  5. Upgraded to yarn v3. No problems.
  6. Copied .eslintrc.json into project and updated workspace .eslintrc.json ignore patterns to not ignore everything. No problems.
  7. Copied workspace .eslintrc.json and this has caused a bunch of expected linting errors, but also is creating the "Unsafe call of an any typed value" error.

So it seems as if something inside of @chiubaka/eslint-config may be causing this problem.

chiubaka commented 2 years ago

Ok, pretty sure the problem is this line in @chiubaka/eslint-config.

I think this is finding all TSConfig files workspace-wide and somehow combining them to use in a somewhat unpredictable way.

Setting the TypeScript parser's options like this doesn't seem super compatible with a monorepo set up, unfortunately.

chiubaka commented 2 years ago

Opened an issue with @chiubaka/eslint-config to track this: https://github.com/chiubaka/eslint-config/issues/38

chiubaka commented 2 years ago

Linting is fixed! Now looking at an interesting build error in the generated project:

shinsoku:genesis-lib-e2e dchiu$ nx build react-app --verbose

> nx run react-app:build:production

assets by status 364 KiB [cached] 7 assets
Entrypoint main = runtime.57061bc4509fbeb8.esm.js main.0f74571d7ab342b8.esm.js
Entrypoint polyfills = runtime.57061bc4509fbeb8.esm.js polyfills.f349bbd464fc4530.esm.js
Entrypoint styles = runtime.57061bc4509fbeb8.esm.js styles.ef46db3751d8e999.css

ERROR in ./packages/react-app/src/main.tsx:1:28
TS1149: File name '/users/dchiu/developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react/index.d.ts' differs from already included file name '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react/index.d.ts' only in casing.
  The file is in the program because:
    Type library referenced via 'react' from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@nrwl/react/typings/image.d.ts'
    Imported via 'react' from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react-dom/index.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via 'react' from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@nrwl/react/typings/image.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via './' from file '/users/dchiu/developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react/jsx-runtime.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via "react" from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/packages/react-app/src/main.tsx' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via 'react' from file '/users/dchiu/developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react-dom/client.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via "react" from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/react-router-dom/index.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via "react" from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/react-router/lib/components.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via "react" from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/react-router/lib/context.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via "react" from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/react-router/lib/hooks.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Entry point for implicit type library 'react' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via 'react' from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react-router/index.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
    Imported via 'react' from file '/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@types/react-router-dom/index.d.ts' with packageId '@types/react/index.d.ts@18.0.18'
  > 1 | import { StrictMode } from "react";
      |                            ^^^^^^^
    2 | import * as ReactDOM from "react-dom/client";
    3 | import { BrowserRouter } from "react-router-dom";
    4 |

webpack 5.74.0 compiled with 1 error (a4139eb9a52f39bc)

 >  NX   ENOENT: no such file or directory, open 'dist/packages/react-app/index.html'

Error: ENOENT: no such file or directory, open 'dist/packages/react-app/index.html'
    at Object.openSync (node:fs:599:3)
    at writeFileSync (node:fs:2221:35)
    at /Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@nrwl/web/src/utils/webpack/write-index-html.js:211:32
    at Generator.next (<anonymous>)
    at /Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/tslib/tslib.js:118:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/tslib/tslib.js:114:16)
    at writeIndexHtml (/Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@nrwl/web/src/utils/webpack/write-index-html.js:192:20)
    at /Users/dchiu/Developer/genesis/tmp/nx-e2e/genesis-lib-e2e/node_modules/@nrwl/web/src/executors/webpack/webpack.impl.js:118:61
    at Generator.next (<anonymous>)

 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target "react-app:build" failed
chiubaka commented 2 years ago

My suspicions is something in the TSConfigs. Playing with a fresh copy and modifying TSConfigs until I can replicate this error.

chiubaka commented 2 years ago

Nope, copied over the TSConfigs and build is still working on a default NX React app. Going to modify the code sample now to see if I can get that to work.

chiubaka commented 2 years ago

I just noticed the actual casing difference in the error. It looks as if /Users became /users and /Developer became /developer. It's almost as if something lowercased the whole import path.

chiubaka commented 2 years ago

Running a bisect now to see if I can glean any other clues. Not sure why this may be happening. I tried generating a fresh genesis workspace and then generating the react-app all OUTSIDE the genesis monorepo, and it still failed.

chiubaka commented 2 years ago 
6a52f3e15491fc016f15e41092c840ee96b01585 is the first bad commit
commit 6a52f3e15491fc016f15e41092c840ee96b01585
Author: Daniel Chiu <daniel@chiubaka.com>
Date:   Tue Sep 6 07:59:03 2022 +0800

    Update tsconfigProjectGenerator to write JSON directly and support reactAppGenerator use cases

 .../app/react/e2e/reactAppE2eGenerator.ts          |   5 +-
 .../src/generators/lib/ts/tsLibGenerator.ts        |   8 +-
 .../tsconfig.__projectType__.json__template__      |  23 +++-
 .../tsconfig/files/tsconfig.json__template__       |   3 +
 .../project/tsconfig/files/tsconfig.spec.json      |  13 ---
 .../tsconfig/files/tsconfig.spec.json__template__  |  20 ++++
 .../tsconfig/tsconfigProjectGenerator.presets.ts   |  54 +++++++--
 .../tsconfig/tsconfigProjectGenerator.schema.ts    |  10 +-
 .../project/tsconfig/tsconfigProjectGenerator.ts   | 130 ++++++++++++++++++---
 packages/nx-plugin/src/types/index.ts              |   1 +
 packages/nx-plugin/src/types/tsconfig.ts           |  22 ++++
 .../__snapshots__/nodeAppGenerator.spec.ts.snap    |   2 +-
 .../__snapshots__/reactAppGenerator.spec.ts.snap   |  35 +++---
 .../__snapshots__/nodeLibGenerator.spec.ts.snap    |   4 +-
 .../lib/__snapshots__/tsLibGenerator.spec.ts.snap  |   5 +-
 .../tsconfigProjectGenerator.spec.ts.snap          |   4 +-
 packages/nx-plugin/tsconfig.spec.json              |   3 +-
 17 files changed, 263 insertions(+), 79 deletions(-)
 delete mode 100644 packages/nx-plugin/src/generators/project/tsconfig/files/tsconfig.spec.json
 create mode 100644 packages/nx-plugin/src/generators/project/tsconfig/files/tsconfig.spec.json__template__
 create mode 100644 packages/nx-plugin/src/types/tsconfig.ts

Interestingly, it looks like the problem may actually be with the TsConfigs?

chiubaka commented 2 years ago

Alright, I have discovered that removing this block from the project base tsconfig.json file solves the build errors:

  "files": [
    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
    "../../node_modules/@nrwl/react/typings/image.d.ts"
  ],

I am confused by this, however, since this is included in the default Nx React app, albeit with the files setting in each of the child tsconfig.app.json and tsconfig.spec.json files instead.

chiubaka commented 2 years ago

More specifically, it's "../../node_modules/@nrwl/react/typings/image.d.ts" that's causing the problem. Commenting out that line leaves me with a working build.

I think that this file is meant to be adding support for importing image files as modules... it seems likely that the top-level "react" reference is creating a conflict somehow.

chiubaka commented 2 years ago

Even more specifically, it's actually the references to the react typings at the top of this file that are causing the problem. Removing those results in a working build.

chiubaka commented 2 years ago

Actually it's just the reference to react that breaks this. For some reason that particular reference to react is resolving to a lowercased version of my react types.

chiubaka commented 2 years ago

Couple of problems getting this merged in yesterday:

chiubaka commented 2 years ago

At this point I no longer think the GitHub test failures are on GitHub's end. I should see if this is still working on master branch.

chiubaka commented 2 years ago

Huh. This is failing on master as well now.

chiubaka commented 2 years ago

I get a 500 back when trying to delete a label, but creating / updating a label is fine.

chiubaka commented 2 years ago

I can also successfully delete labels via CURL

chiubaka commented 2 years ago

How interesting. I can make this work if I use octokit.request rather than the convenience method in octokit.rest.issues.deleteLabel.

But even weirder, as I was trying to create a reproducible test case to file an issue with OctokitJS, I'm finding that on a completely fresh GitHub account and using a code example running on Runkit, there is no issue with octokit.rest.issues.deleteLabel. So. Freaking. Strange.

My best guess now is that some related dependency upgraded itself and somehow that's causing the issue. The dependency tree on my local machine vs the one set up on RunKit are somehow not exactly the same.

chiubaka commented 2 years ago

A few last things to wrap this up neatly in a bow: