search

teambit / bit

A build system for development of composable software.
https://bit.dev
Other
17.87k stars 927 forks source link

Module not found: Error: Can't resolve 'react-dom/test-utils' #5686

Closed dminkovski closed 2 years ago

dminkovski commented 2 years ago

Describe the bug

Hey everyone, I have integrated bit into our react project which is using webpack, typescript, cypress etc. When i run 

bit install
bit compile
bit build

I receive the following error in the preview step (screenshot):

ModuleNotFoundError: Module not found: Error: Can't resolve 'react-dom/test-utils' in 'C:\Users\DavidMinkovski\AppData\Local\Bit\capsules\2f96b448dab36f9a3ddcf586b1b09fd22cf51467\node_modules\.pnpm\registry.npmjs.org+@testing-library+react@12.1.5_react-dom@17.0.2+react@17.0.2\node_modules\@testing-library\react\dist\@testing-library'

Full Log can be found here:

debug.log

Steps to Reproduce

package.json

{
  "name": "standard",
  "version": "1.0.0",
  "private": true,
  "description": "standard",
  "license": "ISC",
  "author": "Product Team",
  "scripts": {
    "clean-www": "rimraf target/classes/static/app/{src,target/}",
    "jest": "jest --coverage --logHeapUsage --maxWorkers=4 --config jest.config.js --testResultsProcessor jest-sonar-reporter",
    "start": "npm run webapp:dev",
    "sonar": "sonar-scanner",
    "test": "npm run jest",
    "report": "npx nyc report",
    "build": "node scripts/generate-buildno.js && npm run webapp:build:prod",
    "webapp:build": "npm run clean-www && npm run webapp:build:dev",
    "webapp:build:dev": "npm run webpack -- --config webpack/webpack.dev.js --env stats=minimal",
    "webapp:build:prod": "npm run webpack -- --config webpack/webpack.prod.js --progress=profile",
    "webapp:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --env stats=minimal",
    "webapp:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --progress=profile --env stats=normal",
    "webapp:mocktest": "npm run webpack-dev-server -- --config webpack/webpack.test.js --inline --port=9060 --progress=profile --env stats=normal",
    "webapp:mocktest-pipeline": "npm run webpack-dev-server -- --config webpack/webpack.test-pipeline.js --inline --port=9060 --progress=profile --env stats=normal",
    "webapp:prod": "npm run clean-www && npm run webapp:build:prod",
    "webapp:test": "npm run test",
    "webpack-dev-server": "npm run webpack -- serve",
    "webpack": "node --max_old_space_size=5048 node_modules/webpack/bin/webpack.js",
    "cypress": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
    "cypress:rfzmockend": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open --env testenv=rfzmockend,rfzmockend_url=http://localhost:8080",
    "cypress:rfzmockend-pipeline": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress run --browser chrome --headless --env testenv=rfzmockend,rfzmockend_url=http://mockend:8080",
    "cypress:rfzmockend:headless": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress run --browser chrome --headless --env testenv=rfzmockend,rfzmockend_url=http://localhost:8080",
    "cypress:headless": "cypress run --browser chrome --headless",
    "test:e2e": "start-server-and-test start 9000 cypress",
    "test:e2e:ci": "start-server-and-test start 9000 cypress:headless",
    "storybook": "npm run test:generate-output && start-storybook -s ./content -p 6006",
    "build-storybook": "build-storybook",
    "coverage": "npm run coverage:clean && npx nyc --silent npm run test:e2e:ci && npm run coverage:unit && npm run coverage:copy && npm run coverage:merge-report",
    "coverage:pipeline": "npm run coverage:clean && npx nyc --silent npm run test:e2e:ci && npm run coverage:copy && npm run coverage:merge-report",
    "coverage:clean": "npx rimraf ./.nyc_output && npx rimraf coverage",
    "coverage:unit": "npx nyc --silent npm run test",
    "coverage:integration": "npx nyc --silent npm run cypress:headless",
    "coverage:copy": "npx copyfiles -f coverage/unit/test-results/coverage-final.json coverage/report && npm run rename:unit && npx copyfiles -f  coverage/integration/coverage-final.json coverage/report && npm run rename:integration",
    "rename:unit": "node -e \"require('fs').rename('coverage/report/coverage-final.json', 'coverage/report/unit-coverage-final.json', function(err) { if (err) console.log(err); console.log('File successfully renamed!') })\"",
    "rename:integration": "node -e \"require('fs').rename('coverage/report/coverage-final.json', 'coverage/report/integration-coverage-final.json', function(err) { if (err) console.log(err); console.log('File successfully renamed!') })\"",
    "coverage:merge-report": "nyc report --reporter=lcov --reporter=text --report-dir=./coverage/report",
    "test:generate-output": "jest --json --outputFile=./coverage/unit/jest-test-results.json || true",
    "vrt": "cypress run --browser chrome --headless --spec cypress/integration/*VRT*.feature",
    "test:vrt": "start-server-and-test start 9000 vrt",
    "cy2": "cross-env CYPRESS_API_URL='http://localhost:1234/' cy2 run --headless --record --parallel --key test-key --ci-build-id `ris-vbb`",
    "publish": "node scripts/update-publish.js && npm publish dist/"
  },
  "config": {
    "default_environment": "prod"
  },
  "jest": {
    "collectCoverageFrom": [
      "app/**/*.{ts,tsx}",
      "!**/node_modules/**",
      "!app/**/*.stories.{ts,tsx}",
      "!app/test/data/**"
    ],
    "moduleNameMapper": {
      "app/(.*)$": "<rootDir>/app/$1",
      "img/(.*)$": "<rootDir>/content/img/$1"
    }
  },
  "nyc": {
    "all": true,
    "exclude": [
      "**/node_modules/**",
      "app/test/**"
    ],
    "include": [
      "app/**/@(*.)@(ts?(x))"
    ],
    "report-dir": "coverage/integration",
    "reporter": [
      "text",
      "json",
      "lcov"
    ]
  },
  "dependencies": {
    "@babel/preset-react": "^7.14.5",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/preset-scss": "^1.0.3",
    "@testing-library/cypress": "^7.0.6",
    "@testing-library/react-hooks": "^7.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "4.6.0",
    "dayjs": "1.10.4",
    "eslint-plugin-unused-imports": "^1.1.5",
    "gsap": "^3.9.1",
    "istanbul-lib-coverage": "^3.0.0",
    "istanbul-merge": "^1.1.1",
    "jest-svg-transformer": "^1.0.0",
    "lodash": "4.17.21",
    "loglevel": "^1.7.1",
    "nyc": "^15.1.0",
    "path-browserify": "1.0.1",
    "react": "17.0.1",
    "react-device-detect": "^2.1.2",
    "react-dom": "17.0.1",
    "react-hot-loader": "4.13.0",
    "react-image": "^4.0.3",
    "react-is": "^17.0.2",
    "react-loadable": "5.5.0",
    "react-redux": "7.2.3",
    "react-refresh": "^0.11.0",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-slick": "^0.28.1",
    "react-string-replace": "^0.4.4",
    "react-test-renderer": "^17.0.2",
    "react-transition-group": "4.4.1",
    "redux": "4.0.5",
    "redux-devtools": "3.7.0",
    "redux-devtools-dock-monitor": "1.2.0",
    "redux-devtools-log-monitor": "2.1.0",
    "redux-promise-middleware": "6.1.2",
    "redux-thunk": "2.3.0",
    "simplebar-react": "^2.3.6",
    "slick-carousel": "^1.8.1",
    "start-server-and-test": "^1.12.3",
    "storybook": "^6.3.2",
    "styled-components": "^5.3.0",
    "tslib": "2.1.0",
    "uuid": "8.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@cypress/browserify-preprocessor": "^3.0.1",
    "@cypress/code-coverage": "^3.9.11",
    "@cypress/skip-test": "^2.6.1",
    "@cypress/webpack-preprocessor": "^5.9.0",
    "@storybook/addon-actions": "^6.3.2",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.2",
    "@storybook/addon-jest": "^6.3.12",
    "@storybook/addon-links": "^6.3.2",
    "@storybook/react": "^6.3.2",
    "@svgr/webpack": "^5.5.0",
    "@teambit/mdx.modules.mdx-loader": "^0.0.488",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "^12.1.3",
    "@types/cypress-cucumber-preprocessor": "^4.0.1",
    "@types/jest": "26.0.22",
    "@types/lodash": "4.14.168",
    "@types/node": "^14.14.37",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.3",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.14",
    "@types/react-router-dom": "5.1.7",
    "@types/redux": "3.6.31",
    "@types/uuid": "^8.3.4",
    "@types/webpack-env": "1.16.0",
    "@typescript-eslint/eslint-plugin": "4.20.0",
    "@typescript-eslint/parser": "4.20.0",
    "autoprefixer": "9.0.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-istanbul": "^6.0.0",
    "browser-sync": "2.26.14",
    "browser-sync-webpack-plugin": "2.3.0",
    "cache-loader": "4.1.0",
    "concurrently": "6.0.0",
    "copy-webpack-plugin": "8.1.0",
    "core-js": "3.10.0",
    "cross-env": "7.0.3",
    "css-loader": "^5.2.0",
    "cy2": "^1.3.0",
    "cypress": "^9.1.1",
    "cypress-cucumber-preprocessor": "^4.1.3",
    "cypress-plugin-snapshots": "^1.4.4",
    "cypress-wait-until": "^1.7.2",
    "dotenv-webpack": "^7.0.3",
    "eslint": "7.23.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-react": "7.23.1",
    "eslint-webpack-plugin": "2.5.3",
    "file-loader": "6.2.0",
    "fork-ts-checker-webpack-plugin": "6.2.0",
    "friendly-errors-webpack-plugin": "1.7.0",
    "html-webpack-plugin": "5.3.1",
    "husky": "4.3.8",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.3",
    "jest-junit": "12.0.0",
    "jest-sonar-reporter": "^2.0.0",
    "json-loader": "0.5.7",
    "lint-staged": "10.5.4",
    "merge-jsons-webpack-plugin": "1.0.21",
    "mini-css-extract-plugin": "1.4.0",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "postcss-loader": "5.2.0",
    "prettier": "2.2.1",
    "prettier-plugin-packagejson": "2.2.10",
    "react-infinite-scroller": "1.2.4",
    "redux-devtools-extension": "^2.13.9",
    "redux-mock-store": "^1.5.4",
    "rimraf": "3.0.2",
    "sass": "^1.32.8",
    "sass-loader": "12.0.0",
    "simple-progress-webpack-plugin": "1.1.2",
    "sinon": "10.0.0",
    "sonarqube-scanner": "^2.8.1",
    "source-map-loader": "2.0.1",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "stripcomment-loader": "0.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "5.1.1",
    "thread-loader": "3.0.1",
    "to-string-loader": "1.1.6",
    "ts-jest": "26.5.4",
    "ts-loader": "8.1.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "4.2.3",
    "wait-on": "5.3.0",
    "webpack": "^5.38.1",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "3.11.2",
    "webpack-merge": "5.7.3",
    "webpack-notifier": "1.13.0",
    "workbox-webpack-plugin": "6.1.2"
  },
  "engines": {
    "node": ">=14.16.0"
  },
  "cacheDirectories": [
    "node_modules"
  ],
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  },
  "jestSonar": {
    "reportPath": "coverage/unit/test-results/jest",
    "reportFile": "TESTS-results-sonar.xml"
  }
}`Bit Workspace.jsonc:    /**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://harmony-docs.bit.dev/workspace/configurations
 **/{
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  /**
   * main configuration of the Bit workspace.
   **/
  "teambit.workspace/workspace": {
    /**
     * the name of the component workspace. used for development purposes.
     **/
    "name": "ris-standard-regio",
    /**
     * set the icon to be shown on the Bit server.
     **/
    "icon": "https://static.bit.dev/bit-logo.svg",
    /**
     * default directory to place a component during `bit import` and `bit create`.
     * the following placeholders are available:
     * name - component name includes namespace, e.g. 'ui/button'.
     * scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
     * scope - scope name only, e.g. 'compilation'.
     * owner - owner name in bit.dev, e.g. 'teambit'.
     **/
    "defaultDirectory": "app/components/{name}",
    /**
     * default scope for all components in workspace.
     **/
    "defaultScope": "rfz.ris-standard-regio"
  },
  /**
   * main configuration for component dependency resolution.
   **/
  "teambit.dependencies/dependency-resolver": {
    "packageManager": "teambit.dependencies/pnpm",
    "policy": {
      "dependencies": {
        "@testing-library/jest-dom": "5.16.4"
      },
      "peerDependencies": {
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-is": "17.0.2",
        "slick-carousel": "^1.8.1"
      }
    },
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "devFilePattenrs": [
      ".spec.ts",
      ".spec.tsx"
    ]
  },
  /**
   * workspace variants allow to set different subsets of configuration for components in your
   * workspace. this is extremely useful for upgrading, aligning and building components with a new
   * set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
   * wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
   * see https://harmony-docs.bit.dev/aspects/variants for more info.
   **/
  "teambit.workspace/variants": {
    /**
     * "*" is a special rule which applied on all components in the workspace.
     **/
    "*": {
      /**
       * uncomment to apply the chosen environment on all components.
       **/
      "teambit.react/react": {
        "mdx": true
      }
    },
    "{generator/*}": {
      "teambit.harmony/aspect": {}
    }
  },
  "teambit.generator/generator": {
    "aspects": [
      "rfz.ris-standard-regio/generator/component-templates"
    ]
  },
  "rfz.ris-standard-regio/generator/component-templates": {}
}`### Expected BehaviorRun the bit ui server with preview of components.

Screenshots, exceptions and logs

image

Specifications

Thank you very much for any help or suggestions!

dminkovski commented 2 years ago

Solved by downgrading to bit 0.0.619