Cannot resolve fs in several packages

[th3fallen]

When running this i get the following errors... http://th3fallen.d.pr/Nh5v.jpg

with the following config

module.exports = {
  files: [
    'assets/icons/*.svg', // glob style
  ],
  fontName: 'wiw-icons',
  classPrefix: 'wiwi-',
  baseClass: 'wiwi',
  fixedWidth: true,
  types: ['eot', 'woff', 'ttf', 'svg'], // this is the default
};

am i just missing a step or something

[jeerbl]

Hi

Can you provide your package.json?

Cheers
Jerome

[th3fallen]

{
  "name": "REDACTED-js",
  "version": "0.0.1",
  "description": "The next generation of REDACTED UI",
  "main": "index.js",
  "scripts": {
    "start": "export NODE_ENV=dev && webpack-dashboard -- node -r babel-register server.js",
    "clean": "rm -rf ./dist/*",
    "build": "npm run clean && NODE_ENV=${NODE_ENV:=production} node -r babel-register ./node_modules/.bin/webpack --progress --colors",
    "build:production": "npm run build -- -p",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch",
    "lint": "eslint app",
    "lint:fix": "eslint app --fix",
    "deploy": "node -r babel-register scripts/deploy.js",
    "deploy:staging": "export NODE_ENV=staging PUBLIC_PATH=${PUBLIC_PATH:=\"/$(git symbolic-ref HEAD 2> /dev/null | sed -e 's/^refs\\/heads\\///')/\"} && npm run build && npm run deploy",
    "deploy:production": "export NODE_ENV=production DEPLOY_PATH=${DEPLOY_PATH:=\"/$(git symbolic-ref HEAD 2> /dev/null | sed -e 's/^refs\\/heads\\///')/\"} && npm run build:production && npm run deploy",
    "publish": "node -r babel-register scripts/publish.js"
  },
  "author": "REDACTED",
  "license": "MIT",
  "jest": {
    "modulePaths": [
      "app"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 85,
        "branches": 70,
        "functions": 80,
        "lines": 85
      }
    },
    "coverageDirectory": "<rootDir>/reports/coverage",
    "collectCoverageFrom": [
      "app/**/*.js",
      "!app/tests/**",
      "!app/shared/vendor/**",
      "!app/main.js"
    ],
    "notify": true,
    "coverageReporters": [
      "lcov",
      "text-summary"
    ],
    "setupFiles": [
      "<rootDir>/scripts/testSetup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "^.+\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "devDependencies": {
    "autoprefixer": "^6.6.1",
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^18.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-istanbul": "^3.0.0",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.11.6",
    "bootstrap": "^4.0.0-alpha",
    "css-loader": "^0.26.0",
    "enzyme": "^2.7.0",
    "enzyme-to-json": "^1.1.4",
    "eslint": "^3.10.2",
    "eslint-plugin-react": "^6.1.2",
    "event-stream": "^3.3.2",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "faker": "^3.1.0",
    "file-loader": "^0.10.0",
    "github-api": "^3.0.0",
    "gitlab-yaac": "^0.0.4",
    "html-webpack-plugin": "^2.25.0",
    "isparta": "^4.0.0",
    "jest": "^19.0.2",
    "json-loader": "^0.5.4",
    "knox": "^0.9.2",
    "knox-mpu": "^0.1.6",
    "lolex": "^1.5.1",
    "node-sass": "^4.1.1",
    "postcss-loader": "^1.1.1",
    "react-addons-test-utils": "^15.4.1",
    "react-proxy": "^1.1.8",
    "redux-mock-store": "^1.2.1",
    "rename": "^1.0.4",
    "sass-loader": "^5.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta",
    "webpack-dashboard": "^0.3.0",
    "webpack-dev-server": "^2.1.0-beta",
    "webpack-merge": "^2.3.1",
    "yml-loader": "^1.1.0"
  },
  "dependencies": {
    "calendar-base": "^0.3.0",
    "chrono-node": "^1.3.1",
    "classnames": "^2.2.5",
    "credit.js": "^0.0.6",
    "formsy-react": "^0.19.0",
    "google-libphonenumber": "^2.0.5",
    "hint.css": "2.4.1",
    "immutable": "^3.8.1",
    "js-cookie": "^2.1.2",
    "js-yaml": "^3.7.0",
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "moment": "^2.17.0",
    "moment-timezone": "^0.5.11",
    "react": "^15.4.1",
    "react-addons-css-transition-group": "^15.4.1",
    "react-addons-shallow-compare": "^15.4.1",
    "react-addons-transition-group": "^15.4.1",
    "react-click-outside": "^2.2.0",
    "react-color": "^2.8.0",
    "react-day-picker": "^5.2.0",
    "react-dom": "^15.4.1",
    "react-dropzone": "^3.6.0",
    "react-image-lightbox": "^3.3.0",
    "react-input-autosize": "^1.1.0",
    "react-keypress": "^0.1.5",
    "react-redux": "^5.0.0",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.5",
    "react-select": "^1.0.0-rc.2",
    "react-sortable-hoc": "^0.4.0",
    "react-textarea-autosize": "^4.0.5",
    "react-toggle": "^3.0.1",
    "reactstrap": "^4.2.0",
    "redux": "^3.5.2",
    "redux-segment": "^1.6.0",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.1",
    "rollbar-browser": "^1.9.3",
    "rrule": "^2.2.0",
    "validator": "^6.2.0",
    "whatwg-fetch": "^2.0.1"
  }
}

[jeerbl]

Is this normal I don't see any webfonts-loader in your dev dependencies?

[th3fallen]

that would be... because i forgot to unstash my changes, sorry. it is normally there.

[th3fallen]

http://th3fallen.d.pr/1sNJ.jpg there's what the stashed version has

[jeerbl]

I've googled the issue and apparently this might help you.

What makes you thinks it comes from the webfonts-loader module? No error logs you sent seem to point to that direction.

[th3fallen]

because those errors only appear once the loader is installed and used. also the stack traces point to it
http://th3fallen.d.pr/cuim.jpg

[jeerbl]

Yes but this module has dependencies just as your project, and by looking at the logs I think it does come from one of its dependencies rather than from this module itself.

And by the way this module is webfonts-loader not webfonts-generator as pointed out in your last screenshot.

[th3fallen]

hmm, let me nuke my node_modules and try again my be yarn being dumb...

[th3fallen]

nope, and webfonts-generator is a dep of your package as seen https://github.com/jeerbl/webfonts-loader/blob/master/package.json#L26

[jeerbl]

Could you maybe try this?
request/request#1529 (comment)

[th3fallen]

that solves (supresses) that issue but i still get this http://th3fallen.d.pr/UmEF.jpg as well as my icons appearing as squares instead of the icons.

Also thanks for your time/help with this

[jeerbl]

About the squared icons, I've seen that already. Could you send over one of your icons that is displayed as a square? Or the TTF font generated?

Be aware that webfonts-generator only supports SVG with paths inside. So if you are using SVG rect elements and whatnot, be sure to convert them to paths.

[th3fallen]

that may be my issue the svg uses g's thanks that' sorts me out.