manifest.json error

In the checkout-js project, when you create a folder under packages and try to define a component from that folder to anywhere else, you will encounter an error like 'manifest.json undefined.'

To resolve this error, following the steps below should be sufficient.

Step 1: Create an opt7 directory

Create a directory under packages like packages/opt7.

Step 2: Create opt7 files

opt7
├── src
│   └── TrustBuildingElements
│       └── index.ts
├── .eslintrc.json
├── jest.config.js
├── project.json
├── tsconfig.json
└── tsconfig.spec.json

.eslintrc.json

{
  "extends": ["../../../.eslintrc.json"]
}

jest.config.js

module.exports = {
    displayName: 'opt7',
    preset: '../../jest.preset.js',
    globals: {
        'ts-jest': {
            tsconfig: '<rootDir>/tsconfig.spec.json',
            diagnostics: false,
        },
    },
    transform: {
        '^.+\.[tj]sx?$': 'ts-jest',
    },
    setupFilesAfterEnv: ['../../jest-setup.ts'],
    coverageDirectory: '../../coverage/packages/opt7',
};

project.json

{
    "root": "packages/opt7",
    "sourceRoot": "packages/opt7/src",
    "projectType": "library",
    "targets": {
        "lint": {
            "executor": "@nrwl/linter:eslint",
            "outputs": ["{options.outputFile}"],
            "options": {
                "lintFilePatterns": ["packages/opt7/**/*.{ts,tsx}"]
            }
        },
        "test": {
            "executor": "@nrwl/jest:jest",
            "outputs": ["coverage/packages/opt7"],
            "options": {
                "jestConfig": "packages/opt7/jest.config.js",
                "passWithNoTests": true
            }
        }
    },
    "tags": ["scope:integration"]
}

tsconfig.json

{
    "extends": "../../tsconfig.base.json",
    "references": [
        {
            "path": "./tsconfig.spec.json"
        }
    ]
}

tsconfig.spec.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "types": ["jest", "node"]
    },
    "include": [
        "**/*.spec.ts",
        "**/*.spec.tsx"
    ]
}

Step 3

After organizing the 'opt7' folder and its files as mentioned above, you need to make the following adjustments in the workspace.json file in the root directory.

{
    .
    .
    .
    //Other configs...
    "projects": {
        .
        .
        .
        //Other configs...
        "opt7": "packages/opt7"
    }
}

After making these adjustments, you can use the components you created in the opt7/src folder wherever you need them in the project.

Happy Hacking! 🧡