nrwl / nx

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

Babel rootMode:"upward" issue #3184

Closed alfonsobravi closed 4 years ago

alfonsobravi commented 4 years ago

I've recently attempted an upgrade of a decently sized monorepo I've successfully managed with Nx so far. I followed the usual procedure in going from 9.2.3 to latest, and no apparent issues or warnings came up along the process.

Current Behavior

When I try to start or build any of the apps that are in the repo (or a newly created one, for what is worth) I always get the same issue:

ERROR in ./main.tsx
Module build failed (from /Users/alf/monorepopath/node_modules/babel-loader/lib/index.js):
Error: Babel was run with rootMode:"upward" but a root could not be found when searching upward from "/Users/alf/monorepopath/apps/testapp/src"

And I get a reference to the same error in relation to ./polyfills.ts as well.

NOTE: Jest tests are running fine, Storybook instances for all libs in the same repo are building just fine too.

Expected Behavior

The app to run and build properly as it does on the same machine if I create a Nx Workspace from scratch.

Steps to Reproduce

Not sure how to reproduce, since it seems related to my existing setup. I am not entirely sure that qualifies as a "bug", but I am posting here to see if anyone has similar issues or one of the Nx gurus can point me in the right direction for a fix...

Here's what I've tried so far:

Environment

MacOS 10.15.5 with Node 12.17.0

  @nrwl/angular : Not Found
  @nrwl/cli : 9.4.2
  @nrwl/cypress : 9.4.2
  @nrwl/eslint-plugin-nx : 9.4.2
  @nrwl/express : Not Found
  @nrwl/jest : 9.4.2
  @nrwl/linter : 9.4.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 9.4.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.4.2
  @nrwl/web : 9.4.2
  @nrwl/workspace : 9.4.2
  typescript : 3.9.5
paustint commented 4 years ago

I ran into the same issue momentarily but it seemed to resolve itself (for now). I ran the upgrade and pushed, then switched to a different branch and saw the error, but it resolved on restart. I can also confirm my builds are successful.

I am just adding this comment in case it provides any additional information for anyone investigating it, since I do not have the issue anymore.

I DO have a babel.config.json in the root, which was created during the migration process after I ran nx migrate --run-migrations=migrations.json as instructed in the migration instructions, with the following content:

{
  "presets": ["@nrwl/web/babel"],
  "babelrcRoots": ["*"]
}
node: v12.16.3

  @nrwl/angular : Not Found
  @nrwl/cli : 9.4.2
  @nrwl/cypress : 9.4.2
  @nrwl/eslint-plugin-nx : 9.4.2
  @nrwl/express : 9.4.2
  @nrwl/jest : 9.4.2
  @nrwl/linter : 9.4.2
  @nrwl/nest : Not Found
  @nrwl/next : 9.4.2
  @nrwl/node : 9.4.2
  @nrwl/react : 9.4.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.4.2
  @nrwl/web : 9.4.2
  @nrwl/workspace : 9.4.2
  typescript : 3.8.3
ERROR in ./main.tsx
Module build failed (from /Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js):
Error: Babel was run with rootMode:"upward" but a root could not be found when searching upward from "/Users/foo/dev/node/my-app/apps/my-app/src".
One of the following config files must be in the directory tree: "babel.config.js, babel.config.cjs, babel.config.mjs, babel.config.json".
    at resolveRootMode (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:60:29)
    at resolveRootMode.next (<anonymous>)
    at loadPrivatePartialConfig (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:87:34)
    at loadPrivatePartialConfig.next (<anonymous>)
    at Function.<anonymous> (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:120:25)
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/foo/dev/node/my-app/node_modules/gensync/index.js:244:28)
    at Function.sync (/Users/foo/dev/node/my-app/node_modules/gensync/index.js:84:14)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/index.js:41:61)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:144:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:97)

ERROR in ./polyfills.ts
Module build failed (from /Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js):
Error: Babel was run with rootMode:"upward" but a root could not be found when searching upward from "/Users/foo/dev/node/my-app/apps/my-app/src".
One of the following config files must be in the directory tree: "babel.config.js, babel.config.cjs, babel.config.mjs, babel.config.json".
    at resolveRootMode (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:60:29)
    at resolveRootMode.next (<anonymous>)
    at loadPrivatePartialConfig (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:87:34)
    at loadPrivatePartialConfig.next (<anonymous>)
    at Function.<anonymous> (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/partial.js:120:25)
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/foo/dev/node/my-app/node_modules/gensync/index.js:244:28)
    at Function.sync (/Users/foo/dev/node/my-app/node_modules/gensync/index.js:84:14)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/@babel/core/lib/config/index.js:41:61)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:144:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/foo/dev/node/my-app/node_modules/babel-loader/lib/index.js:5:97)
ℹ 「wdm」: Failed to compile.
alfonsobravi commented 4 years ago

Thanks for the feedback @paustint I also had the babel.config.json appearing in the root folder after running the migration. Unfortunately the issue doesn't seem to go away for me, regardless of the branch I'm on, the bash I'm on, yarn or npm, or the computer I'm on 😩

jaysoo commented 4 years ago

@alfonsobravi Can you provide a repo that has this problem?

Also try clearing out the babel loader cache rm -rf ./node_modules/.cache/babel-loader and see if that helps.

alfonsobravi commented 4 years ago

@jaysoo thanks for your suggestion, but I've tried that already with no success. Also, I cannot really share the whole repo for "commercial" reasons. My employer wouldn't appreciate :) What I'm happy to share though, is the process I went through to fix it, hoping it will offer some food for thoughts about identifying the root cause.

Here's what I've done

It's definitely something to do with my dev-dependencies.

It took me a few hours to go through the whole process, given the size of the repo and my willingness to make sure every bits and pieces were working as expected. What scares me the most is the fact my "broken" devDependencies were pretty much the result of previous installation and upgrades of Nx... It feels to me the whole ecosystem suddenly becomes a little too frail without any tools to help identify what's "not compatible" anymore.

Reference package.json

Here are the three devDependencies versions for reference

Original (failing to start and build)

        "@angular/forms": "9.1.3",
        "@babel/core": "7.5.4",
        "@babel/plugin-transform-runtime": "^7.7.6",
        "@babel/preset-env": "7.9.6",
        "@babel/preset-react": "7.7.4",
        "@babel/preset-typescript": "^7.8.3",
        "@nrwl/cypress": "9.4.2",
        "@nrwl/eslint-plugin-nx": "9.4.2",
        "@nrwl/jest": "9.4.2",
        "@nrwl/react": "9.4.2",
        "@nrwl/storybook": "9.4.2",
        "@nrwl/tao": "9.4.2",
        "@nrwl/web": "9.4.2",
        "@nrwl/workspace": "9.4.2",
        "@storybook/addon-actions": "5.3.5",
        "@storybook/addon-docs": "5.3.5",
        "@storybook/addon-knobs": "5.3.9",
        "@storybook/addon-storysource": "5.3.5",
        "@storybook/addon-viewport": "5.3.5",
        "@storybook/angular": "5.3.9",
        "@storybook/react": "5.3.9",
        "@testing-library/react": "10.0.4",
        "@types/jest": "25.1.4",
        "@types/node": "^12.12.31",
        "@types/react": "16.9.35",
        "@types/react-dom": "16.9.8",
        "@types/react-redux": "7.1.9",
        "@types/react-router-dom": "5.1.5",
        "@types/yup": "^0.26.24",
        "@typescript-eslint/eslint-plugin": "2.3.2",
        "@typescript-eslint/parser": "2.3.2",
        "babel-jest": "25.1.0",
        "babel-loader": "8.0.6",
        "bcryptjs": "^2.4.3",
        "chance": "^1.1.3",
        "cypress": "3.8.2",
        "document-register-element": "1.13.1",
        "dotenv": "6.2.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "6.8.0",
        "eslint-config-prettier": "6.0.0",
        "eslint-plugin-cypress": "^2.10.3",
        "eslint-plugin-import": "2.20.2",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-prettier": "^3.1.2",
        "eslint-plugin-react": "7.20.0",
        "eslint-plugin-react-hooks": "4.0.2",
        "jest": "25.2.4",
        "jest-junit": "^10.0.0",
        "jest-localstorage-mock": "^2.4.0",
        "json-server": "^0.15.1",
        "json-server-auth": "^1.2.1",
        "prettier": "2.0.4",
        "punycode": "1.4.1",
        "react-docgen-typescript": "^1.16.2",
        "react-docgen-typescript-loader": "^3.6.0",
        "redux-saga-testing": "^2.0.0",
        "rimraf": "^3.0.0",
        "ts-jest": "25.2.1",
        "ts-node": "~7.0.0",
        "tslint": "6.0.0",
        "typedoc": "^0.15.5",
        "typeface-inter": "^3.10.0",
        "typescript": "3.8.3"

The 'fresh' one

    "@nrwl/workspace": "9.4.2",
    "@types/node": "~8.9.4",
    "dotenv": "6.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.0.0",
    "eslint": "6.8.0",
    "typescript": "~3.8.3",
    "prettier": "2.0.4",
    "@nrwl/react": "9.4.2",
    "@nrwl/jest": "9.4.2",
    "jest": "25.2.3",
    "@types/jest": "25.1.4",
    "ts-jest": "25.2.1",
    "cypress": "^4.1.0",
    "@nrwl/cypress": "9.4.2",
    "@nrwl/web": "9.4.2",
    "@types/react": "16.9.35",
    "@types/react-dom": "16.9.8",
    "@testing-library/react": "10.0.4",
    "@nrwl/eslint-plugin-nx": "9.4.2",
    "@typescript-eslint/parser": "2.19.2",
    "@typescript-eslint/eslint-plugin": "2.19.2",
    "eslint-config-prettier": "6.0.0",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.20.0",
    "eslint-plugin-react-hooks": "4.0.2",
    "eslint-plugin-cypress": "^2.10.3",
    "@babel/core": "7.9.6",
    "@babel/preset-env": "7.9.6",
    "@babel/preset-typescript": "7.9.0",
    "@babel/preset-react": "7.9.4",
    "babel-jest": "25.1.0"

The final and working one

        "@babel/core": "7.9.6",
        "@babel/preset-env": "7.9.6",
        "@babel/preset-react": "7.9.4",
        "@babel/preset-typescript": "7.9.0",
        "@nrwl/cypress": "9.4.2",
        "@nrwl/eslint-plugin-nx": "9.4.2",
        "@nrwl/jest": "9.4.2",
        "@nrwl/react": "9.4.2",
        "@nrwl/web": "9.4.2",
        "@nrwl/workspace": "9.4.2",
        "@nrwl/storybook": "^9.4.3",
        "@storybook/addon-actions": "^5.3.19",
        "@storybook/addon-docs": "^5.3.19",
        "@storybook/addon-knobs": "^5.3.19",
        "@storybook/addon-storysource": "^5.3.19",
        "@storybook/addon-viewport": "^5.3.19",
        "@storybook/react": "^5.3.19",
        "@testing-library/react": "10.0.4",
        "@types/jest": "25.1.4",
        "@types/node": "~8.9.4",
        "@types/react": "16.9.35",
        "@types/react-adal": "^0.4.2",
        "@types/react-dom": "16.9.8",
        "@types/react-redux": "^7.1.9",
        "@types/react-router-dom": "^5.1.5",
        "@types/yup": "^0.29.3",
        "@typescript-eslint/eslint-plugin": "2.19.2",
        "@typescript-eslint/parser": "2.19.2",
        "babel-jest": "25.1.0",
        "bcryptjs": "^2.4.3",
        "chance": "^1.1.6",
        "cypress": "^4.1.0",
        "dotenv": "6.2.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "6.8.0",
        "eslint-config-prettier": "6.0.0",
        "eslint-plugin-cypress": "^2.10.3",
        "eslint-plugin-import": "2.20.2",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-react": "7.20.0",
        "eslint-plugin-react-hooks": "4.0.2",
        "jest": "25.2.3",
        "jest-junit": "^10.0.0",
        "jest-localstorage-mock": "^2.4.2",
        "json-server": "^0.16.1",
        "json-server-auth": "^2.0.2",
        "prettier": "2.0.4",
        "redux-saga-testing": "^2.0.1",
        "ts-jest": "25.2.1",
        "ts-node": "~7.0.0",
        "tslint": "~6.0.0",
        "typedoc": "^0.17.7",
        "typescript": "~3.8.3"
rjaguilar commented 4 years ago

Having the same issue

allforabit commented 4 years ago

I'm having the same issue as well. Here's the error output I'm getting:

ERROR in ./polyfills.ts
Module build failed (from node_modules/babel-loader/lib/index.js):
Error: Babel was run with rootMode:"upward" but a root could not be found when searching upward from "apps\app\src"
    at resolveRootMode (node_modules\@babel\core\lib\config\partial.js:50:29)
    at loadPrivatePartialConfig (node_modules\@babel\core\lib\config\partial.js:77:27)
    at Object.loadPartialConfig (node_modules\@babel\core\lib\config\partial.js:110:18)
vaunus commented 4 years ago

Same issue here. For me I tracked the problem down to @nrwl/web. Version 9.5.0 works ok but as soon as I upgrade to version 9.5.1 I get this build error. Everything else in my package.json is up to date.

Fails to build:

...
"@nrwl/cypress": "9.5.1",
"@nrwl/eslint-plugin-nx": "9.5.1",
"@nrwl/jest": "9.5.1",
"@nrwl/react": "9.5.1",
"@nrwl/storybook": "9.5.1",
"@nrwl/web": "9.5.1",
"@nrwl/workspace": "9.5.1",
...

Works ok:

...
"@nrwl/cypress": "9.5.1",
"@nrwl/eslint-plugin-nx": "9.5.1",
"@nrwl/jest": "9.5.1",
"@nrwl/react": "9.5.1",
"@nrwl/storybook": "9.5.1",
"@nrwl/web": "9.5.0",
"@nrwl/workspace": "9.5.1",
...
jaysoo commented 4 years ago

@alfonsobravi it looks like some of the babel versions are mismatched. At this point you wouldn't need to install babel presets like env, react, typescript, since the Nx presets have them as dependencies.

Can folks try removing @babel/* packages from their dependencies and see if that helps? If you have any custom plugins that you're relying on you can still keep them.

kraiz commented 4 years ago

Same issue, upgraded from 8.2 to 10.0. There was no babel.config.json created via migration. Did not find a migration that actually did it. Created it by hand (like @paustint's one), works fine now.

{
  "presets": ["@nrwl/web/babel"],
  "babelrcRoots": ["*"]
}
jaysoo commented 4 years ago

Strange, it should be part of this migration in 9.4.

https://github.com/nrwl/nx/blob/master/packages/react/src/migrations/update-9-4-0/babelrc-9-4-0.ts#L20

I've tried reproducing this problem in a test repo (migrating from 8 to 10), and it worked for me. https://github.com/jaysoo/nx-8-to-10

For anyone else for are running into babel issues, please check that babel.config.json exists, and check that you don't have outdated babel plugins in your package.json -- e.g. @babel/preset-env, @babel/preset-react.

jaysoo commented 4 years ago

Going to close this issue since I'm unable to reproduce, but feel free to re-open if you have a repo I can take a look at.

bradfrosty commented 3 years ago

I ran into this issue when I had a .babelrc at the root instead of babel.config.json. Switching to babel.config.json solved the problem for me.

yeomann commented 3 years ago

I created a fresh project to test with react and immediately after that try to upgrade nx, which failed miserably so couldn't do it.

Only way i am able to get rid of require error or other eslint related errors was first by installing workspace npx create-nx-workspace@latest chose empty project and later install the react.

lsimrsi commented 3 years ago

@jaysoo What constitutes an outdated babel plugin? Here is what I have. Should I remove all of them?


    "@babel/core": "7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "babel-jest": "^27.0.6",
    "babel-loader": "8.2.2",
    "babel-plugin-import": "^1.13.3",
simondotm commented 1 year ago

On Nx 14.8.6 here, have run all updates & migrations from 13.10.6. Trying out @nrwl/web:rollup and hit this problem. Did NOT have a babel.config.json in the root, and adding one as @kraiz suggested above fixed it.

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.