Parcel: cannot resolve dependency

[MareoRaft]

🐛 bug report

Parcel cannot build.

🎛 Configuration (.babelrc, package.json, cli command)

command

npm run build

.babelrc:

{
    "presets": [
        "react-app"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

package.json

{
  "name": "h",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "main": "src/index.js",
  "scripts": {
    "build": "parcel build ./src/index.js --no-minify --no-cache",
    "test": "node scripts/test.js",
    "docs": "jsdoc ./src/*.js ./src/**/*.js -d ../docs",
    "lint": "sh scripts/lint.sh",
    "eslint": "sh scripts/eslint.sh ./src"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie < 11",
    "not op_mini all"
  ],
  "dependencies": {
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@opuscapita/react-alerts": "^3.0.5",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "downshift": "^3.2.10",
    "formik": "^1.5.2",
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-i18next": "^10.6.1",
    "react-identicons": "^1.1.7",
    "react-redux": "^6.0.1",
    "react-table": "^6.10.0",
    "react-widgets": "^4.4.10",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "redux-freeze": "^0.1.7",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "set-extensions": "^1.4.0",
    "src": "^1.1.2",
    "typescript": "^3.4.1",
    "universal-cookie": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-spread": "^7.2.2",
    "babel-preset-react-app": "^9.0.0",
    "bfj": "6.1.1",
    "css-loader": "1.0.0",
    "cssnano": "^4.1.10",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.12.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-config-react-app": "^3.0.8",
    "eslint-loader": "2.1.1",
    "eslint-plugin-angular": "^4.0.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.12.4",
    "file-loader": "2.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.2",
    "jest-resolve": "23.6.0",
    "jest-watch-typeahead": "^0.2.1",
    "jsdoc": "^3.6.2",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "0.5.0",
    "node-sass": "^4.12.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.5.0",
    "postcss-safe-parser": "4.0.1",
    "react-app-polyfill": "^0.2.2",
    "react-dev-utils": "^8.0.0",
    "react-router-dom": "^5.0.0",
    "redux-freeze": "^0.1.7",
    "redux-logger": "^3.0.6",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "url-loader": "1.1.2"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "/Users/Matthew/programming/AR/client/node_modules/jest-watch-typeahead/filename.js",
      "/Users/Matthew/programming/AR/client/node_modules/jest-watch-typeahead/testname.js"
    ]
  }
}

🤔 Expected Behavior

Build the React component(s)

😯 Current Behavior

🚨  /Users/Matthew/programming/test-parcel-react/test-parcel-commons/src/components/Button/Button.js: Cannot resolve dependency '/Users/Matthew/programming/test-parcel-react/test-parcel-commons/node_modul
es/@babel/runtime/helpers/esm/objectSpread' at '/Users/Matthew/programming/test-parcel-react/test-parcel-commons/node_modules/@babel/runtime/helpers/esm/objectSpread'
    at Resolver.resolve (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Resolver.js:71:17)
    at async Bundler.resolveAsset (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:433:18)
    at async Bundler.resolveDep (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:484:14)
    at async /Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:608:26
    at async Promise.all (index 2)
    at async Bundler.loadAsset (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:599:21)
    at async /Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:610:13
    at async Promise.all (index 2)
    at async Bundler.loadAsset (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:599:21)
    at async Bundler.processAsset (/Users/Matthew/.nvm/versions/node/v12.4.0/lib/node_modules/parcel/src/Bundler.js:557:5)

💁 Possible Solution

Babel not working correctly?

🔦 Context

I'm trying to build a React component. The component will be shipped as an npm package that other React projects can import.

💻 Code Sample

index.js:

import Button from './components/Button/Button.js';

module.exports = {
    Button,
};

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.3
| Node | v12.4.0
| npm | 6.9.0
| Operating System | macOS 10.14.1

[DeMoorJasper]

Looks to me like a bug in Babel, might also be a bug inside Parcel's usage of babel not sure. But it's a pretty clear error, this file doesn't exist and should exist: /Users/Matthew/programming/test-parcel-react/test-parcel-commons/node_modul es/@babel/runtime/helpers/esm/objectSpread

[frankdugan3]

@DeMoorJasper I have the same problem with a Vue project. I checked, and the objectSpread file definitely does exist at the path it's naming, so I don't think that's the problem.

[mischnic]

Could someone provide a more complete reproduction (that doesn't import some other files as above)?

[jnv]

Hi, I am running into very similar bug when I try to use object spread with babel-preset-react-app. I have created a repository with reproduction of the issue: https://github.com/jnv/parcel-spread-bug

The project has only babel-preset-react-app enabled in .babelrc. When I run npx parcel index.js I get the following error:

.../parcel-spread-bug/index.js:
Cannot resolve dependency '.../parcel-spread-bug/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty'
at '.../parcel-spread-bug/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty'

And just to be sure, the file does actually exist. As a workaround, I have removed react-app preset and all seems to work fine (but my project is rather very trivial).

[cdll]

same issue here with multi pug pages entries MPA;

[dantman]

Same issue. I thought switching from Create React App to Parcel would be a good idea. But encountered this bug immediately when I actually tried it and aren't sure I can trust Parcel.

{...}/src/components/ui/SectionTitle.js: Cannot resolve dependency '{...}/node_modules/@babel/runtime/helpers/esm/extends' at '{...}/node_modules/@babel/runtime/helpers/esm/extends'

Tried adding @babel/runtime to package.json and reinstalling with npm instead of yarn. No help.

[PetrBrabec]

I am gonna have to switch from Parcel because of this too now. I hope this will get fixed soon as I want Parcel to be supported in my projects. It's good for starting up new project, but you have to switch to something more efficient later anyways.

[frank-weindel]

For what its worth @jnv's example works fine on Windows. However, I do get the error on MacOS. I'm also noticing this issue on MacOS with my own project that builds just fine on Windows. I'm trying to find a workaround but to no avail so far.

[frank-weindel]

I was able to make a change to the parcel source to fix the problem though I'm not sure of what side affects there may be. Apparently parcel assumes any required package name that has an absolute path should be resolved against the root of the project:
https://github.com/parcel-bundler/parcel/blob/v2/packages/core/parcel-bundler/src/Resolver.js#L127

Apparently these babel packages are being required with an actual absolute path.

For instance for my example, the package requested is:

/Users/travis/build/frank/project-x/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator

But Parcel, at that line strings it on top of my project root. So the actual package it tries to look for is:

/Users/travis/build/frank/project-x/src/Users/travis/build/frank/project-x/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator

Which definitely does not exist! So removing that path.resolve() and just taking absolute paths at face value allowed my build to complete. However, there may be projects that rely on that functionality. Next step is to look for why absolute paths to babel packages are being used in the first place.

[frank-weindel]

✅ Solution/Workaround ✅

I found this StackOverflow answer. For some reason the "react-app" babel preset uses absolute paths in its require statements by default. This causes the issue you see here in Parcel. You can turn this off by setting the following in your Babel config:

   "presets": [
      ["react-app", { "absoluteRuntime": false }]
   ],

Please let me know if this fixes things for others.

---

My guess is the reason it's working on windows is because windows absolute path's do not start with a /, they start with something like C:\. If true, this effectively means that Windows users are allowed to reference node modules with absolute paths, but *nix/Mac users cannot due to the way Parcel is trying to override things. I don't think this is a great pattern in my opinion.