Error: Cannot find module './blocks/images'

[diegovfeder]

I'm developing an ecommerce with keystone, prisma, graphql, next js and excited to be learning a lot about this next level tools.

Recently I started an update from keystone-next to keystone-6.

But now I'm stuck in something I don't know where to start...

This is the log after running yarn keystone dev

keystone dev
✨ Starting Keystone
⭐️ Dev Server Starting on http://localhost:3000
⭐️ GraphQL API Starting on http://localhost:3000/api/graphql
✨ Generating GraphQL and Prisma schemas
✨ Your database is up to date, no migrations need to be created or applied
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
Error: Cannot find module './blocks/images'
Require stack:
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/build/webpack/config/index.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/build/webpack-config.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/dev/hot-reloader.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/dev/next-dev-server.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/next.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/dist/createAdminUIMiddleware-c23ad39a.cjs.dev.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/scripts/dist/keystone-6-core-scripts.cjs.dev.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/scripts/dist/keystone-6-core-scripts.cjs.js
- /Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/bin/cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.mod._resolveFilename (/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/build/webpack/require-hook.ts:136:26)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/build/webpack/config/index.ts:5:41)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/build/webpack/config/index.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/build/webpack-config.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/dev/hot-reloader.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/dev/next-dev-server.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/node_modules/next/dist/server/next.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/dist/createAdminUIMiddleware-c23ad39a.cjs.dev.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/scripts/dist/keystone-6-core-scripts.cjs.dev.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/scripts/dist/keystone-6-core-scripts.cjs.js',
    '/Users/diego.feder/workspace/money/grifecommerce/node_modules/@keystone-6/core/bin/cli.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My node version is v14.17.1 and here is my package.json:

"dependencies": {
    "@apollo/client": "^3.3.20",
    "@apollo/link-error": "^2.0.0-beta.3",
    "@babel/runtime": "^7.14.6",
    "@keystone-6/auth": "^1.0.0",
    "@keystone-6/cloudinary": "^1.0.0",
    "@keystone-6/core": "^1.0.0",
    "@notionhq/client": "^0.4.4",
    "@prisma/client": "3.6.0",
    "apollo-upload-client": "^16.0.0",
    "axios": "^0.23.0",
    "classnames": "^2.3.1",
    "dotenv": "^10.0.0",
    "graphql": "^15.7.2",
    "graphql-tag": "^2.12.4",
    "lodash.debounce": "^4.0.8",
    "next": "11.0.1",
    "next-with-apollo": "^5.2.1",
    "nodemailer": "^6.6.3",
    "nprogress": "^0.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-typescript": "^7.14.5",
    "@jest/types": "^27.2.5",
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/react": "^6.3.4",
    "@testing-library/react": "^12.0.0",
    "@types/apollo-upload-client": "^14.1.0",
    "@types/jest": "^26.0.23",
    "@types/lodash.debounce": "^4.0.6",
    "@types/node": "^15.12.5",
    "@types/nodemailer": "^6.4.4",
    "@types/nprogress": "^0.2.0",
    "@types/react": "17.0.13",
    "@types/rewire": "^2.5.28",
    "@types/styled-components": "^5.1.10",
    "@typescript-eslint/eslint-plugin": "^4.27.0",
    "@typescript-eslint/parser": "^4.27.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-import": "^2.23.4",
    "jest": "^27.0.6",
    "prettier": "^2.3.1",
    "prisma": "3.6.0",
    "rewire": "^5.0.0",
    "ts-node": "^10.3.0",
    "typescript": "4.3.5"
  }
}

Please let me know if you need more context. Thanks 🙌🏻

[bladey]

Hey @diegovfeder, I'm unable to reproduce this with the details you've provided. Are you still having this issue?

[diegovfeder]

Hey @bladey! Thanks for replying here.

Actually yes... I'm still facing the issue. Do you have any idea what could it be? Maybe I got the wrong package version?...

[bladey]

All looks ok to me! Can you ensure you've deleted your node_modules and .keystone folder and done a fresh install? Feel free to share the repo with me privately and I can take a look.

[diegovfeder]

Hey @bladey, sorry I'm taking some days off (Holiday season). Let me try this week or next week again and I'll let you know how it goes. If it doesn't then I can share the project with you 😉

[diegovfeder]

I found a solution here: https://github.com/vercel/next.js/issues/31325

The problem was that the .yarnclean was deleting the images folder from the next module inside keystone-6.

To fix it I had to change from:

# asset directories
docs
doc
website
images
assets

To:

# asset directories
docs
doc
website
# images
assets

I'm closing this issue then. Thank you @bladey.