Adding component blocks to document field fails (embedded mode)

[DPangerl]

Setup

• Set up keystone 6 as embeded according to the documentation

• Add a list with a document field

• Add component blocks according to the documentation

App won't compile and throws the following error:

error - ./pages/_app.js:8:0
Module not found: Can't resolve '../../src/lib/component-blocks'
   6 | import * as view3 from "../../../node_modules/@keystone-6/core/fields/types/checkbox/views";
   7 | import * as view4 from "../../../node_modules/@keystone-6/fields-document/views";
>  8 | import * as view5 from "../../src/lib/component-blocks";
   9 | 
  10 | var adminConfig = {};
  11 | 

Expect

I would expect that the app compiles successfully

Info

"next": "^12.0.4",
"@keystone-6/auth": "^1.0.2",
"@keystone-6/core": "^1.0.1",
"@keystone-6/fields-document": "^1.0.1",

[dcousens]

Why are you using ../../src/lib/component-blocks instead of '@keystone-6/fields-document/component-blocks'?
Why are your imports directly pathing into node_modules instead of using the packages?

See #7379 (comment)

[DPangerl]

Why are you using ../../src/lib/component-blocks instead of '@keystone-6/fields-document/component-blocks'?

As the documentation points out: I have to create a file called component-blocks.tsx which holds the code for my custom component for the document editor.

This file has to be imported in keystone.ts like this:

import { config, list } from '@keystone-6/core';
import { document } from '@keystone-6/fields-document';
import { componentBlocks } from './component-blocks';

export default config({
  lists: {
    ListName: list({
      fields: {
        fieldName: document({
          ui: {
            views: require.resolve('./component-blocks')
          },
          componentBlocks,
        }),
      },
    }),
  },
});

I guess the problem is the require.resolve('./component-blocks') which resolves correctly if i log it from my keystone.ts but causes the runtime error

error - ./pages/_app.js:8:0
Module not found: Can't resolve '../../src/lib/component-blocks'
   6 | import * as view3 from "../../../node_modules/@keystone-6/core/fields/types/checkbox/views";
   7 | import * as view4 from "../../../node_modules/@keystone-6/fields-document/views";
>  8 | import * as view5 from "../../src/lib/component-blocks";
   9 | 
  10 | var adminConfig = {};
  11 | 

Why are your imports directly pathing into node_modules instead of using the packages?

I guess this is resolved like this by keystone… There is no input like that in my code. I use a near fresh install of nextjs with keystone in embeded mode.

[hhimanshu]

I am facing this same issue

[Syranda]

Had that same problem a few days ago. I don't know why it's happening but using path.resolve("./component-blocks") instead of require.resolve('./component-blocks') works for me

[hhimanshu]

This did not work for me :(

[cdguglermbb]

Using path.resolve worked for me.

[hhimanshu]

@DPangerl , did you manage to find out the answer? I am facing the exact same issue

[dcousens]

Hi @DPangerl, @hhimanshu and @cdguglermbb,

This problem, #7246 and #7349 should be resolved with our changes in #7289.

We intend to release a new version of Keystone within the next 24 hours, or early next week.
Please post here or open another issue if this isn't resolved with that release.

[bilal1031]

Hi @dcousens, What version of Keystone is this? I am facing this same issue, and I do not know which package below 8.0.0 has this issue fixed. My project is old, and I don't want to upgrade my project to 8.0.0 right now.

This is the package.json of my project.

  "dependencies": {
    "@keystone-6/auth": "^7.0.3",
    "@keystone-6/cloudinary": "^7.0.3",
    "@keystone-6/core": "^5.8.0",
    "@keystone-6/fields-document": "^7.0.0",
    "dotenv": "^16.0.3",
    "typescript": "^4.9.5"
  }