Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' #9746

HeleneBigSofa · 2019-03-22T10:53:51Z

Bug Report

Current Behavior
I created an app within a monorepo (Lerna) using yarn workspace and create-react-app ("react-scripts": "2.0.0-next.3e165448").

The architecture of the app is as follow:

node_modules
- @babel
- core
- runtime
- etc..
- other modules...
package1 (shared components)
- src
- package.json
package2 (the app consuming the shared components)
- src
- package.json
package.json

Input Code
Calling
import _extends from '@babel/runtime/helpers/esm/extends';
from package2/index.js (or in any dependencies of package1) results in this error:
Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'

Calling any other modules available under /node_modules works fine, even from @babel/core for instance:
import _default from '@babel/core/lib/tools/build-external-helpers';
works correctly.

Please note, if I replace @babel/runtime/... with the absolute path it would work.

Expected behavior/code
Need to be able to call @babel/runtime/...

Babel Configuration (.babelrc, package.json, cli command)
In the package.json root:

"babel": {
    "presets": [
      [
        "@babel/preset-env"
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  },

Environment

Babel version(s): @babel/runtime 7.4.2, @babel/core 7.4.0
Node/npm version: Node v10.15.2
OS: OS High Sierra 10.13.6
Monorepo: yes, Lerna

The text was updated successfully, but these errors were encountered:

babel-bot · 2019-03-22T10:53:54Z

Hey @HeleneBigSofa! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

nicolo-ribaudo · 2019-03-22T11:03:56Z

Can you post all your package.jsons?

HeleneBigSofa · 2019-03-22T11:12:01Z

Thank you Nicolo to take the time to look at this.

The package.jsons:
In the root

{
  "name": "monorepo",
  "private": true,
  "workspaces": {
    "packages": [
      "package1/",
      "package2/",
      "package2/src/**"
    ],
    "nohoist": [
      "**/eslint",
      "react-scripts",
      "react-scripts/**",
      "**/jest/**"
    ]
  },
  "jest": {
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/spa/"
    ],
    "projects": [
      "<rootDir>/playbook/*"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "apollo-boost": "^0.1.16",
    "graphql": "^14.0.2",
    "react-apollo": "^2.2.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
     "@babel/runtime": "^7.4.2",
     "@babel/plugin-transform-runtime": "^7.4.0",
    "babel-eslint": "9",
    "eslint": "^4.17.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.6.1",
    "husky": "^1.0.0-rc.13",
    "lerna": "^3.4.3",
    "lint-staged": "^7.2.2",
    "prettier": "^1.14.2",
    "prettier-eslint": "^8.8.1",
    "prettier-eslint-cli": "^4.7.0"
  },
  "lint-staged": {
    "./**/*.{js,jsx}": [
      "yarn eslint",
      "git add"
    ]
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env"
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  },
}

In package1:

{
  "name": "package2",
  "version": "1.0.30",
  "private": true,
  "dependencies": {
    "@date-io/moment": "^1.0.2",
    "@material-ui/core": "^3.3.1",
    "@material-ui/icons": "^3.0.1",
    "@material-ui/lab": "^3.0.0-alpha.25",
    "@storybook/react": "^3.4.8",
    "apollo-storybook-react": "^0.1.8",
    "autosuggest-highlight": "3.1.1",
    "axios": "^0.18.0",
    "date-fns": "2.0.0-alpha.27",
    "faker": "^4.1.0",
    "graphql": "^14.0.2",
    "graphql-iso-date": "^3.6.1",
    "graphql-tag": "^2.9.2",
    "graphql-tools": "^3.1.1",
    "jest-dom": "^1.12.0",
    "jest-styled-components": "^6.3.1",
    "lodash.defaults": "^4.2.0",
    "lodash.isequal": "^4.5.0",
    "material-ui": "^0.20.2",
    "material-ui-chip-input": "^1.0.0-beta.14",
    "material-ui-pickers": "^2.2.1",
    "material-ui-slider": "^3.0.0",
    "moment": "^2.24.0",
    "react": "^16.4.1",
    "react-adopt": "^0.6.0",
    "react-autosuggest": "^9.4.3",
    "react-dom": "^16.4.1",
    "react-dropzone": "^5.1.0",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.0.0-next.3e165448",
    "react-testing-library": "^5.0.0",
    "storybook": "^1.0.0",
    "storybook-addon-material-ui": "^0.9.0-alpha.16",
    "storybook-react-router": "^1.0.1",
    "storybook-readme": "4.0.0-beta1",
    "styled-components": "^3.4.5",
    "video.js": "^7.3.0"
  },
  "devDependencies": {
    "@sambego/storybook-state": "^1.3.1",
    "@storybook/addon-a11y": "^3.4.10",
    "@storybook/addon-actions": "^3.4.11",
    "@storybook/addon-info": "^3.4.10",
    "@storybook/addon-jest": "^3.4.10",
    "@storybook/addon-knobs": "^3.4.10",
    "@storybook/addon-links": "^3.4.11",
    "@welldone-software/why-did-you-render": "^2.5.0",
    "apollo-storybook-react": "^0.1.8",
    "axios-mock-adapter": "^1.16.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!/node_modules/",
      "!src/index.js",
      "!src/registerServiceWorker.js",
      "!src/**/stories.{js,jsx}",
      "!src/api/**/*.{js,jsx}"
    ]
  }
}

In package2:

{
  "name": "spa",
  "version": "1.0.30",
  "private": true,
  "dependencies": {
    "apollo-boost": "^0.1.12",
    "graphql": "^0.13.2",
    "react": "^16.4.1",
    "react-apollo": "^2.1.9",
    "react-dom": "^16.4.1",
    "react-scripts": "2.0.0-next.3e165448",
    "source-map-explorer": "^1.6.0"
  },
  "scripts": {
    "start": "PORT=3003 react-scripts start",
    "analyze": "source-map-explorer build/static/js/vendors.*",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],
    "production": [
      ">0.25%",
      "not op_mini all",
      "ie 11"
    ]
  },
  "devDependencies": {
    "cypress": "^3.1.5",
  }
}

nicolo-ribaudo · 2019-03-22T11:28:33Z

I think that the problem is that lerna assumes that you aren't using @babel/runtime in package2, because you didn't specify it in its dependencies. For this reason, if any dependency of package2 depends on @babel/runtime, lerna thinks that it can safely hoist that dependency's @babel/runtime to package2/node_modules. If this hoisted version is an old version without the extends helper, it will throw.

I would try adding @babel/runtime to paackage2 (and package1, if needed): even when using a monorepo, every runtime dependency should be listed.

Your package.json also has two other problems:

@babel/runtime is used at runtime (not at build time) so it should be in dependencies, not devDependencies
(maybe this is intentional) The Babel config defined in the root package won't be applied to package1/2. If you want it to be, you should use babel.config.js instead: https://babeljs.io/docs/en/config-files

HeleneBigSofa · 2019-03-22T11:40:53Z

Thank you for your reply and solutions Nicolo, well appreciated.
I already tried to install @babel/runtime as a direct dependency of package2, but let me try again, I might have missed something. I also applied a "nohoist" of @babel/runtime in the root package.json but it did not change the issue unfortunately. I'll try point 1 and 2 and come back to you.

nicolo-ribaudo · 2019-03-22T11:43:54Z

Point 1 and 2 are just "details", I don't think that they will solve your problem.
What version does package2/node_modules/@babel/runtime/package.json say?

HeleneBigSofa · 2019-03-22T11:49:42Z

it says: "version": "7.4.2"

nicolo-ribaudo · 2019-03-22T12:02:59Z

And doesn't helpers/esm/extends.js exist inside that package?

HeleneBigSofa · 2019-03-22T12:07:29Z

Yes it is definitely there. And if I import it with:

import _extends from '../node_modules/@babel/runtime/helpers/esm/extends';

it's found.

I can import this with no problem for example:
import _default from '@babel/core/lib/tools/build-external-helpers';

HeleneBigSofa · 2019-03-22T14:39:04Z

I set up a repo that reproduce the error: https://github.com/htmlene/monorepo

When I first raised the issue, I gave a simplistic example by calling directly @babel/runtime in the package2. The monorepo example is closer to the reality as @babel/runtime is required by a dependency "react-router" (+history/react-router-dom) - I hope it makes sense, let me know if you have any questions.

nicolo-ribaudo · 2019-03-22T14:47:01Z

I will check it later today

HeleneBigSofa · 2019-03-22T14:53:30Z

Thank you Nicolo, it's very kind of you

nicolo-ribaudo · 2019-03-23T00:33:29Z

I think that this might be a bug with react-scripts (or with the bundler it internally use; I don't know which it is). The Babel package is definetly there (if you go in monorepo/node_modules/history/esm, open a node shell and run require.resolve("@babel/runtime/helpers/esm/extends") it clearly show that that module can be resolved).
I also tried to disable yarn workspaces and use the lerna implementation of workspaces, but it didn't help.

HeleneBigSofa · 2019-03-25T10:43:58Z

Thank you Nicolo. Do you think reverting to the previous version of @babel we were on would solve the issue?

nicolo-ribaudo · 2019-03-25T10:47:53Z

I'm don't think so, but it might be worth trying

HeleneBigSofa · 2019-03-25T15:58:27Z

We have finally managed to solve our issue, using react-app-rewired, customize-cra and a custom config.
Thank your for your help Nicolo!

yanyu0517 · 2019-03-30T02:00:44Z

We have met the same problem. Was there news about this ?

nelhu · 2019-04-26T07:05:26Z

I have the same problem and did not resolve yet

fgiarritiello · 2019-05-20T18:11:44Z

@HeleneBigSofa Do you mind sharing the solution? Thanks

HeleneBigSofa · 2019-05-21T13:09:51Z

We just upgraded react-script to version 2.1.8

fgiarritiello · 2019-05-21T14:46:24Z

@HeleneBigSofa thank you. Sorry but I have a different question then: how did you manage to get the monorepo to work if react-script dropped its support after the version you were using?

ivan-kleshnin · 2019-06-06T13:29:27Z

Same problem with MDX + Next. Tried a few recommended workaround – nothing helps.

crubier · 2019-07-05T20:00:29Z

Same problem when building a relatively simple package with rollup... No solution works so far..

connorpwilliams · 2019-07-11T17:14:57Z

Module not found for @babel/runtime/helpers/esm/objectSpread using react-scripts 3.0.1

I assume this is the same root issue and no fix has worked thus far either.

EDIT: Rolling react scripts back to an earlier version (2.1.4 which was what I use in another project) solved the issue for me

nicolo-ribaudo · 2019-07-11T18:02:41Z

Is the @babel/runtime/helpers/esm/objectSpread file there? If it is, please report this bug to the bundler react-scripts uses.

gilbertlucas46 · 2019-07-19T09:56:16Z

I fixed mine by

Delete package-lock.json
Delete node-modules
npm install

HeleneBigSofa added i: bug i: needs triage labels Mar 22, 2019

nicolo-ribaudo self-assigned this Mar 22, 2019

danez removed the i: needs triage label Mar 22, 2019

nicolo-ribaudo added i: invalid and removed i: bug labels Mar 23, 2019

HeleneBigSofa closed this as completed Mar 25, 2019

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 18, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' #9746

Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' #9746

HeleneBigSofa commented Mar 22, 2019 •

edited

babel-bot commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019 •

edited

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019 •

edited

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 23, 2019

HeleneBigSofa commented Mar 25, 2019

nicolo-ribaudo commented Mar 25, 2019

HeleneBigSofa commented Mar 25, 2019

yanyu0517 commented Mar 30, 2019

nelhu commented Apr 26, 2019

fgiarritiello commented May 20, 2019

HeleneBigSofa commented May 21, 2019

fgiarritiello commented May 21, 2019

ivan-kleshnin commented Jun 6, 2019

crubier commented Jul 5, 2019

connorpwilliams commented Jul 11, 2019 •

edited

nicolo-ribaudo commented Jul 11, 2019 •

edited

gilbertlucas46 commented Jul 19, 2019

Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' #9746

Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' #9746

Comments

HeleneBigSofa commented Mar 22, 2019 • edited

Bug Report

babel-bot commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019 • edited

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019 • edited

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 22, 2019

HeleneBigSofa commented Mar 22, 2019

nicolo-ribaudo commented Mar 23, 2019

HeleneBigSofa commented Mar 25, 2019

nicolo-ribaudo commented Mar 25, 2019

HeleneBigSofa commented Mar 25, 2019

yanyu0517 commented Mar 30, 2019

nelhu commented Apr 26, 2019

fgiarritiello commented May 20, 2019

HeleneBigSofa commented May 21, 2019

fgiarritiello commented May 21, 2019

ivan-kleshnin commented Jun 6, 2019

crubier commented Jul 5, 2019

connorpwilliams commented Jul 11, 2019 • edited

nicolo-ribaudo commented Jul 11, 2019 • edited

gilbertlucas46 commented Jul 19, 2019

HeleneBigSofa commented Mar 22, 2019 •

edited

HeleneBigSofa commented Mar 22, 2019 •

edited

HeleneBigSofa commented Mar 22, 2019 •

edited

connorpwilliams commented Jul 11, 2019 •

edited

nicolo-ribaudo commented Jul 11, 2019 •

edited