@nx/remix 16.8.2 → 17.0.4

package/src/generators/application/files/common/app/root.tsx__tmpl__

@@ -8,11 +8,11 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
+export const meta: MetaFunction = () => ([{
   charset: "utf-8",
   title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
-});
+}]);
 
 export default function App() {
   return (
@@ -29,4 +29,4 @@ export default function App() {
       </body>
     </html>
   );
-}
+}

package/src/generators/application/files/common/app/routes/_index.tsx__tmpl__

@@ -0,0 +1,9 @@
+import NxWelcome from "../nx-welcome";
+
+export default function Index() {
+  return (
+    <div>
+      <NxWelcome title={"<%= projectName %>"} />
+    </div>
+  );
+}

package/src/generators/application/files/common/remix.config.js__tmpl__

@@ -1,11 +1,17 @@
+import {createWatchPaths} from '@nx/remix';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
-module.exports = {
-  ignoredRouteFiles: ["**/.*"],
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
-  // publicPath: "/build/",
-  watchPaths: () => require("@nx/remix").createWatchPaths(__dirname),
+export default {
+    ignoredRouteFiles: ["**/.*"],
+    // appDirectory: "app",
+    // assetsBuildDirectory: "public/build",
+    // serverBuildPath: "build/index.js",
+    // publicPath: "/build/",
+    watchPaths: () => createWatchPaths(__dirname),
 };

package/src/generators/application/files/common/tests/routes/_index.spec.tsx__tmpl__

@@ -0,0 +1,16 @@
+import { createRemixStub } from '@remix-run/testing';
+import { render, screen, waitFor } from '@testing-library/react';
+import Index from '../../app/routes/_index';
+
+test('renders loader data', async () => {
+  const RemixStub = createRemixStub([
+    {
+      path: '/',
+      Component: Index,
+    },
+  ]);
+
+  render(<RemixStub />);
+
+  await waitFor(() => screen.findByText('Hello there,'));
+});

package/src/generators/application/files/common/tsconfig.app.json__tmpl__

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "remix.env.d.ts",
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.js",
+    "app/**/*.jsx"
+  ],
+  "exclude": [
+    "tests/**/*.spec.ts",
+    "tests/**/*.test.ts",
+    "tests/**/*.spec.tsx",
+    "tests/**/*.test.tsx",
+    "tests/**/*.spec.js",
+    "tests/**/*.test.js",
+    "tests/**/*.spec.jsx",
+    "tests/**/*.test.jsx"
+  ]
+}

package/src/generators/application/files/common/tsconfig.json__tmpl__

@@ -1,18 +1,24 @@
 {
   "extends": "<%= offsetFromRoot %>tsconfig.base.json",
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "target": "ES2019",
-    "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  }
+      "lib": ["DOM", "DOM.Iterable", "ES2019"],
+      "isolatedModules": true,
+      "esModuleInterop": true,
+      "jsx": "react-jsx",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "target": "ES2019",
+      "strict": true,
+      "allowJs": true,
+      "forceConsistentCasingInFileNames": true,
+      // Remix takes care of building everything in `remix build`.
+      "noEmit": true
+    },
+    "include": [],
+    "files": [],
+    "references": [
+      {
+        "path": "./tsconfig.app.json"
+      }
+    ]
 }

package/src/generators/application/files/integrated/package.json__tmpl__

@@ -4,6 +4,7 @@
   "description": "",
   "license": "",
   "scripts": {},
+  "type": "module",
   "dependencies": {
     "@remix-run/node": "<%= remixVersion %>",
     "@remix-run/react": "<%= remixVersion %>",

package/src/generators/application/lib/add-e2e.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+import { type NormalizedSchema } from './normalize-options';
+export declare function addE2E(tree: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/application/lib/add-e2e.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addE2E = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function addE2E(tree, options) {
+    if (options.e2eTestRunner === 'cypress') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', (0, versions_1.getPackageVersion)(tree, 'nx'));
+        // TODO(colum): Remix needs a different approach to serve-static
+        // Likely via remix start
+        // addFileServerTarget(tree, options, 'serve-static');
+        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.projectName],
+        });
+        return await configurationGenerator(tree, {
+            project: options.e2eProjectName,
+            directory: 'src',
+            skipFormat: true,
+            devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}:development`,
+            baseUrl: options.e2eWebServerAddress,
+            addPlugin: options.addPlugin,
+        });
+    }
+    else if (options.e2eTestRunner === 'playwright') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', (0, versions_1.getPackageVersion)(tree, 'nx'));
+        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.projectName],
+        });
+        return configurationGenerator(tree, {
+            project: options.e2eProjectName,
+            skipFormat: true,
+            skipPackageJson: false,
+            directory: 'src',
+            js: false,
+            linter: options.linter,
+            setParserOptionsProject: false,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+            webServerAddress: options.e2eWebServerAddress,
+            rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
+        });
+    }
+    else {
+        return () => { };
+    }
+}
+exports.addE2E = addE2E;
+function addFileServerTarget(tree, options, targetName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+    projectConfig.targets[targetName] = {
+        executor: '@nx/web:file-server',
+        options: {
+            buildTarget: `${options.projectName}:build`,
+            port: options.e2ePort,
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, projectConfig);
+}

package/src/generators/application/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './normalize-options';
 export * from './update-unit-test-config';
+export * from './add-e2e';

package/src/generators/application/lib/index.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./normalize-options"), exports);
 tslib_1.__exportStar(require("./update-unit-test-config"), exports);
-//# sourceMappingURL=index.js.map
+tslib_1.__exportStar(require("./add-e2e"), exports);

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,8 +1,13 @@
-import { Tree } from '@nx/devkit';
-import { NxRemixGeneratorSchema } from '../schema';
+import { type Tree } from '@nx/devkit';
+import { type NxRemixGeneratorSchema } from '../schema';
 export interface NormalizedSchema extends NxRemixGeneratorSchema {
     projectName: string;
     projectRoot: string;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
+    e2eWebServerAddress: string;
+    e2eWebServerTarget: string;
+    e2ePort: number;
     parsedTags: string[];
 }
-export declare function normalizeOptions(tree: Tree, options: NxRemixGeneratorSchema): NormalizedSchema;
+export declare function normalizeOptions(tree: Tree, options: NxRemixGeneratorSchema): Promise<NormalizedSchema>;

package/src/generators/application/lib/normalize-options.js

@@ -2,23 +2,61 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const devkit_1 = require("@nx/devkit");
-const project_1 = require("../../../utils/project");
-function normalizeOptions(tree, options) {
-    const { layoutDirectory, projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    const appDirectory = (0, project_1.normalizeDirectory)(options.name, projectDirectory);
-    const appName = (0, project_1.normalizeProjectName)(options.name, projectDirectory);
-    const { appsDir: defaultAppsDir } = (0, devkit_1.getWorkspaceLayout)(tree);
-    const appsDir = layoutDirectory !== null && layoutDirectory !== void 0 ? layoutDirectory : defaultAppsDir;
-    const projectName = appName;
-    const projectRoot = options.rootProject
-        ? '.'
-        : (0, devkit_1.joinPathFragments)(appsDir, appDirectory);
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const eslint_1 = require("@nx/eslint");
+async function normalizeOptions(tree, options) {
+    const { projectName, projectRoot, projectNameAndRootFormat } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        rootProject: options.rootProject,
+        callingGenerator: '@nx/remix:application',
+    });
+    options.rootProject = projectRoot === '.';
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPluginDefault;
+    let e2eWebServerTarget = options.addPlugin ? 'dev' : 'serve';
+    if (options.addPlugin) {
+        if (nxJson.plugins) {
+            for (const plugin of nxJson.plugins) {
+                if (typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/remix/plugin' &&
+                    plugin.options.devTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .devTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = options.addPlugin ? 3000 : 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)) {
+        e2ePort =
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+                nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+    }
+    const e2eProjectName = options.rootProject ? 'e2e' : `${projectName}-e2e`;
+    const e2eProjectRoot = options.rootProject ? 'e2e' : `${projectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
-    return Object.assign(Object.assign({}, options), { projectName,
+    return {
+        ...options,
+        linter: options.linter ?? eslint_1.Linter.EsLint,
+        projectName,
         projectRoot,
-        parsedTags });
+        e2eProjectName,
+        e2eProjectRoot,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
+        parsedTags,
+    };
 }
 exports.normalizeOptions = normalizeOptions;
-//# sourceMappingURL=normalize-options.js.map

package/src/generators/application/lib/update-unit-test-config.d.ts

@@ -1,2 +1,2 @@
 import { type Tree } from '@nx/devkit';
-export declare function updateUnitTestConfig(tree: Tree, pathToRoot: string, unitTestRunner: 'vitest' | 'jest'): import("@nx/devkit").GeneratorCallback;
+export declare function updateUnitTestConfig(tree: Tree, pathToRoot: string, unitTestRunner: 'vitest' | 'jest', rootProject: boolean): import("@nx/devkit").GeneratorCallback;

package/src/generators/application/lib/update-unit-test-config.js

@@ -4,27 +4,52 @@ exports.updateUnitTestConfig = void 0;
 const devkit_1 = require("@nx/devkit");
 const testing_config_utils_1 = require("../../../utils/testing-config-utils");
 const versions_1 = require("../../../utils/versions");
-function updateUnitTestConfig(tree, pathToRoot, unitTestRunner) {
+function updateUnitTestConfig(tree, pathToRoot, unitTestRunner, rootProject) {
     const pathToTestSetup = (0, devkit_1.joinPathFragments)(pathToRoot, `test-setup.ts`);
     tree.write(pathToTestSetup, (0, devkit_1.stripIndents) `
   import { installGlobals } from '@remix-run/node';
-  import '@testing-library/jest-dom/extend-expect';
+  import '@testing-library/jest-dom/matchers';
   installGlobals();`);
     if (unitTestRunner === 'vitest') {
-        const pathToViteConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'vite.config.ts');
-        (0, testing_config_utils_1.updateViteTestIncludes)(tree, pathToViteConfig, './app/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
-        (0, testing_config_utils_1.updateViteTestSetup)(tree, pathToViteConfig, './test-setup.ts');
+        const pathToViteConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'vitest.config.ts');
+        (0, testing_config_utils_1.updateVitestTestIncludes)(tree, pathToViteConfig, './app/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
+        (0, testing_config_utils_1.updateVitestTestIncludes)(tree, pathToViteConfig, './tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
+        (0, testing_config_utils_1.updateVitestTestSetup)(tree, pathToViteConfig, 'test-setup.ts');
     }
-    else if (unitTestRunner === 'jest') {
+    else if (unitTestRunner === 'jest' && rootProject) {
         const pathToJestConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'jest.config.ts');
+        tree.write('jest.preset.cjs', tree.read('jest.preset.js', 'utf-8'));
         (0, testing_config_utils_1.updateJestTestSetup)(tree, pathToJestConfig, `<rootDir>/test-setup.ts`);
+        tree.write(pathToJestConfig, tree
+            .read(pathToJestConfig, 'utf-8')
+            .replace('jest.preset.js', 'jest.preset.cjs'));
     }
+    const pathToTsConfigSpec = (0, devkit_1.joinPathFragments)(pathToRoot, `tsconfig.spec.json`);
+    (0, devkit_1.updateJson)(tree, pathToTsConfigSpec, (json) => {
+        json.include = [
+            'vite.config.ts',
+            'vitest.config.ts',
+            'app/**/*.ts',
+            'app/**/*.tsx',
+            'app/**/*.js',
+            'app/**/*.jsx',
+            'tests/**/*.spec.ts',
+            'tests/**/*.test.ts',
+            'tests/**/*.spec.tsx',
+            'tests/**/*.test.tsx',
+            'tests/**/*.spec.js',
+            'tests/**/*.test.js',
+            'tests/**/*.spec.jsx',
+            'tests/**/*.test.jsx',
+        ];
+        return json;
+    });
     return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
         '@testing-library/jest-dom': versions_1.testingLibraryJestDomVersion,
         '@testing-library/react': versions_1.testingLibraryReactVersion,
         '@testing-library/user-event': versions_1.testingLibraryUserEventsVersion,
         '@remix-run/node': (0, versions_1.getRemixVersion)(tree),
+        '@remix-run/testing': (0, versions_1.getRemixVersion)(tree),
     });
 }
 exports.updateUnitTestConfig = updateUnitTestConfig;
-//# sourceMappingURL=update-unit-test-config.js.map

package/src/generators/application/schema.d.ts

@@ -1,10 +1,16 @@
+import { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+
 export interface NxRemixGeneratorSchema {
   name: string;
   tags?: string;
   js?: boolean;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  linter?: Linter;
   unitTestRunner?: 'vitest' | 'jest' | 'none';
-  e2eTestRunner?: 'cypress' | 'none';
+  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   skipFormat?: boolean;
   rootProject?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "$id": "NxRemixApplication",
   "title": "Create an Application",
+  "description": "Generate a new Remix application.",
   "type": "object",
   "properties": {
     "name": {
@@ -24,25 +25,30 @@
       "alias": "dir",
       "x-priority": "important"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
     "unitTestRunner": {
       "type": "string",
-      "enum": [
-        "vitest",
-        "jest",
-        "none"
-      ],
+      "enum": ["vitest", "jest", "none"],
       "default": "vitest",
       "description": "Test runner to use for unit tests.",
       "x-prompt": "What unit test runner should be used?"
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": [
-        "cypress",
-        "none"
-      ],
+      "enum": ["cypress", "playwright", "none"],
       "default": "cypress",
-      "description": "Test runner to use for e2e tests"
+      "description": "Test runner to use for e2e tests",
+      "x-prompt": "Which E2E test runner would you like to use?"
     },
     "tags": {
       "type": "string",

package/src/generators/cypress-component-configuration/cypress-component-configuration.impl.d.ts

@@ -1,3 +1,5 @@
 import { type Tree } from '@nx/devkit';
 import { type CypressComponentConfigurationSchema } from './schema';
-export default function cypressComponentConfigurationGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<void>;
+export declare function cypressComponentConfigurationGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<void>;
+export declare function cypressComponentConfigurationGeneratorInternal(tree: Tree, options: CypressComponentConfigurationSchema): Promise<void>;
+export default cypressComponentConfigurationGenerator;

package/src/generators/cypress-component-configuration/cypress-component-configuration.impl.js

@@ -1,25 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+exports.cypressComponentConfigurationGeneratorInternal = exports.cypressComponentConfigurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
-const versions_1 = require("../../utils/versions");
+const react_1 = require("@nx/react");
 function cypressComponentConfigurationGenerator(tree, options) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const { cypressComponentConfigGenerator } = (0, devkit_1.ensurePackage)('@nx/react', (0, versions_1.getPackageVersion)(tree, 'nx'));
-        yield cypressComponentConfigGenerator(tree, {
-            project: options.project,
-            generateTests: options.generateTests,
-            skipFormat: true,
-            bundler: 'vite',
-            buildTarget: '',
-        });
-        const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, { tmpl: '' });
-        if (!options.skipFormat) {
-            yield (0, devkit_1.formatFiles)(tree);
-        }
+    return cypressComponentConfigurationGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
     });
 }
+exports.cypressComponentConfigurationGenerator = cypressComponentConfigurationGenerator;
+async function cypressComponentConfigurationGeneratorInternal(tree, options) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPluginDefault;
+    await (0, react_1.cypressComponentConfigGenerator)(tree, {
+        project: options.project,
+        generateTests: options.generateTests,
+        skipFormat: true,
+        bundler: 'vite',
+        buildTarget: '',
+        addPlugin: options.addPlugin,
+    });
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, { tmpl: '' });
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.cypressComponentConfigurationGeneratorInternal = cypressComponentConfigurationGeneratorInternal;
 exports.default = cypressComponentConfigurationGenerator;
-//# sourceMappingURL=cypress-component-configuration.impl.js.map

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -2,4 +2,5 @@ export interface CypressComponentConfigurationSchema {
   project: string;
   generateTests?: boolean;
   skipFormat?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/error-boundary/__snapshots__/error-boundary.impl.spec.ts.snap

@@ -1,21 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ErrorBoundary --apiVersion=1 should correctly add the ErrorBoundary to the route file 1`] = `
-"export function ErrorBoundary({ error }) {
-  console.error(error);
-  return (
-    <div>
-      <h1>Uh oh ...</h1>
-      <p>Something went wrong</p>
-      <pre>{error.message || 'Unknown error'}</pre>
-    </div>
-  );
+exports[`ErrorBoundary --nameAndDirectoryFormat=as-provided --apiVersion=2 should correctly add the ErrorBoundary to the route file 1`] = `
+"import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  // when true, this is what used to go to 'CatchBoundary'
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>Oops</h1>
+        <p>Status: {error.status}</p>
+        <p>{error.data.message}</p>
+      </div>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
+  }
 }
 "
 `;
 
-exports[`ErrorBoundary --apiVersion=2 should correctly add the ErrorBoundary to the route file 1`] = `
-"import { isRouteErrorResponse, useRouteError } from '@remix-run/react';
+exports[`ErrorBoundary --nameAndDirectoryFormat=as-provided --apiVersion=2 should correctly add the ErrorBoundary to the route file 2`] = `
+"import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
 export function ErrorBoundary() {
   const error = useRouteError();
 
@@ -28,22 +44,18 @@ export function ErrorBoundary() {
         <p>{error.data.message}</p>
       </div>
     );
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
   }
-
-  // Don't forget to typecheck with your own logic.
-  // Any value can be thrown, not just errors!
-  let errorMessage = 'Unknown error';
-  // if (isDefinitelyAnError(error)) {
-  //    errorMessage = error.message;
-  // }
-
-  return (
-    <div>
-      <h1>Uh oh ...</h1>
-      <p>Something went wrong.</p>
-      <pre>{errorMessage}</pre>
-    </div>
-  );
 }
 "
 `;

package/src/generators/error-boundary/error-boundary.impl.js

@@ -1,21 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const lib_1 = require("./lib");
-function errorBoundaryGenerator(tree, schema) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const options = (0, lib_1.normalizeOptions)(tree, schema);
-        if (options.apiVersion === 1) {
-            (0, lib_1.addV1ErrorBoundary)(tree, options);
-        }
-        else {
-            (0, lib_1.addV2ErrorBoundary)(tree, options);
-        }
-        if (!options.skipFormat) {
-            yield (0, devkit_1.formatFiles)(tree);
-        }
-    });
+async function errorBoundaryGenerator(tree, schema) {
+    const options = await (0, lib_1.normalizeOptions)(tree, schema);
+    (0, lib_1.addV2ErrorBoundary)(tree, options);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.default = errorBoundaryGenerator;
-//# sourceMappingURL=error-boundary.impl.js.map