search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.59k stars 2.36k forks source link

Nx migrate latest returns a bug with storybook - 'configDir' is missing #15046

Closed igor17400 closed 1 year ago

igor17400 commented 1 year ago

Current Behavior

I executed the command nx migrate latest , thus nx and its libraries were updated to version 15.7.1.

However, when I execute the command to start storybook nx storybook shared-ui --verbose I receive the following error:

> nx run shared-ui:storybook

 >  NX   Required property 'configDir' is missing

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target storybook for project shared-ui failed

   Failed tasks:

   - shared-ui:storybook

   Hint: run the command with --verbose for more details.

I have seen the issue https://github.com/nrwl/nx/issues/14945 but the answer was to update the nx to its latest version. However, I have already done that and the error continues.

Expected Behavior

The expected behavior is to successfully start the storybook when the command nx run shared-ui:storybook is executed

GitHub Repo

No response

Steps to Reproduce

  1. nx migrate latest
  2. nx report --> make sure it is on version 15.7.1
  3. nx run ≤storybook-library≥ --> in my case nx run shared-ui:storybook

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.12.0
   OS   : darwin arm64
   yarn : 1.22.17

   nx                      : 15.7.1
   @nrwl/jest              : 15.7.1
   @nrwl/linter            : 15.7.1
   @nrwl/workspace         : 15.7.1
   @nrwl/cli               : 15.7.1
   @nrwl/cypress           : 15.7.1
   @nrwl/devkit            : 15.7.1
   @nrwl/eslint-plugin-nx  : 15.7.1
   @nrwl/js                : 15.7.1
   @nrwl/nest              : 15.7.1
   @nrwl/next              : 15.7.1
   @nrwl/node              : 15.7.1
   @nrwl/react             : 15.7.1
   @nrwl/rollup            : 15.7.1
   @nrwl/storybook         : 15.7.1
   @nrwl/tao               : 15.7.1
   @nrwl/web               : 15.7.1
   @nrwl/webpack           : 15.7.1
   typescript              : 4.8.4

Failure Logs

shell
>  NX   Required property 'configDir' is missing

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target storybook for project shared-ui failed

   Failed tasks:

   - shared-ui:storybook

   Hint: run the command with --verbose for more details.

Additional Information

No response

mandarini commented 1 year ago

Hello! Which version did you update from? Did you use nx migrate for all version updates? Can I see the storybook targets of your project.json?

igor17400 commented 1 year ago

At first we were in version "nx": "15.0.4". I do not know if it will help, but below is the previous package.json file

{
  "dependencies": {
    "@analytics/google-tag-manager": "^0.5.2",
    "@aws-sdk/client-dynamodb": "^3.211.0",
    "@aws-sdk/lib-dynamodb": "^3.211.0",
    "@headlessui/react": "^1.6.6",
    "@hookform/resolvers": "^2.9.6",
    "@nestjs/common": "^9.0.0",
    "@nestjs/config": "^2.2.0",
    "@nestjs/core": "^9.0.0",
    "@nestjs/mapped-types": "^1.2.0",
    "@nestjs/passport": "^9.0.0",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/swagger": "^6.1.3",
    "@nestjs/typeorm": "^9.0.1",
    "@nrwl/next": "14.4.3",
    "@tailwindcss/typography": "^0.5.4",
    "@types/aws-lambda": "^8.10.108",
    "@types/aws-serverless-express": "^3.3.5",
    "@types/uuid": "^8.3.4",
    "@vendia/serverless-express": "^4.10.1",
    "amazon-cognito-identity-js": "^5.2.12",
    "analytics": "^0.8.1",
    "autoprefixer": "^10.4.7",
    "aws-lambda": "^1.0.7",
    "aws-sdk": "^2.1265.0",
    "aws-serverless-express": "^3.4.0",
    "axios": "^0.27.2",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "core-js": "^3.6.5",
    "cpf-cnpj-validator": "^1.0.3",
    "dayjs": "^1.11.5",
    "downshift": "^6.1.11",
    "dynamoose": "^3.1.0",
    "formidable": "^2.0.1",
    "framer-motion": "^6.5.1",
    "html-react-parser": "^3.0.1",
    "jwks-rsa": "^2.1.5",
    "jwt-decode": "^3.1.2",
    "mocha": "^10.1.0",
    "moment": "^2.29.4",
    "nest-qldb": "^3.0.2",
    "nestjs-form-data": "^1.8.3",
    "next": "12.1.6",
    "nookies": "^2.5.2",
    "passport": "^0.6.0",
    "passport-jwt": "^4.0.0",
    "pdf-to-base64": "^1.0.3",
    "plugin": "^0.3.3",
    "postcss": "^8.4.14",
    "react": "18.2.0",
    "react-circular-progressbar": "^2.1.0",
    "react-csv": "^2.2.2",
    "react-datepicker": "^4.8.0",
    "react-dom": "18.2.0",
    "react-dropzone": "^14.2.2",
    "react-hook-form": "^7.33.1",
    "react-horizontal-scrolling-menu": "^3.2.3",
    "react-icons": "^4.4.0",
    "react-intersection-observer": "^9.3.5",
    "react-number-format": "^4.9.3",
    "react-phone-number-input": "^3.2.5",
    "react-responsive-carousel": "^3.2.23",
    "react-scroll-horizontal": "^1.6.6",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.0.6",
    "reflect-metadata": "^0.1.13",
    "regenerator-runtime": "0.13.7",
    "rxjs": "^7.0.0",
    "serverless": "^3.25.0",
    "serverless-jetpack": "^0.11.1",
    "serverless-offline": "^11.5.0",
    "serverless-plugin-common-excludes": "^4.0.0",
    "serverless-plugin-optimize": "^4.2.1-rc.1",
    "sharp": "^0.31.1",
    "storybook-addon-next-router": "^4.0.1",
    "suneditor": "^2.36.0",
    "suneditor-react": "^3.4.1",
    "supertest": "^6.3.1",
    "tailwindcss": "^3.1.6",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "zod": "^3.17.9"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/preset-typescript": "7.12.13",
    "@mdx-js/react": "^1.6.22",
    "@nestjs/schematics": "^9.0.0",
    "@nestjs/testing": "^9.0.0",
    "@nrwl/cli": "14.4.3",
    "@nrwl/cypress": "14.4.3",
    "@nrwl/eslint-plugin-nx": "14.4.3",
    "@nrwl/jest": "15.0.4",
    "@nrwl/linter": "14.4.3",
    "@nrwl/nest": "15.0.4",
    "@nrwl/node": "15.0.4",
    "@nrwl/react": "14.4.3",
    "@nrwl/storybook": "14.4.3",
    "@nrwl/web": "14.4.3",
    "@nrwl/workspace": "14.4.3",
    "@storybook/addon-a11y": "^6.5.13",
    "@storybook/addon-essentials": "6.5.9",
    "@storybook/addon-storysource": "^6.5.13",
    "@storybook/addons": "^6.5.13",
    "@storybook/builder-webpack5": "6.5.9",
    "@storybook/core-server": "6.5.9",
    "@storybook/manager-webpack5": "6.5.9",
    "@storybook/react": "6.5.9",
    "@storybook/test-runner": "^0.9.1",
    "@storybook/theming": "^6.5.13",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/cypress": "^8.0.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "13.3.0",
    "@types/aws-sdk": "^2.7.0",
    "@types/cypress": "^1.1.3",
    "@types/jest": "28.1.1",
    "@types/multer": "^1.4.7",
    "@types/node": "^18.7.1",
    "@types/passport-jwt": "^3.0.7",
    "@types/react": "^18.0.14",
    "@types/react-dom": "18.0.5",
    "@types/supertest": "^2.0.12",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "28.1.1",
    "babel-loader": "8.1.0",
    "chromatic": "^6.11.4",
    "cypress": "^9.1.0",
    "eslint": "~8.15.0",
    "eslint-config-next": "12.1.6",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "7.30.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-tailwindcss": "^3.6.2",
    "husky": "^8.0.1",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "jsdom-testing-mocks": "^1.6.0",
    "lint-staged": "^13.0.3",
    "mochawesome": "^7.1.3",
    "nx": "15.0.4",
    "prettier": "^2.6.2",
    "react-test-renderer": "18.2.0",
    "serverless-dotenv-plugin": "^4.0.2",
    "serverless-export-env": "arabold/serverless-export-env",
    "serverless-export-outputs": "^1.0.2",
    "serverless-iam-roles-per-function": "^3.2.0",
    "serverless-plugin-include-dependencies": "^5.0.0",
    "storybook-addon-next-router": "^4.0.1",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.7.2",
    "url-loader": "^3.0.0"
  }
}

Below is the project.json for the storybook

{
  "name": "shared-ui",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/shared/ui/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/shared/ui/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/libs/shared/ui"],
      "options": {
        "jestConfig": "libs/shared/ui/jest.config.ts",
        "passWithNoTests": true
      }
    },
    "storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/react",
        "port": 4400,
        "config": {
          "configFolder": "libs/shared/ui/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/react",
        "outputPath": "dist/storybook/shared-ui",
        "config": {
          "configFolder": "libs/shared/ui/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }
  }
}
mandarini commented 1 year ago

You should have this entry in your migrations.json file:

    {
      "cli": "nx",
      "version": "15.4.6-beta.0",
      "description": "Refactor the Storybook target options",
      "factory": "./src/migrations/update-15-4-6/refactor-executor-options",
      "package": "@nrwl/storybook",
      "name": "update-15.4.6"
    },

For me it works. I did the following:

  1. npx create-nx-workspace@15.0.4 my-workspace, chose integrated and then react to have a workspace with a single React application, which I called web.
  2. cd my-workspace
  3. yarn add -D @nrwl/storybook@15.0.4
  4. npm nx g @nrwl/react:storybook-configuration --name=web
  5. npx nx migrate latest
  6. yarn
  7. npx nx migrate --run-migrations

And it worked.

It might be that you missed some migrations, or you moved to a version and did not use nx migrate. That's ok, you can use the following command to get all the migrations:

nx migrate @nrwl/storybook@latest --from=@nrwl/storybook@15.0.4

Can you please do that, and let me know if your issue is fixed?

You may see a bug (Cannot read properties of undefined (reading 'parent')) when running the last migration twice, it's already fixed and it's coming up in our next release. If you get that bug, just add an empty stories: [] array in your root .storybook/main.js file.

Alternatively, you can just create manually a migrations.json file at the root of your workspace, and in it you can paste this:

{
  "migrations": [
    {
      "cli": "nx",
      "version": "15.4.6-beta.0",
      "description": "Refactor the Storybook target options",
      "factory": "./src/migrations/update-15-4-6/refactor-executor-options",
      "package": "@nrwl/storybook",
      "name": "update-15.4.6"
    },
  ]
}

and then run

npx nx migrate --run-migrations
igor17400 commented 1 year ago

We were using nx version 15.0.4 and them we updated for the version 15.7.0 and then we updated to the version 15.7.1.

I see that you have used storybook version 15.0.4 at first and then executed the command npx nx migrate --run-migrations, with this command the nx version updated to the v15.7.1?

I have managed to fix the problem by adding the line "configDir": "libs/shared/ui/.storybook" as shown in the image below:

Screenshot 2023-02-16 at 11 27 07

Our migrations.json file

{
  "migrations": [
    {
      "version": "15.7.0-beta.0",
      "description": "Split global configuration files into individual project.json files. This migration has been added automatically to the beginning of your migration set to retroactively make them work with the new version of Nx.",
      "cli": "nx",
      "implementation": "./src/migrations/update-15-7-0/split-configuration-into-project-json-files",
      "package": "@nrwl/workspace",
      "name": "15-7-0-split-configuration-into-project-json-files"
    },
    {
      "cli": "nx",
      "version": "15.0.12-beta.1",
      "description": "Set project names in project.json files",
      "implementation": "./src/migrations/update-15-1-0/set-project-names",
      "package": "nx",
      "name": "15.1.0-set-project-names"
    },
    {
      "version": "14.8.0-beta.0",
      "description": "Migrates from @nrwl/workspace:run-commands to nx:run-commands",
      "cli": "nx",
      "implementation": "./src/migrations/update-14-8-0/change-run-commands-executor",
      "package": "@nrwl/workspace",
      "name": "14-8-0-change-run-commands-executor"
    },
    {
      "version": "15.7.0-beta.0",
      "description": "Split global configuration files (e.g., workspace.json) into individual project.json files.",
      "cli": "nx",
      "implementation": "./src/migrations/update-15-7-0/split-configuration-into-project-json-files",
      "package": "@nrwl/workspace",
      "name": "15-7-0-split-configuration-into-project-json-files"
    },
    {
      "cli": "nx",
      "version": "14.4.4",
      "description": "Adds @typescript-eslint/utils as a dev dep",
      "factory": "./src/migrations/update-14-4-4/experimental-to-utils-deps",
      "package": "@nrwl/linter",
      "name": "experimental-to-utils-deps"
    },
    {
      "cli": "nx",
      "version": "14.4.4",
      "description": "Switch from  @typescript-eslint/experimental-utils to @typescript-eslint/utils in all rules and rules.spec files",
      "factory": "./src/migrations/update-14-4-4/experimental-to-utils-rules",
      "package": "@nrwl/linter",
      "name": "experimental-to-utils-rules"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.0",
      "description": "Stop hashing eslint config files for build targets and dependent tasks",
      "factory": "./src/migrations/update-15-0-0/add-eslint-inputs",
      "package": "@nrwl/linter",
      "name": "add-eslint-inputs"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.0",
      "description": "Stop hashing storybook config files and story files for build targets and dependent tasks",
      "factory": "./src/migrations/update-15-0-0/add-storybook-inputs",
      "package": "@nrwl/storybook",
      "name": "update-15.0.8-add-storybook-inputs"
    },
    {
      "cli": "nx",
      "version": "15.4.6-beta.0",
      "description": "Refactor the Storybook target options",
      "factory": "./src/migrations/update-15-4-6/refactor-executor-options",
      "package": "@nrwl/storybook",
      "name": "update-15.4.6"
    },
    {
      "cli": "nx",
      "version": "15.5.3-beta.0",
      "description": "Add @nrwl/webpack if it is missing and is used.",
      "factory": "./src/migrations/update-15-5-3/ensure-webpack-package",
      "package": "@nrwl/storybook",
      "name": "update-15-5-3"
    },
    {
      "cli": "nx",
      "version": "15.7.0-beta.0",
      "description": "Add @storybook/addon-essentials to all project-level configs and attempt to remove root config.",
      "factory": "./src/migrations/update-15-7-0/add-addon-essentials-to-all",
      "package": "@nrwl/storybook",
      "name": "update-15-7-0"
    },
    {
      "cli": "nx",
      "version": "14.6.1-beta.0",
      "description": "Change Cypress e2e and component testing presets to use __filename instead of __dirname and include a devServerTarget for component testing.",
      "factory": "./src/migrations/update-14-6-1/update-cypress-configs-presets",
      "package": "@nrwl/cypress",
      "name": "update-cypress-configs-preset"
    },
    {
      "cli": "nx",
      "version": "14.7.0-beta.0",
      "description": "Update Cypress if using v10 to support latest component testing features",
      "factory": "./src/migrations/update-14-7-0/update-cypress-version-if-10",
      "package": "@nrwl/cypress",
      "name": "update-cypress-if-v10"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.0",
      "description": "Stop hashing cypress spec files and config files for build targets and dependent tasks",
      "factory": "./src/migrations/update-15-0-0/add-cypress-inputs",
      "package": "@nrwl/cypress",
      "name": "add-cypress-inputs"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.4",
      "description": "Update to using cy.mount in the commands.ts file instead of importing mount for each component test file",
      "factory": "./src/migrations/update-15-0-0/update-cy-mount-usage",
      "package": "@nrwl/cypress",
      "name": "update-cy-mount-usage"
    },
    {
      "cli": "nx",
      "version": "15.1.0-beta.0",
      "description": "Update to Cypress v11. This migration will only update if the workspace is already on v10. https://www.cypress.io/blog/2022/11/04/upcoming-changes-to-component-testing/",
      "factory": "./src/migrations/update-15-1-0/cypress-11",
      "package": "@nrwl/cypress",
      "name": "update-to-cypress-11"
    },
    {
      "cli": "nx",
      "version": "15.5.0-beta.0",
      "description": "Update to Cypress v12. Cypress 12 contains a handful of breaking changes that might causes tests to start failing that nx cannot directly fix. Read more Cypress 12 changes: https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-12-0.This migration will only run if you are already using Cypress v11.",
      "factory": "./src/migrations/update-15-5-0/update-to-cypress-12",
      "package": "@nrwl/cypress",
      "name": "update-to-cypress-12"
    },
    {
      "cli": "nx",
      "version": "14.7.6-beta.1",
      "description": "Update usages of webpack executors to @nrwl/webpack",
      "factory": "./src/migrations/update-14-7-6/update-webpack-executor",
      "package": "@nrwl/web",
      "name": "update-webpack-executor"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.0",
      "description": "Adds babel.config.json to the hash of all tasks",
      "factory": "./src/migrations/update-15-0-0/add-babel-inputs",
      "package": "@nrwl/web",
      "name": "add-babel-inputs"
    },
    {
      "cli": "nx",
      "version": "15.0.0-beta.1",
      "description": "Update usages of rollup executors to @nrwl/rollup",
      "factory": "./src/migrations/update-15-0-0/update-rollup-executor",
      "package": "@nrwl/web",
      "name": "update-rollup-executor"
    },
    {
      "cli": "nx",
      "version": "15.5.4-beta.0",
      "description": "Update `@nrwl/web/babel` preset to `@nrwl/js/babel` for projects that have a .babelrc file.",
      "factory": "./src/migrations/update-15-5-4/update-babel-preset",
      "package": "@nrwl/web",
      "name": "update-babel-preset"
    },
    {
      "cli": "nx",
      "version": "14.6.0-beta.0",
      "description": "Update babel-jest to include the @nrwl/react/babel preset in project jest config",
      "factory": "./src/migrations/update-14-6-0/add-preset-jest-config",
      "package": "@nrwl/react",
      "name": "update-babel-jest-transform-option"
    },
    {
      "cli": "nx",
      "version": "15.3.0-beta.0",
      "description": "Update projects using @nrwl/web:rollup to @nrwl/rollup:rollup for build.",
      "factory": "./src/migrations/update-15-3-0/update-rollup-executor",
      "package": "@nrwl/react",
      "name": "update-rollup-executor"
    },
    {
      "cli": "nx",
      "version": "15.3.0-beta.0",
      "description": "Install new dependencies for React projects using Webpack or Rollup.",
      "factory": "./src/migrations/update-15-3-0/install-webpack-rollup-dependencies",
      "package": "@nrwl/react",
      "name": "install-webpack-rollup-dependencies"
    },
    {
      "cli": "nx",
      "version": "15.6.3-beta.0",
      "description": "Creates or updates webpack.config.js file with the new options for webpack.",
      "factory": "./src/migrations/update-15-6-3/webpack-config-setup",
      "package": "@nrwl/react",
      "name": "react-webpack-config-setup"
    }
  ]
}
mandarini commented 1 year ago

Hmm interesting. I see the "description": "Refactor the Storybook target options", migrator in your migrations.json, yet it seems it did not run.

That migrator would take what is in options.config.configFolder and place it in configDir. And then delete options.config.configFolder. Same with outputPath in build-storybook, it would change it to outputDir. I suggest you delete your migrations.json file, replace it with a new one with just this:

{
  "migrations": [
    {
      "cli": "nx",
      "version": "15.4.6-beta.0",
      "description": "Refactor the Storybook target options",
      "factory": "./src/migrations/update-15-4-6/refactor-executor-options",
      "package": "@nrwl/storybook",
      "name": "update-15.4.6"
    },
  ]
}

and run the migration again, to get these changes.

mandarini commented 1 year ago

Let me know if you try this out and it works, and then I can close this issue. I am really sorry your experience was not smooth!

dTalion commented 1 year ago

the above migration solved the same problem for me, thanks.

mandarini commented 1 year ago

Perfect, thank you for confirming @dTalion ! I will be closing this issue now, but let me know if you think there's a reason to reopen!

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.