Nextjs fatal production only error after adding new package - javascript

We have a NextJs app that is running for couple of years in production.
Recently I added storybook-addon-pseudo-states addon ran the code locally and tested and pushed to production. The app was running perfectly locally. believe it or not after pushing to production, production entirely went down with this weird error.
{"statusCode":500,"code":"MODULE_NOT_FOUND","error":"Internal Server Error","message":"Cannot find module 'react-is'\nRequire stack:\n- /opt/webapp/node_modules/styled-components/dist/styled-components.cjs.js\n- /opt/webapp/.next/server/pages/_document.js\n- /opt/webapp/node_modules/next/dist/next-server/server/require.js\n- /opt/webapp/node_modules/next/dist/next-server/server/load-components.js\n- /opt/webapp/node_modules/next/dist/next-server/server/api-utils.js\n- /opt/webapp/node_modules/next/dist/next-server/server/next-server.js\n- /opt/webapp/node_modules/next/dist/server/next.js\n- /opt/webapp/server.js"}
This is our package.json.
{
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev": "NODE_ENV=development yarn server-remove-types && yarn server-watch",
"build": "yarn server-remove-types && yarn server-compile && yarn server-copy && next build",
"server-remove-types": "flow-remove-types --all --pretty src/server --out-dir .untyped/server",
"server-compile": "ncc build .untyped/server/index.js --out .dist --minify --external next --external grpc",
"server-copy": "node ./util/copy.js --from .dist/index.js --to server.js",
"server-watch": "yarn server-watch-remove-types & yarn server-watch-compile & yarn server-watch-nodemon",
"server-watch-nodemon": "node .dist/index.js",
"server-watch-remove-types": "node util/watch-flow-remove-types.js --from src/server --to .untyped/server",
"server-watch-compile": "yarn server-compile --watch",
"lint-javascript": "eslint src",
"format": "eslint src --fix",
"type-install": "flow-typed install",
"type-upgrade": "flow-typed update",
"type-check": "flow check --color=always --show-all-errors",
"test-unit": "NODE_ENV=test jest --config ./config/jest.unit.config.js --colors",
"test-unit-watch": "yarn test-unit --watchAll --coverage false",
"test-unit-update-snapshots": "yarn test-unit --updateSnapshot",
"test-endpoints": "NODE_ENV=test jest --config ./config/jest.endpoints.config.js src/test/endpoints.spec.js",
"test-bdd": "echo 'Not implemented.'",
"test-contract": "echo 'Not implemented.'",
"test-e2e": "echo 'Not implemented.'",
"test-e2e-debug": "echo 'Not implemented.'",
"storybook": "start-storybook -p 3001",
"build-storybook": "build-storybook -o ./src/stories/storybook"
},
"engines": {
"node": ">=12"
},
"browserslist": [
"extends #dpgr/browserslist-config"
],
"dependencies": {
"#dpgr/browserslist-config": "^1.1.0",
"#dpgr/react-components": "^3.7.0",
"#sentry/browser": "6.10.0",
"#sentry/node": "6.10.0",
"#sentry/tracing": "6.10.0",
"#tippy.js/react": "^2.2.3",
"#vercel/ncc": "^0.31",
"axios": "0.18.1",
"babel-plugin-superjson-next": "^0.3.1",
"chart.js": "^2.9.4",
"chokidar": "^3.3.1",
"color": "^3.1.0",
"convert-array-to-csv": "^1.0.9",
"cookie": "^0.4.0",
"date-fns": "^2.4.1",
"dompurify": "^2.0.2",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"fastify": "^2.0.0",
"fastify-cookie": "^3.0.2",
"flow-remove-types": "^2.115.0",
"focus-visible": "^5.0.0",
"formik": "^1.3.2",
"fs": "^0.0.1-security",
"google-protobuf": "^3.14.0",
"grpc": "^1.24.4",
"grpc-web": "^1.2.1",
"http-status-codes": "^1.3.0",
"iban": "^0.0.14",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.11",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"next": "^10.0.0",
"next-cookies": "^2.0.3",
"next-redux-wrapper": "^7.0.0",
"node-xlsx": "^0.15.0",
"nodemon": "^2.0.2",
"nprogress": "^0.2.0",
"openid-client": "^3.13.0",
"p-queue": "^6.2.1",
"path-to-regexp": "^6.2.0",
"re-reselect": "^3.0.0",
"react": "^17.0.1",
"react-aria-modal": "^4.0.0",
"react-chartjs-2": "^2.11.1",
"react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^3.0",
"react-dom": "^17.0.1",
"react-paginate": "^6.3.0",
"react-redux": "^7.2.2",
"react-select": "^3.0.8",
"redux": "^4.0.0",
"redux-saga": "^1.1.1",
"regenerator-runtime": "^0.13.3",
"reselect": "^4.0.0",
"styled-components": "^5.0.0",
"styled-reboot": "^4.0.1",
"superjson": "^1.7.5",
"uuid": "^3.3.2",
"xlsx": "^0.17.1",
"yup": "^0.28.0"
},
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/eslint-parser": "^7.13.14",
"#babel/helper-builder-react-jsx": "^7.15.4",
"#babel/helper-builder-react-jsx-experimental": "^7.12.11",
"#babel/plugin-transform-flow-strip-types": "^7.4.4",
"#storybook/addon-actions": "6.3.12",
"#storybook/addon-controls": "^6.3.12",
"#storybook/addon-essentials": "6.3.12",
"#storybook/addon-links": "6.3.12",
"#storybook/react": "6.3.12",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "12.0.0",
"#testing-library/react-hooks": "7.0.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-loader": "^8.0.5",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-module-resolver": "^4.0",
"babel-plugin-styled-components": "^1.10.0",
"css-loader": "6.4.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-import-resolver-babel-module": "^5.3.0",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^23.1.1",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^4.2",
"fastify-http-proxy": "^2.1.0",
"flow-bin": "^0.110.0",
"flow-typed": "^2.4.0",
"jest": "^26.6.3",
"jest-styled-components": "^7.0.5",
"mockdate": "^2.0.5",
"pretty": "^2.0.0",
"redux-devtools-extension": "^2.13.9",
"redux-mock-store": "^1.5.3",
"redux-saga-test-plan": "^4.0.1",
"redux-testkit": "^1.0.6",
"storybook-addon-designs": "6.2.0",
"storybook-addon-next-router": "3.0.8",
"style-loader": "3.3.0",
"supertest": "^6.1.6"
},
"peerDependencies": {}
}
These are the only changes made to package.json, plus few small changes in storybook stories.
Changes to package.json
Any idea what is the root cause for this fatal production only error?

The error says you're missing the library react-is and based on your package.json it doesn't appear to be installed.
The two scenarios that come to mind to explain erroring after package install / only in production.
Scenario 1
Someone could have manually deleted react-is from the package.json at some point in time after the last package manager sync and prior to your screenshot.
Package managers sync the changes in package.json when performing installs, updates, and uninstalls. Meaning, when you added the storybook plugin it removed the react-is package because it was no longer listed in the package.json file.
Scenario 2
Since it's only happening in production the app might not be using react-is but it is still included in a file.
import ReactIs from 'react-is'
Search your app for react-is - if it's not used, remove the unused statements - if it's used you need to install the package.

Related

I/chromium: [INFO:CONSOLE(2)] "Uncaught SyntaxError: Unexpected token ..." spread operator in webview android studio

the problem is maybe the same as the link below :
https://forum.vuejs.org/t/spread-operator-not-working-in-webview-android/74893/7
but the different is, im using laravel mix and vue 2.6.11
here is my package.json
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"build-report": "vue-cli-service build --report",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "rename .env .env_ && rename .env_ .env && php artisan ziggy:generate && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && rename .env .env.production && rename .env_ .env"
},
"devDependencies": {
"#babel/plugin-proposal-object-rest-spread": "^7.17.3",
"#fortawesome/fontawesome-free": "^5.12.0",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue": "^0.8.0",
"#inertiajs/progress": "^0.2.7",
"#mdi/font": "^4.9.95",
"#mdi/js": "^5.9.55",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"deepmerge": "^4.2.2",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-vue": "^7.5.0",
"fibers": "^5.0.0",
"font-awesome": "^4.7.0",
"laravel-mix": "5.0.9",
"lodash": "^4.17.20",
"material-design-icons-iconfont": "^6.4.1",
"resolve-url-loader": "^3.1.2",
"roboto-fontface": "^0.10.0",
"sass": "^1.49.8",
"sass-loader": "^10.1.1",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.4.2",
"vuetify-loader": "1.4.3"
},
"dependencies": {
"#chenfengyuan/vue-countdown": "^1.1.5",
"#mdi/light-font": "^0.2.63",
"#types/ziggy-js": "^0.9.0",
"#vue/cli-service": "^5.0.4",
"axios": "^0.21.1",
"dotenv": "^16.0.0",
"eslint": "^7.18.0",
"laravel-echo": "^1.10.0",
"lottie-player-vue": "0.0.16",
"object-to-formdata": "^4.1.0",
"pusher-js": "^7.0.2",
"qrcode": "^1.5.0",
"read-excel-file": "^5.2.28",
"sweetalert2": "^9.17.2",
"v-money": "^0.8.1",
"vee-validate": "^2.2.15",
"vform": "^1.0.1",
"vue-axios": "^2.1.5",
"vue-cli": "^2.9.6",
"vue-countdown": "^1.0.4",
"vue-excel-xlsx": "^1.2.2",
"vue-moment": "^4.1.0",
"vue-qrcode-component": "^2.1.1",
"vue-resource": "^1.5.3",
"vue-sessionstorage": "^1.0.0",
"vue-social-auth": "^1.4.9",
"vue-socket.io": "^3.0.10",
"vue2-storage": "^5.0.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vuex-map-fields": "^1.4.1",
"ziggy": "^2.4.0",
"ziggy-js": "^1.4.3"
}
when i call the url in webview using android studio. it says "[INFO:CONSOLE(2)] "Uncaught SyntaxError: Unexpected token ..."".
maybe the spread operator called by mistake. ?
here is my webpack.mix.js
mix
.webpackConfig({
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue')
}
},
plugins: [new VuetifyLoaderPlugin()],
})
.version()
.sourceMaps()
i still dont know how to fix this problem.

ReferenceError: describe is not defined WHEN run npm run dev

Any something wrong with my package.json? The test is green when I run npm run test. But when I run npm run dev, the test is also run. There is no command config I write that it should run test when I run npm run dev
here is my package.json
"name": "domundotech-cashier",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"dev": "set DEBUG=domundotech-cashier:* & nodemon --exec & npm start",
"test": "node ./node_modules/mocha/bin/mocha \"*/*.spec.js\""
},
"dependencies": {
"acorn": "^8.1.0",
"body-parser": "^1.19.0",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"eslint-plugin-jest": "^24.3.3",
"express": "~4.16.1",
"express-useragent": "^1.0.15",
"http-errors": "~1.6.3",
"install": "^0.13.0",
"jade": "~1.11.0",
"moment-timezone": "^0.5.33",
"morgan": "~1.9.1",
"mysql2": "^2.2.5",
"node-device-detector": "^1.3.4",
"npm": "^7.8.0",
"request": "^2.88.2",
"sequelize": "^6.6.2",
"typescript": "^4.2.3"
},
"devDependencies": {
"sequelize-test-helpers": "^1.3.2",
"proxyquire": "^2.1.3",
"mocha": "^8.3.2",
"chai": "^4.3.4",
"sinon": "^10.0.0",
"sinon-chai": "^3.6.0",
"supertest": "^6.1.3",
"#typescript-eslint/eslint-plugin": "^4.20.0",
"#typescript-eslint/parser": "^4.20.0",
"eslint": "^7.23.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"sequelize-cli": "^6.2.0"
}
}
and this for the error logs
Describe is defined in my test file. For now, I found the solution that I should ignore (-i) test files when executing nodemon :)
"start": "node ./bin/www",
"dev": "set DEBUG=domundotech-cashier:* & nodemon -i ./test & npm start",
"test": "mocha \"./test/*/*.spec.js\""
},
And I refactor my project structure too

how to resolve dependency issue: "npm run dev" not working

I have a vue based application, I am trying to run that application by using command npm run dev but it is giving me the below error:
This dependency was not found:
These dependencies were not found:
* module in (webpack)/lib/node/NodeTargetPlugin.js
* webpack/lib/web/FetchCompileWasmTemplatePlugin in ./node_modules/worker-loader/dist/index.js
To install them, you can run: npm install --save module webpack/lib/web/FetchCompileWasmTemplatePlugin
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
below is my package.json
{
"name": "app",
"version": "1.0.0",
"description": "ATS System",
"author": "N4TECH",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "node server.js",
"build:dev": "node build/dev.js",
"build:prod": "node build/build.js"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"bootstrap-vue": "^1.4.0",
"chalk": "^2.0.1",
"chokidar": "^3.4.2",
"css-loader": "^0.28.8",
"debounce": "^1.1.0",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"pusher-js": "^4.3.1",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"tributejs": "^3.5.3",
"vee-validate": "^2.0.0-beta.17",
"vue": "^2.5.2",
"vue-html5-editor": "^1.1.1",
"vue-i18n": "^8.1.0",
"vue-pdf": "^3.2.0",
"vue-router": "^3.0.1",
"vue-scrollto": "^2.11.0",
"vue-social-sharing": "^2.3.3",
"vue-style-loader": "^3.0.3",
"vue-truncate-collapsed": "^1.3.0",
"vue2-datatable-component": "^2.1.26",
"vuedraggable": "^2.16.0",
"vuetify": "^1.2.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"compression-webpack-plugin": "^1.1.6",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"worker-loader": "^3.0.3"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I also tried by deleting node_modules folder, run clean cache i.e npm cache clean --force, and then reinstall but no luck. I am stuck on this issue. Any help would by highly appreciable.

ReactJS randomly Unexpected token '<'

Project was created with create-react-app. Did not eject. There are no webpack configs. Default "react-scripts": "^3.4.0". On dev version there is no error. But on production when user stays long on one page and clicks the link it shows white page, and after updating the site(deploying new version). This error randomly appears. Output on console
Unexpected token '<'
and no other information.
There is my package.json
{
"name": "project-name",
"version": "2.0.0",
"description": "description",
"private": true,
"dependencies": {
"#bugsnag/js": "^6.5.0",
"#bugsnag/plugin-react": "^6.5.0",
"#glidejs/glide": "^3.4.1",
"#material-ui/core": "^4.4.1",
"#sentry/browser": "^5.11.2",
"#sentry/cli": "^1.49.0",
"#types/jest": "^25.1.3",
"#types/node": "^13.7.4",
"#types/rc-switch": "^1.9.0",
"#types/react": "^16.9.22",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"chart.js": "^2.9.1",
"classnames": "2.2.6",
"debounce-promise": "^3.1.2",
"formik": "^1.5.8",
"jquery": "^3.4.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "2.24.0",
"moment-timezone": "^0.5.27",
"orgchart": "^2.1.5",
"prop-types": "^15.7.2",
"purgecss": "^1.4.0",
"rc-switch": "^1.9.0",
"react": "^16.9.0",
"react-autosuggest": "^9.4.3",
"react-chartjs-2": "^2.7.6",
"react-circular-progressbar": "^2.0.2",
"react-contextmenu": "^2.11.0",
"react-data-export": "^0.6.0",
"react-datepicker": "^2.9.6",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-intl": "2.4.0",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.0",
"react-select": "^3.0.4",
"react-select-async-paginate": "^0.3.10",
"react-table": "latest",
"react-transition-group": "^4.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.0.5",
"styled-components": "^5.0.0",
"tailwindcss": "^1.1.2",
"typescript": "^3.8.2",
"xlsx": "^0.15.5",
"yup": "^0.27.0"
},
"scripts": {
"start": "yarn run tailwind && react-scripts start",
"build": "yarn run tailwind && node ./purge-tailwindcss.js && cross-env react-scripts build",
"tailwind": "./node_modules/.bin/tailwind build ./src/assets/css/vendor/tailwind.base.css -c ./tailwind.js -o ./src/assets/css/vendor/tailwind.css",
"test": "react-scripts test --env=node",
"crt": "bash create-component.sh",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^1.7.0",
"node-sass": "^4.12.0",
}
}
Don't know how. But after enabling sourcemap this error doesn't shown.
I removed this command from yarn build:
GENERATE_SOURCEMAP=false

How long does it take to build an electron project?

I have a small project with few npm dependencies and it is taking more than 30 minutes (and counting) to build. I don't know if it is normal or there is something wrong that is delaying the build.
I have two questions:
Is it normal taking that long?
How long does an average project take to build?
My package.json:
{
"name": "...",
"version": "0.0.1",
"author": "Ricardo Villagrana <...#gmail.com>",
"description": "...",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"e2e": "npm run pack && mocha test/e2e",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"test": "npm run unit && npm run e2e",
"unit": "karma start test/unit/karma.conf.js",
"postinstall": "npm run lint:fix && electron-builder install-app-deps",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"build": {
"productName": "... - DektopApp",
"appId": "com.heroku.XXX",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.8",
"#fortawesome/free-solid-svg-icons": "^5.5.0",
"#fortawesome/vue-fontawesome": "^0.1.2",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"bulma": "^0.7.2",
"electron-json-storage": "^4.1.4",
"font-awesome": "^4.7.0",
"sqlite3": "^4.0.3",
"vue": "^2.5.16",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vuex": "^3.0.1",
"vuex-electron": "^1.0.0"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^2.1.2",
"chai": "^4.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^12.2.0",
"electron-rebuild": "^1.8.2",
"electron-winstaller": "^2.7.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"karma": "^2.0.2",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.1.2",
"karma-electron": "^6.0.0",
"karma-mocha": "^1.3.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"mini-css-extract-plugin": "0.4.0",
"mocha": "^5.2.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"postcss-loader": "^3.0.0",
"require-dir": "^1.0.0",
"sass-loader": "^7.0.3",
"spectron": "^3.8.0",
"style-loader": "^0.21.0",
"tailwindcss": "^0.7.2",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
It depends upon a lot of factors including your hardware and size of project. But in general, for medium size projects, is should not take that long.
It is usually wrapped up in a few minutes, say 3-4 minutes on decent hardware.
A few observations:
As per your dependency tree, it doesn't look like you have any heavy dependencies. So assuming you're on a decent hardware it should not take that long.
Also, looks like you're using webpack, make sure you've set your project directory correctly, and it does not includes your node_modules folder. Because if it does, large build times can be explained due to webpack bundling your entire node_modules dir instead of the usual src dir.
If it's a typescript project, make sure to add exclude key in your tsconfig.json file for all (if any) pre-compiled library that you're using outside of your node modules dir. This has personally happened to me before, and it does increases your build time rather significantly.

Categories