Improve NPX Support / Passing Config Options via CLI about size-limit

[ai]

Good idea. Can you try this:

npx size-limit ./src/index.js --why

It should work right now.

[Saeris]

Received the following:

$ npx size-limit ./src/index.js --why
npx: installed 1 in 2.047s
Path must be a string. Received undefined
C:\Users\Saeris\AppData\Roaming\npm-cache\_npx\43864\node_modules\size-limit\cli.js
 ERROR  Size Limit can't resolve
        dns
        in D:\GitHub\Flickr-Wormhole\node_modules\isemail\lib

I haven't used size-limit on this project yet, so I don't think having run the command in that directory before would have anything to do with it, if that's a possible bug with npx.

Perhaps I need to clear cache first? I'll try that...

[edit]: Clearing the cache did not help, even when using --force, which I had to use because I got the follow the first time I tried:

$ npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:

[ai]

CLI API works fine. You have a different issue with size-limit.

Did you run npm install? Do you have dns in your project dependencies/devDependencies?

[Saeris]

I did install project dependencies via yarn instead of npm install.

I'm not using dns in my project as far as I'm aware, it's not in my project deps.

"dependencies": {
    "apollo-server-hapi": "^1.1.2",
    "babel-polyfill": "^6.16.0",
    "babel-runtime": "^6.26.0",
    "dataloader": "^1.3.0",
    "date-fns": "^1.28.5",
    "good": "^7.3.0",
    "good-winston": "^4.0.0",
    "graphql": "^0.11.4",
    "graphql-custom-types": "^1.1.0",
    "graphql-iso-date": "^3.3.0",
    "graphql-relay": "^0.5.2",
    "graphql-tools": "^1.0.0",
    "hapi": "^16.6.2",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "aws-sdk": "^2.123.0",
    "babel-cli": "^6.16.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.2",
    "babel-minify-webpack-plugin": "^0.2.0",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-commonjs-es2015-modules": "^3.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.18.0",
    "babel-plugin-transform-function-bind": "^6.22.0",
    "babel-plugin-transform-imports": "^1.4.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-preset-env": "^1.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.15.2",
    "cors": "2.8.4",
    "dotenv": "^4.0.0",
    "env-cmd": "^7.0.0",
    "eslint": "^4.7.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-plugin-compat": "^1.0.4",
    "eslint-plugin-flowtype": "^2.36.0",
    "eslint-plugin-graphql": "^1.3.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jest": "^21.2.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.4.0",
    "flow": "^0.2.3",
    "flow-bin": "^0.55.0",
    "graphql-tag": "^2.4.2",
    "imports-loader": "^0.7.1",
    "isomorphic-fetch": "^2.2.1",
    "lint-staged": "^4.2.3",
    "lodash": "^4.17.4",
    "lodash-webpack-plugin": "^0.11.4",
    "prettier": "^1.7.0",
    "serverless-domain-manager": "^1.1.12",
    "serverless-offline": "^3.15.3",
    "serverless-webpack": "^3.1.0",
    "webpack": "^3.6.0",
    "webpack-node-externals": "^1.6.0"
  }

[Saeris]

For reference I'm running:

Windows 10
node: v8.5.0
yarn: 1.0.2
npm: 5.4.2
npx: 9.6.0

[ai]

Can you try add size-limit to config and run npx size-limit (just to find the source of the problem)?

Maybe this project is open sourced?

[Saeris]

Okay, one of my sub dependencies was dns and I was unaware of it. Here's the output:

$ npx size-limit --why
npx: installed 1 in 1.515s
Path must be a string. Received undefined
D:\GitHub\Flickr-Wormhole\node_modules\size-limit\cli.js
 ERROR  Size Limit can't resolve
        dns
        in D:\GitHub\Flickr-Wormhole\node_modules\isemail\lib

And here's the project if you want to take a look at it, I'm still working out some bugs so you may not be able to get it to run.

https://github.com/Saeris/Flickr-Wormhole

[ai]

Yeap, seems like isemail uses dns but doesn’t have it in dependencies.

Add dns to your dev dependencies: npm install --save-dev dns. Will it fix CLI?

[Saeris]

No dice

Saeris@Tristram MINGW64 /d/GitHub/Flickr-Wormhole (develop)
$ yarn add -D dns
yarn add v1.0.2
[1/5] Validating package.json...
[2/5] Resolving packages...
warning [email protected]: Use uuid module instead
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
error [email protected]: The engine "node" is incompatible with this module. Expected version "0.8.x".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Saeris@Tristram MINGW64 /d/GitHub/Flickr-Wormhole (develop)
$ npx size-limit --why
npx: installed 1 in 1.747s
Path must be a string. Received undefined
D:\GitHub\Flickr-Wormhole\node_modules\size-limit\cli.js
 ERROR  Size Limit can't resolve
        dns
        in D:\GitHub\Flickr-Wormhole\node_modules\isemail\lib

Looks like dns might not work in my environment. I might be able to do without the actual dependency that;s including it, graphql-custom-types, which I'm using to add custom GraphQL scalars to validate URLs and Email addresses, which I could just use String types instead. Most of the issues I'm dealing with in my project at the moment are GraphQL related.

[ai]

:( I will try to investigate it on this weekend.

[Saeris]

Sounds good! I should catch some sleep anyways it's almost 5am.

[jcrugzz]

dns is a node internal library that is being used that is unable to be resolved based on how this library works. I'm pretty sure this is because webpack is not able to polyfill node dependencies from those packages. I'd try and file a pull-request against isemail to make it more client-side friendly if that is the only thing blocking this.

[ai]

Yeap seems like it is webpack vs. dns problem.

You need to add:

"browser": {
  "dns": false
}

to your project package.json to prevent webpack resolving module. We do the same in PostCSS: https://github.com/postcss/postcss/blob/master/package.json#L74