Unable to use Component Blocks in Keystone 6. Getting ERR_PACKAGE_PATH_NOT_EXPORTED error

[vishwa795]

Use the keystone boilerplate repository. In the post schema, add a component block exactly as mentioned in the docs.

Application should run fine.

✨ Starting Keystone
(node:21488) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/declarations/src/component-blocks' is not defined by "exports" in /Users/vishwa/Desktop/work/synapse/node_modules/@keystone-6/fields-document/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at /Users/vishwa/Desktop/work/synapse/node_modules/next/dist/server/require-hook.js:54:36
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at Module.mod.require (/Users/vishwa/Desktop/work/synapse/node_modules/next/dist/server/require-hook.js:64:28) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
error Command failed with exit code 1.

node version: 17.0.0
Latest keystone version

[borisno2]

Hi @vishwa795,
The error suggests you are trying to import something from @keystone-6/fields-document/dist/declarations/src/component-blocks but that is not defined in the exports of the package, what are you importing from that location?

[vishwa795]

Ah, my bad the import was hapenning from wrong location.

I guess vscode automatically imported from the wrong location.
However, Im getting a diferrent error now.

This is how i'm using the component blocks ^^

Getting the following error:

Module not found: Can't resolve '/Users/vishwa/Desktop/work/curio/apps/component-blocks.tsx'
   8 | import * as view5 from "@keystone-6/core/fields/types/timestamp/views";
   9 | import * as view6 from "@keystone-6/fields-document/views";
> 10 | import * as view7 from "/Users/vishwa/Desktop/work/curio/apps/component-blocks.tsx";
  11 | 
  12 | var adminConfig = {};
  13 | 

[borisno2]

Your views: path.resolve("../component-blocks.tsx") on line 32 is being converted to /Users/vishwa/Desktop/work/curio/apps/component-blocks.tsx which can't be found, so your path of ../component-blocks.tsx is not correct.

[vishwa795]

ui: {
          views: path.resolve(__dirname, "..", "src/component-blocks.tsx"),
      }

I got it working with the above snippet. But when i try to use

ui: {
          views: "../component-blocks.tsx",
        }

It fails with the Module not found error. In the screen shot attached above you can see that I'm referencing my parent directory for component blocks. Ideally ../component-blocks.tsx should have also worked.

EDIT: Maybe it's trying to look into .keystone folder:

ui: {
          views: path.resolve(__dirname, "component-blocks.tsx"),
        }

Location referenced for above output.

[dcousens]

@vishwa795 maybe https://github.com/keystonejs/keystone/blob/main/examples/custom-field-view/schema.ts#L27 helps as an example reference?

[gautamsi]

@vishwa795 keep in mind that views: "../component-blocks.tsx" the path is supposed to be relative to the package.json in the repo and not relative to the file where you are using this line.