source map hell

[daniellacosse]

been hitting my head against this issue for a while. with the inline eval source maps, our dev server currently generates multiple 20MB bundles. this greatly bogs down our dev env with all the eval calls and JIT overhead.

the production build is... wildly different, with all the chunks summing to 3MB. there are perf issues there too, but milder, and It's become very difficult to isolate which is causing what performance loss - you know, use development to find out what's causing the performance issues on production without the source maps getting in the way.

for the life of me i cannot get them to split out into their own .map files or remove them on development entirely. (the former would be nice for sentry support)

I have tried:

• Issues with development speed #918 (comment)
• installing @zeit/[email protected] and configuring it several different ways
• trawling the entire webpack config removing all references to source maps i can find (just to feel something)
• experimental.productionBrowserSourceMaps

I'm desperate. please help.

next.config.js

.bablerc - yes removing sourceMap: true here doesn't seem to work either

package.json

{
  "version": "1.0.0",
  "license": "ISC",
  "scripts": {
    "dev": "export HEROKU_SLUG_COMMIT=$(git rev-parse HEAD) && next",
    "build": "next build",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "start": "next start -p $PORT",
    "typecheck": "tsc --noEmit",
    "pre-commit": "yarn lint-staged --quiet",
    "format": "prettier '{components,graphql,layouts,lib,pages,shared,static,styles}/**/*.{js,ts,tsx,json,md}' --write && yarn lint --fix",
    "stylelint": "stylelint **/*"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn pre-commit"
    }
  },
  "_moduleAliases": {
    "@app/*": ".",
    "@components": "./components",
    "@graphql/*": "graphql"
  },
  "sass": {
    "includePaths": [
      "src",
      "node_modules"
    ]
  },
  "dependencies": {
    "@apollo/client": "3.1.3",
    "@apollo/react-common": "^3.1.3",
    "@apollo/react-hooks": "4.0.0",
    "@apollo/react-ssr": "^3.1.3",
    "@blueprintjs/core": "^3.28.2",
    "@blueprintjs/datetime": "^3.18.2",
    "@blueprintjs/icons": "^3.19.0",
    "@blueprintjs/select": "^3.13.6",
    "@emotion/babel-preset-css-prop": "^10.0.27",
    "@emotion/core": "^10.0.28",
    "@emotion/css": "^10.0.27",
    "@emotion/styled": "^10.0.27",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@sentry/browser": "^5.22.3",
    "@sentry/integrations": "^5.22.3",
    "@sentry/node": "^5.22.3",
    "@sentry/react": "^5.22.3",
    "@sentry/tracing": "^5.22.3",
    "@types/moment": "^2.13.0",
    "@types/react-grid-layout": "^0.17.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-source-maps": "^0.0.4-canary.1",
    "apollo-boost": "^0.4.7",
    "cookie": "^0.4.0",
    "dotenv": "^8.2.0",
    "emotion-theming": "^10.0.27",
    "font-picker-react": "^3.5.0",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "highcharts": "8.1.0",
    "highcharts-react-official": "3.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "lodash": "^4.17.15",
    "mapbox-gl": "^1.4.1",
    "moment": "^2.26.0",
    "next": "9.5.2",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^0.19.0",
    "node-sass": "^4.13.0",
    "normalize.css": "^8.0.1",
    "performant-array-to-tree": "^1.2.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.1",
    "re-resizable": "^6.3.2",
    "react": "16.13.1",
    "react-autosize-textarea": "^7.1.0",
    "react-color": "^2.18.0",
    "react-content-loader": "^4.3.3",
    "react-dnd-cjs": "^9.5.1",
    "react-dnd-html5-backend-cjs": "^9.5.1",
    "react-dom": "16.13.1",
    "react-draggable": "^4.0.3",
    "react-facebook": "^8.0.4",
    "react-google-login": "^5.0.7",
    "react-grid-layout": "^0.18.3",
    "react-hook-form": "6.3.0",
    "react-hotkeys": "^2.0.0",
    "react-icons": "^3.7.0",
    "react-json-view": "^1.19.1",
    "react-konva": "^16.13.0-6",
    "react-loader-spinner": "^3.1.5",
    "react-map-gl": "^5.1.2",
    "react-modal": "^3.11.2",
    "react-multi-carousel": "^2.5.5",
    "react-select": "^3.0.8",
    "react-switch": "^5.0.1",
    "react-tabs": "^3.0.0",
    "react-tooltip": "^4.2.6",
    "react-top-loading-bar": "^1.2.0",
    "shell-quote": "^1.7.2",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "use-deep-compare-effect": "^1.3.0",
    "use-fit-text": "^2.3.0",
    "use-reducer-async": "^0.6.0",
    "uuid": "^3.4.0",
    "validator": "^13.0.0",
    "webpack-bundle-analyzer": "^3.8.0"
  },
  "devDependencies": {
    "@babel/helper-validator-identifier": "^7.9.0",
    "@types/lodash": "^4.14.149",
    "@types/node": "12.0.12",
    "@types/react": "16.8.23",
    "@types/react-dom": "16.8.4",
    "@types/react-loader-spinner": "^3.1.0",
    "@types/react-modal": "^3.10.0",
    "@types/react-select": "^3.0.8",
    "@types/styled-jsx": "^2.2.8",
    "@types/uuid": "^3.4.7",
    "@types/validator": "^13.0.0",
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "babel-plugin-emotion": "^10.0.33",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-styled-components": "^1.10.0",
    "eslint": "^7.9.0",
    "eslint-config-airbnb": "17.1.1",
    "eslint-config-prettier": "^6.2.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-json": "^1.4.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.0.1",
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5",
    "module-alias": "^2.2.2",
    "prettier": "^1.18.2",
    "stylelint": "^10.1.0",
    "stylelint-config-recommended": "^2.2.0",
    "typedoc": "^0.17.7",
    "typedoc-neo-theme": "^1.0.8",
    "typedoc-plugin-external-module-name": "^3.1.0",
    "typedoc-plugin-mermaid": "^1.2.0",
    "typescript": "^4.0.2"
  }
}