Parcel: Parcel is changing my package.json from React >= 16.0.0 to >= 15.0.0

Created on 28 Jun 2018 · 8Comments · Source: parcel-bundler/parcel

🐛 bug report

when I start parcel, it does a "resolving packages" step, which changes my package.json dependencies.... and I need to manually change them back. I'm not happy with this behavior. Especially, because I want to stick with React 16...

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

package.json

{
  "name": "app-builder-portal-frontend",
  "version": "1.0.0",
  "license": "MIT",
  "main": "src/index.html",
  "scripts": {
    "parcel": "./node_modules/.bin/parcel --no-autoinstall",
    "ts-node": "./node_modules/.bin/ts-node",
    "karma": "./node_modules/.bin/karma",
    "tslint": "./node_modules/.bin/tslint -c ./tslint.json",
    "build": "yarn parcel build src/index.html && cp ./public/* dist/",
    "start:no-proxy": "yarn parcel src/index.html --hmr-port $HMR_PORT -p $PORT",
    "start:dev": "yarn ts-node src/devproxyserver.ts",
    "start:dev:on-host": "PORT=9091 API_HOST=http://localhost:7081 yarn start:dev",
    "webpack:build": "./node_modules/.bin/webpack-cli --config tests/webpack.config.js",
    "karma:start": "yarn karma start ./tests/karma.conf.js --fail-on-empty-test-suite",
    "test:watch": "yarn karma:start",
    "test:watch:headless": "CI=true yarn karma:start",
    "test:ci": "CI=true yarn karma:start --single-run",
    "lint": "yarn tslint 'src/**/*.ts'",
    "lint:fix": "yarn lint --fix",
    "tslint-check": "./node_modules/.bin/tslint-config-prettier-check ./tslint.json"
  },
  "dependencies": {
    "@orbit/coordinator": "^0.15.14",
    "@orbit/indexeddb": "^0.15.14",
    "@orbit/jsonapi": "^0.15.15",
    "@orbit/store": "^0.15.14",
    "auth0-js": "^9.6.1",
    "auth0-lock": "^11.7.2",
    "jwt-decode": "^2.2.0",
    "react": ">=15.0.0",
    "react-data-grid": "^4.0.7",
    "react-data-grid-addons": "^4.0.8",
    "react-dom": ">=15.0.0",
    "react-notify-toast": "^0.5.0",
    "react-orbitjs": "^0.1.6",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-toastify": "^4.1.0",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0",
    "reflux": "^6.4.1",
    "sass-loader": "^7.0.3",
    "semantic-ui-css": "^2.3.2",
    "semantic-ui-react": "^0.80.2"
  },
  "devDependencies": {
    "@bigtest/interactor": "^0.5.0",
    "@bigtest/mocha": "^0.3.3",
    "@bigtest/react": "^0.1.1",
    "@types/auth0-js": "^8.11.2",
    "@types/auth0-lock": "^11.4.4",
    "@types/chai": "^4.1.3",
    "@types/chai-dom": "^0.0.6",
    "@types/connect": "^3.4.32",
    "@types/express": "^4.16.0",
    "@types/http-proxy-middleware": "^0.17.4",
    "@types/jquery": "^3.3.4",
    "@types/jsdom": "^11.0.5",
    "@types/jwt-decode": "^2.2.1",
    "@types/mocha": "^5.2.1",
    "@types/react": "^16.0.38",
    "@types/react-dom": "^16.0.4",
    "@types/react-redux": "^6.0.0",
    "@types/react-router": "^4.0.26",
    "@types/react-router-dom": "^4.2.7",
    "@types/recompose": "^0.26.1",
    "@types/serve-static": "^1.13.2",
    "@types/sinon": "^5.0.1",
    "@types/sinon-chai": "^3.2.0",
    "@types/webpack": "^4.4.0",
    "@types/webpack-env": "^1.13.6",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "chai": "^4.1.2",
    "chai-dom": "^1.8.0",
    "connect": "^3.6.6",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "http-proxy-middleware": "^0.18.0",
    "http-shutdown": "^1.2.0",
    "jquery": "^3.3.1",
    "karma": "^2.0.2",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-typescript": "^3.0.12",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "node-sass": "^4.9.0",
    "parcel-bundler": "^1.7.1",
    "react-test-renderer": "^16.4.0",
    "serve-static": "^1.13.2",
    "sinon": "^6.0.0",
    "sinon-chai": "^3.2.0",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.1",
    "ts-node": "^7.0.0",
    "tsconfig-paths": "^3.3.2",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.13.0",
    "tslint-eslint-rules": "^5.3.1",
    "tslint-no-unused-expression-chai": "^0.1.3",
    "tslint-react": "^3.6.0",
    "typescript": "^2.8.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.2.0",
    "webpack-cli": "^3.0.3",
    "webpack-node-externals": "^1.7.2"
  }
}

// babelrc

{
    "plugins": [
        ["transform-inline-environment-variables", {
            "include": [
                "AUTH0_CONNECTION",
                "AUTH0_DOMAIN",
                "AUTH0_CLIENT_ID",
                "AUTH0_SCOPE",
                "API_HOST",
                "HAS_API"
            ]
        }],
        ["module-resolver", {
            "root": ["./src"],
            "alias": {
                "@data": ["src/data"],
                "@api": ["src/data/api"],
                "@models": ["src/data/models"],
                "@store": ["./src/redux-store"],
                "@ui": ["./src/ui"],
                "@lib": ["./src/lib"],
                "@env": ["./src/env.ts"],
                "tests": ["./tests"],
                "vendor": ["./src/vendor"]
            }
        }]
    ]
}

🤔 Expected Behavior

it should leave my dependencies alone.

😯 Current Behavior

my dependencies are changed without prompting and without confirmation.

💁 Possible Solution

don't change things in package.json....

🔦 Context

This happens when I'm running my dev server, which in my package.json is via the script:
start:dev:on-host which is:

PORT=9091 API_HOST=http://localhost:7081 ./node_modules/.bin/ts-node src/devproxyserver.ts",

and devproxyserver.ts is:

import "regenerator-runtime/runtime";

import * as express from 'express';
import * as proxy from 'http-proxy-middleware';
const Bundler = require('parcel-bundler');

const port = Number(process.env.PORT || 1234);
const hmrPort = Number(process.env.HMR_PORT || 0);

const bundler = new Bundler('src/index.html', {
  cache: false,
  hmrPort,
  logLevel: 2
});

const app = express();
const httpProxy = proxy({
  changeOrigin: true,
  secure: false,
  target: `http://${process.env.API_HOST}`,
  ws: true,
});

// everything *should* have an api route
// TODO: backend may need updating
app.use('/api', httpProxy);

// for testing successful request to backend (for now)
// TODO: remove
app.use('/configapi', httpProxy);
app.use('/ui', httpProxy);

app.use(bundler.middleware());

app.listen(port, '0.0.0.0', () => {
  // tslint:disable-next-line:no-console
  console.log(`Listening on 0.0.0.0:${port}, and HMRing on port ${hmrPort}`);
});

💻 Code Sample

repo: https://github.com/sillsdev/appbuilder-portal/pull/11

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.3
| Node | 8.11.1
| npm/Yarn | yarn 1.6.0
| Operating System | Ubuntu 18.04

Bug Confirmed Bug

Source

NullVoxPopuli

👍2

Most helpful comment

@DeMoorJasper thanks, I didn't know about the option to disable this.

For future visitors:
The flag is --no-autoinstall, docs at https://parceljs.org/cli.html#disable-autoinstall

tsi on 10 Jan 2019

👍5

All 8 comments

Yes, we experience this too, very annoying

tsi on 31 Oct 2018

This is our 3rd project affected by this. so it should be easily reproducible. doesn't anyone else suffer from this?
Downgrading react below 16.x has some serious licensing implications so this can lead to major issues.
https://medium.freecodecamp.org/facebook-just-changed-the-license-on-react-heres-a-2-minute-explanation-why-5878478913b2

tsi on 2 Jan 2019

Are you sure it is Parcel and not an outdated lockfile (yarn.lock/package-lock.json)?

devongovett on 2 Jan 2019

This might help - it just happened again when Parcel auto installed packages that were missing from node_modules (which is a great feature btw).
My yarn.lock was not outdated because I just re-created it with yarn

What I did was add this line to one of my components (muicss was never added to this project):
import { Button } from 'muicss/react';
Then I ran parcel, which changed my package.json from
"react": "^16.7.0",
to
"react": "^0.14.0 || ^15.0.0 || ^16.0.0",