Vue.js project compiling errors - node.js
I got a vue.js project from my friend. So I tried to run it on my local. But I was not able to do it. I got errors. I don't know what node versions my friend used.
I can't predict so I still use my versions. My version: Node.js 13.8.0 NPM 6.13.6
I did npm install and npm run serve
error: Unreachable code (no-unreachable) at src/components/MainComponent.vue:64:25:
62 | case 3:
63 | return 'financial-summary';
> 64 | break;
| ^
65 | case 4:
66 | return 'farm-stress';
67 | break;
error: Unreachable code (no-unreachable) at src/components/MainComponent.vue:67:25:
65 | case 4:
66 | return 'farm-stress';
> 67 | break;
| ^
68 | case 5:
69 | return 'crop-analysis';
70 | break;
error: Unreachable code (no-unreachable) at src/components/MainComponent.vue:70:25:
68 | case 5:
69 | return 'crop-analysis';
> 70 | break;
| ^
71 | }
72 | }
73 | },
8 errors found.
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'interest' is already defined (no-redeclare) at src/components/page/FinancialSummary/FinancialChart.vue:79:17:
77 | interest () {
78 | var interest = (this.$store.state.ProjectedRevenue - this.$store.state.CostProduction) / this.$store.state.CostProduction * 100;
> 79 | var interest = interest.toFixed(2);
| ^
80 | return interest
81 | },
82 | FarmSelected () {
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:102:17:
100 | var ctx = chartRet.getContext("2d");
101 | // Create axes
> 102 | new Chart(ctx, {
| ^
103 | type: 'horizontalBar',
104 | data: {
105 | labels: labels,
error: Duplicate key 'ticks' (no-dupe-keys) at src/components/page/FinancialSummary/FinancialChart.vue:139:29:
137 | scaleInstance.height = 270;
138 | },
> 139 | ticks: {
| ^
140 | callback: function(value, index, values) {
141 | return value + '%';
142 | }
error: 'index' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:140:59:
138 | },
139 | ticks: {
> 140 | callback: function(value, index, values) {
| ^
141 | return value + '%';
142 | }
143 | }
error: 'values' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:140:66:
138 | },
139 | ticks: {
> 140 | callback: function(value, index, values) {
| ^
141 | return value + '%';
142 | }
143 | }
error: Duplicate key 'tooltips' (no-dupe-keys) at src/components/page/FinancialSummary/FinancialChart.vue:158:21:
156 | }]
157 | },
> 158 | tooltips : {
| ^
159 | enabled : true,
160 | callbacks: {
161 | label: function(tooltipItem) {
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:175:29:
173 | ctx.font = "10px Open Sans";
174 | ctx.fillStyle = "#313131";
> 175 | Chart.helpers.each(
| ^
176 | this.data.datasets.forEach(function(dataset, i) {
177 | var meta = chartInstance.controller.getDatasetMeta(i);
178 | Chart.helpers.each(
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:178:33:
176 | this.data.datasets.forEach(function(dataset, i) {
177 | var meta = chartInstance.controller.getDatasetMeta(i);
> 178 | Chart.helpers.each(
| ^
179 | meta.data.forEach(function(bar, index) {
180 | var data = dataset.data[index];
181 | if (data > 0 ) {
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:219:17:
217 | })
218 | var ctx = chart.getContext("2d");
> 219 | new Chart(ctx, {
| ^
220 | type: 'bar',
221 | data: {
222 | labels: labels,
error: 'index' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:283:59:
281 | ticks: {
282 | // Include a dollar sign in the ticks
> 283 | callback: function(value, index, values) {
| ^
284 | if (value < 0 ) return null;
285 | return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
286 | },
error: 'values' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:283:66:
281 | ticks: {
282 | // Include a dollar sign in the ticks
> 283 | callback: function(value, index, values) {
| ^
284 | if (value < 0 ) return null;
285 | return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
286 | },
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:323:29:
321 | ctx.fillStyle = "#8E8F93";
322 |
> 323 | Chart.helpers.each(
| ^
324 | this.data.datasets.forEach(function(dataset, i) {
325 | var meta = chartInstance.controller.getDatasetMeta(i);
326 | Chart.helpers.each(
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:326:33:
324 | this.data.datasets.forEach(function(dataset, i) {
325 | var meta = chartInstance.controller.getDatasetMeta(i);
> 326 | Chart.helpers.each(
| ^
327 | meta.data.forEach(function(bar, index) {
328 | var data = dataset.data[index];
329 | if (data > 0 ) {
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:357:17:
355 | })
356 | var ctx = chart.getContext("2d");
> 357 | new Chart(ctx, {
| ^
358 | type: 'bar',
359 | data: {
360 | labels: labels,
error: 'index' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:420:59:
418 | ticks: {
419 | // Include a dollar sign in the ticks
> 420 | callback: function(value, index, values) {
| ^
421 | if (value < 0 ) return null;
422 | return '$' + value + 'M';
423 | }
error: 'values' is defined but never used (no-unused-vars) at src/components/page/FinancialSummary/FinancialChart.vue:420:66:
418 | ticks: {
419 | // Include a dollar sign in the ticks
> 420 | callback: function(value, index, values) {
| ^
421 | if (value < 0 ) return null;
422 | return '$' + value + 'M';
423 | }
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:459:29:
457 | ctx.fillStyle = "#8E8F93";
458 |
> 459 | Chart.helpers.each(
| ^
460 | this.data.datasets.forEach(function(dataset, i) {
461 | var meta = chartInstance.controller.getDatasetMeta(i);
462 | Chart.helpers.each(
error: 'Chart' is not defined (no-undef) at src/components/page/FinancialSummary/FinancialChart.vue:462:33:
460 | this.data.datasets.forEach(function(dataset, i) {
461 | var meta = chartInstance.controller.getDatasetMeta(i);
> 462 | Chart.helpers.each(
| ^
463 | meta.data.forEach(function(bar, index) {
464 | var data = dataset.data[index];
465 | if (data > 0 ) {
18 errors found.
Module Warning (from ./node_modules/eslint-loader/index.js):
error: Empty block statement (no-empty) at src/components/page/FarmStress/FarmStress.vue:145:34:
143 | i ++;
144 | })
> 145 | if ( index == 1) {
| ^
146 |
147 | } else {
148 | res = (res / i).toFixed(2)
error: 'ref' is assigned a value but never used (no-unused-vars) at src/components/page/FarmStress/FarmStress.vue:162:21:
160 | CreateStressN (index) {
161 | var self = this;
> 162 | var ref = '';
| ^
163 | let chart = '';
164 | this.location.fill(0)
165 |
error: 'maxium' is already defined (no-redeclare) at src/components/page/FarmStress/FarmStress.vue:209:29:
207 | var maxium = this.WholeResultAcre(5) > this.WholeResultAcre(2) ? this.WholeResultAcre(5) : this.WholeResultAcre(2) * 1.15;
208 | } else {
> 209 | var maxium = this.ProjectedRevenue > this.$store.state.CostProduction ? this.ProjectedRevenue : this.$store.state.CostProduction * 1.15;
| ^
210 | }
211 | } else {
212 | if ((this.isPerAcre || this.isperAcre_Print)) {
error: 'maxium' is already defined (no-redeclare) at src/components/page/FarmStress/FarmStress.vue:213:29:
211 | } else {
212 | if ((this.isPerAcre || this.isperAcre_Print)) {
> 213 | var maxium = this.$store.state.financialDataPerAcre[this.pick][5] * 1.15 > this.$store.state.financialDataPerAcre[this.pick][2] ? this.$store.state.financialDataPerAcre[this.pick][5] * 1.15 : this.$store.state.financialDataPerAcre[this.pick][2] * 1.1
| ^
214 | } else {
215 | var maxium = ((this.Analy_data.irrigated[3] + this.Analy_data.dry[3]) * 1.15 > (this.Analy_data.dry[4] + this.Analy_data.irrigated[4])) ? (this.Analy_data.irrigated[3] + this.Analy_data.dry[3]) * 1.15 : (this.Analy_data.dry[4] + this.Analy_data.irrigated[4]) * 1.15;
216 | }
error: 'maxium' is already defined (no-redeclare) at src/components/page/FarmStress/FarmStress.vue:215:29:
213 | var maxium = this.$store.state.financialDataPerAcre[this.pick][5] * 1.15 > this.$store.state.financialDataPerAcre[this.pick][2] ? this.$store.state.financialDataPerAcre[this.pick][5] * 1.15 : this.$store.state.financialDataPerAcre[this.pick][2] * 1.1
214 | } else {
> 215 | var maxium = ((this.Analy_data.irrigated[3] + this.Analy_data.dry[3]) * 1.15 > (this.Analy_data.dry[4] + this.Analy_data.irrigated[4])) ? (this.Analy_data.irrigated[3] + this.Analy_data.dry[3]) * 1.15 : (this.Analy_data.dry[4] + this.Analy_data.irrigated[4]) * 1.15;
| ^
216 | }
217 | }
218 | var ctx = chart.getContext("2d");
error: 'Chart' is not defined (no-undef) at src/components/page/FarmStress/FarmStress.vue:220:36:
218 | var ctx = chart.getContext("2d");
219 | // if (this.myChart) this.myChart.clear();
> 220 | this.mychart = new Chart(ctx, {
| ^
221 | type: 'bar',
222 | data: {
223 | labels: categories,
error: 'value' is defined but never used (no-unused-vars) at src/components/page/FarmStress/FarmStress.vue:272:56:
270 | },
271 | ticks : {
> 272 | callback: function(value, index, values) {
| ^
273 | return null
274 | },
275 | beginAtZero: true,
error: 'index' is defined but never used (no-unused-vars) at src/components/page/FarmStress/FarmStress.vue:272:63:
270 | },
271 | ticks : {
> 272 | callback: function(value, index, values) {
| ^
273 | return null
274 | },
275 | beginAtZero: true,
error: 'values' is defined but never used (no-unused-vars) at src/components/page/FarmStress/FarmStress.vue:272:70:
270 | },
271 | ticks : {
> 272 | callback: function(value, index, values) {
| ^
273 | return null
274 | },
275 | beginAtZero: true,
error: 'Chart' is not defined (no-undef) at src/components/page/FarmStress/FarmStress.vue:306:33:
304 | var ctx = chartInstance.ctx;
305 | ctx.font = "bold 10.5px Open Sans";
> 306 | Chart.helpers.each(
| ^
307 | this.data.datasets.forEach(function(dataset, i) {
308 | var meta = chartInstance.controller.getDatasetMeta(i);
309 | Chart.helpers.each(
error: 'Chart' is not defined (no-undef) at src/components/page/FarmStress/FarmStress.vue:309:37:
307 | this.data.datasets.forEach(function(dataset, i) {
308 | var meta = chartInstance.controller.getDatasetMeta(i);
> 309 | Chart.helpers.each(
| ^
310 | meta.data.forEach(function(bar, ind) {
311 | var data = dataset.data[ind];
312 | if ( i == 0 ) {
11 errors found.
Module Warning (from ./node_modules/eslint-loader/index.js):
error: Empty block statement (no-empty) at src/components/page/FinancialSummary/FinancialSummary.vue:170:34:
168 | i ++;
169 | })
> 170 | if ( index == 1) {
| ^
171 |
172 | } else if ( index == 2 ) {
173 | res = (res / i).toFixed(2)
I emit some mid logs because it's too long to post here.
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:385:21:
383 | case 2 :
384 | return formatNumber(data.irrigated[4])
> 385 | break;
| ^
386 | case 3:
387 | return formatNumber((data.irrigated[4] + data.dry[4]));
388 | break;
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:388:21:
386 | case 3:
387 | return formatNumber((data.irrigated[4] + data.dry[4]));
> 388 | break;
| ^
389 | }
390 | },
391 | CalculateCost_Acre(cate, data) {
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:398:21:
396 | case 1 :
397 | return formatNumber((data.dry[5]).toFixed(2))
> 398 | break;
| ^
399 | case 2 :
400 | return formatNumber((data.irrigated[5]).toFixed(2))
401 | break;
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:401:21:
399 | case 2 :
400 | return formatNumber((data.irrigated[5]).toFixed(2))
> 401 | break;
| ^
402 | case 3:
403 | return formatNumber(((data.irrigated[4] + data.dry[4]) / (data.irrigated[0] + data.dry[0])).toFixed(2));
404 | break;
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:404:21:
402 | case 3:
403 | return formatNumber(((data.irrigated[4] + data.dry[4]) / (data.irrigated[0] + data.dry[0])).toFixed(2));
> 404 | break;
| ^
405 | }
406 | },
407 | CalculateCost_Yield(cate, data, fluctuation) {
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:414:21:
412 | case 1 :
413 | return formatNumber((data.dry[4] / (data.dry[2] * fluctuation)).toFixed(2))
> 414 | break;
| ^
415 | case 2 :
416 | return formatNumber((data.irrigated[4] / (data.irrigated[2] * fluctuation)).toFixed(2))
417 | break;
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:417:21:
415 | case 2 :
416 | return formatNumber((data.irrigated[4] / (data.irrigated[2] * fluctuation)).toFixed(2))
> 417 | break;
| ^
418 | case 3:
419 | return formatNumber(((data.irrigated[4] + data.dry[4]) / ((data.irrigated[2] + data.dry[2]) * fluctuation)).toFixed(2));
420 | break;
error: Unreachable code (no-unreachable) at src/components/page/CropAnalysis/CropAnalysis.vue:420:21:
418 | case 3:
419 | return formatNumber(((data.irrigated[4] + data.dry[4]) / ((data.irrigated[2] + data.dry[2]) * fluctuation)).toFixed(2));
> 420 | break;
| ^
421 | }
422 | },
423 | CalculatePrice (priceFluctuate) {
22 errors found.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
warning in ./src/main.js
"export 'default' (imported as 'myFunc') was not found in './assets/js/function.js'
App running at:
- Local: http://localhost:8080
- Network: http://192.168.0.15:8080
Note that the development build is not optimized.
To create a production build, run npm run build.
package.json
{
"name": "crop_analysis",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"start": "nodemon watch server.js"
},
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.4.0",
"chart.js": "^2.9.3",
"chartjs-plugin-labels": "^1.1.0",
"core-js": "^2.6.11",
"extract-text-webpack-plugin": "^3.0.2",
"hchs-vue-charts": "^1.2.8",
"jest": "^21.2.0",
"jest-serializer-vue": "^0.3.0",
"jquery": "^3.4.1",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"nodemon": "^1.19.4",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"popper": "^1.0.1",
"popper.js": "^1.16.1",
"portfinder": "^1.0.25",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sync-exec": "^0.6.2",
"vue": "^2.6.11",
"vue-custom-element": "^3.2.12",
"vue-html-to-paper": "^1.3.0",
"vue-print-nb": "^1.5.0",
"vue-print-nb-jeecg": "^1.0.9",
"vue-property-decorator": "^6.0.0",
"vue-resource": "^1.3.4",
"vue-style-loader": "^3.0.1",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-e2e-cypress": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-plugin-unit-jest": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^4.3.0",
"html-webpack-plugin": "^3.2.0",
"lint-staged": "^8.1.5",
"node-sass": "^4.13.1",
"sass-loader": "^7.1.0",
"ttf-loader": "^1.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
}
}
Well your friend didn't use Eslint or he just ignored it.
You can ignore it too.
Go to your root directory of your app.
There should be an vue.config.js file, if there isnt any file make one.
To deactivate eslint write in:
module.exports = {
lintOnSave: false
}
now stop your app and start it again with npm run serve you should not see any eslint errors now.
These aren't "real" errors, its just , how to say, "beauty" errors, he did not follow the best practice how to write clean code.
Related
Jest - I have a nested error when more than one file
I have two test files, when I rename and comment one of them, the test will pass successfuly, otherwise will always throw this error: FAIL src/features/user/auth/register.resolver.test.ts (10.045 s) ● Register › a new user with a valid form › call register resolver and return the registered user Tests cannot be nested. Test "encountered a declaration exception" cannot run because it is nested within "call register resolver and return the registered user". 28 | ` 29 | > 30 | describe('Login', () => { | ^ 31 | let dbConnection: Connection; 32 | let userRepository: UserRepository; 33 | at Env.it (node_modules/jest-jasmine2/build/jasmine/Env.js:566:17) at Object.<anonymous> (src/features/user/auth/login.resolver.test.ts:30:1) ● Register › a new user with a valid form › the new user is persisted in database expect(received).toMatchObject(expected) Matcher error: received value must be a non-null object Received has value: undefined 81 | }); 82 | > 83 | expect(user).toMatchObject({ | ^ 84 | id: expect.any(String), 85 | username: registerInput.username, 86 | email: registerInput.email, at Object.<anonymous> (src/features/user/auth/register.resolver.test.ts:83:20) ● Register › a new user with an invalid form › returns the errors Tests cannot be nested. Test "encountered a declaration exception" cannot run because it is nested within "returns the errors". 28 | ` 29 | > 30 | describe('Login', () => { | ^ 31 | let dbConnection: Connection; 32 | let userRepository: UserRepository; 33 | at Env.it (node_modules/jest-jasmine2/build/jasmine/Env.js:566:17) at Object.<anonymous> (src/features/user/auth/login.resolver.test.ts:30:1) FAIL src/features/user/auth/login.resolver.test.ts (10.298 s) ● Login › with a valid form › call login resolver and return the logged in user Tests cannot be nested. Test "encountered a declaration exception" cannot run because it is nested within "call login resolver and return the logged in user". 27 | ` 28 | > 29 | describe("Register", () => { | ^ 30 | let dbConnection: Connection; 31 | let userRepository: UserRepository; 32 | at Env.it (node_modules/jest-jasmine2/build/jasmine/Env.js:566:17) at Object.<anonymous> (src/features/user/auth/register.resolver.test.ts:29:1) ● Login › with an invalid form › returns an error [login] Tests cannot be nested. Test "encountered a declaration exception" cannot run because it is nested within "returns an error [login]". 27 | ` 28 | > 29 | describe("Register", () => { | ^ 30 | let dbConnection: Connection; 31 | let userRepository: UserRepository; 32 | at Env.it (node_modules/jest-jasmine2/build/jasmine/Env.js:566:17) at Object.<anonymous> (src/features/user/auth/register.resolver.test.ts:29:1) Test Suites: 2 failed, 2 total Tests: 5 failed, 1 passed, 6 total Snapshots: 0 total Time: 11.143 s Ran all test suites. And here the test files: https://gist.github.com/srgrcp/01fbbd4df391a90c25c8c60622bc2514 If I'm not wrong, the error says: "the is nested within ", but these tests are in different files.
New to Web development not sure how to fix reactjs errors [closed]
Closed. This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 1 year ago. Improve this question These is a long page full for error messages and I cannot get hold of the person teaching this class been 2 weeks. I tried redoing it but I still got the same messages I do not know how or what to do in order to fix them. Here is the git hub link: https://github.com/SadiaSanam/petshop And these are the messages, how to I fix it? Because some of those pages I cannot even find.. TypeError: path.split is not a function get C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/utils/get.ts:6 TypeError: path.split is not a function get C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/utils/get.ts:6 3 | import isUndefined from './isUndefined'; 4 | 5 | export default (obj: any = {}, path: string, defaultValue?: unknown) => { > 6 | const result = compact(path.split(/[,[\].]+?/)).reduce( 7 | (result, key) => (isNullOrUndefined(result) ? result : result[key]), 8 | obj, 9 | ); View compiled (anonymous function) C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/useForm.ts:967 964 | 965 | const register: UseFormRegister<TFieldValues> = React.useCallback( 966 | (name, options) => { > 967 | const isInitialRegister = !get(fieldsRef.current, name); | ^ 968 | 969 | set(fieldsRef.current, name, { 970 | _f: { View compiled Login C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/src/components/Login.js:88 85 | <div className='form-control'> 86 | 87 | <label htmlFor='email'>Email</label> > 88 | <input type='email' name='email' id='email' ref={register( {required:true}) } /> | ^ 89 | { errors.email ? <span className='err'> email is required!</span> : null } 90 | 91 | <label htmlFor='password'>Password</label> View compiled renderWithHooks C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:14985 14982 | } 14983 | } 14984 | > 14985 | var children = Component(props, secondArg); // Check if there was a render phase update | ^ 14986 | 14987 | if (didScheduleRenderPhaseUpdateDuringThisPass) { 14988 | // Keep rendering in a loop for as long as render phase updates continue to View compiled mountIndeterminateComponent C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:17811 17808 | 17809 | setIsRendering(true); 17810 | ReactCurrentOwner$1.current = workInProgress; > 17811 | value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes); | ^ 17812 | setIsRendering(false); 17813 | } // React DevTools reads this flag. 17814 | View compiled beginWork C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:19049 19046 | switch (workInProgress.tag) { 19047 | case IndeterminateComponent: 19048 | { > 19049 | return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes); | ^ 19050 | } 19051 | 19052 | case LazyComponent: View compiled HTMLUnknownElement.callCallback C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3945 3942 | function callCallback() { 3943 | didCall = true; 3944 | restoreAfterDispatch(); > 3945 | func.apply(context, funcArgs); | ^ 3946 | didError = false; 3947 | } // Create a global error event handler. We use this to capture the value 3948 | // that was thrown. It's possible that this error handler will fire more View compiled invokeGuardedCallbackDev C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3994 3991 | // errors, it will trigger our global error handler. 3992 | 3993 | evt.initEvent(evtType, false, false); > 3994 | fakeNode.dispatchEvent(evt); | ^ 3995 | 3996 | if (windowEventDescriptor) { 3997 | Object.defineProperty(window, 'event', windowEventDescriptor); View compiled invokeGuardedCallback C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:4056 4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) { 4054 | hasError = false; 4055 | caughtError = null; > 4056 | invokeGuardedCallbackImpl$1.apply(reporter, arguments); 4057 | } 4058 | /** 4059 | * Same as invokeGuardedCallback, but instead of returning an error, it stores View compiled beginWork$1 C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:23964 23961 | } // Run beginWork again. 23962 | 23963 | > 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes); | ^ 23965 | 23966 | if (hasCaughtError()) { 23967 | var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`. View compiled performUnitOfWork C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22776 22773 | 22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) { 22775 | startProfilerTimer(unitOfWork); > 22776 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes); | ^ 22777 | stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true); 22778 | } else { 22779 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes); View compiled workLoopSync C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22707 22704 | function workLoopSync() { 22705 | // Already timed out, so perform work without checking if we need to yield. 22706 | while (workInProgress !== null) { > 22707 | performUnitOfWork(workInProgress); 22708 | } 22709 | } 22710 | View compiled renderRootSync C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22670 22667 | 22668 | do { 22669 | try { > 22670 | workLoopSync(); | ^ 22671 | break; 22672 | } catch (thrownValue) { 22673 | handleError(root, thrownValue); View compiled performSyncWorkOnRoot C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22293 22290 | } 22291 | } else { 22292 | lanes = getNextLanes(root, NoLanes); > 22293 | exitStatus = renderRootSync(root, lanes); | ^ 22294 | } 22295 | 22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) { View compiled (anonymous function) C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11327 11324 | var callback = _queue[i]; 11325 | 11326 | do { > 11327 | callback = callback(_isSync2); | ^ 11328 | } while (callback !== null); 11329 | } 11330 | }); View compiled unstable_runWithPriority C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/scheduler/cjs/scheduler.development.js:468 465 | currentPriorityLevel = priorityLevel; 466 | 467 | try { > 468 | return eventHandler(); | ^ 469 | } finally { 470 | currentPriorityLevel = previousPriorityLevel; 471 | } View compiled runWithPriority$1 C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11276 11273 | 11274 | function runWithPriority$1(reactPriorityLevel, fn) { 11275 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel); > 11276 | return Scheduler_runWithPriority(priorityLevel, fn); 11277 | } 11278 | function scheduleCallback(reactPriorityLevel, callback, options) { 11279 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel); View compiled flushSyncCallbackQueueImpl C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11322 11319 | try { 11320 | var _isSync2 = true; 11321 | var _queue = syncQueue; > 11322 | runWithPriority$1(ImmediatePriority$1, function () { | ^ 11323 | for (; i < _queue.length; i++) { 11324 | var callback = _queue[i]; 11325 | View compiled flushSyncCallbackQueue C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11309 11306 | Scheduler_cancelCallback(node); 11307 | } 11308 | > 11309 | flushSyncCallbackQueueImpl(); 11310 | } 11311 | 11312 | function flushSyncCallbackQueueImpl() { View compiled discreteUpdates$1 C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22420 22417 | if (executionContext === NoContext) { 22418 | // Flush the immediate callbacks that were scheduled during this batch 22419 | resetRenderTimer(); > 22420 | flushSyncCallbackQueue(); | ^ 22421 | } 22422 | } 22423 | } View compiled discreteUpdates C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3756 3753 | isInsideEventHandler = true; 3754 | 3755 | try { > 3756 | return discreteUpdatesImpl(fn, a, b, c, d); | ^ 3757 | } finally { 3758 | isInsideEventHandler = prevIsInsideEventHandler; 3759 | View compiled dispatchDiscreteEvent C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:5889 5886 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp); 5887 | } 5888 | > 5889 | discreteUpdates(dispatchEvent, domEventName, eventSystemFlags, container, nativeEvent); 5890 | } 5891 | 5892 | function dispatchUserBlockingUpdate(domEventName, eventSystemFlags, container, nativeEvent) { View compiled
TO use react-hook-forms, theres some fix to work: The inputs fields calls the register function. This function has 2 params: register(field_name <- string, options <- object); In your case, you need to call it like that: <input type='email' name='email' id='email' ref={register("email", {required:true}) } /> <input type='password' name='password' id='password' ref={register("password", {required:true, minLength:6, maxLength: 10} )} /> You're calling the error object the wrong way. Thats how you should call it: const { register, handleSubmit, formState: { errors }, reset } = useForm(); The last error I found after the fix is about the way you call register function. You are setting the register at the ref property. According to the docs, you should just set the register in the component, and this will return all the props: <input type='email' id='email' {...register("email", {required:true}) } /> Here at the Sources, you can read and deep in "why am I doing this?" =): register(): https://react-hook-form.com/api/useform/register errors: https://react-hook-form.com/api/useformstate/errormessage I'll add here some tips to help you found the solution to new errors: Make a path to discover where to focus: When you have an error, you need to found exactly what's causing it. In your case, the console was accusing a file that isn't even in your main folders (that was a dependency). In that case, remove code, try to delete some code, and see if the project works. If works, you now is somewhere there, and do again filtering the removed code. Go to the official docs/demos and compare your code: I've never used react-hook-forms, But a look at the docs helps me to find the errors.
ExpressJs Uncaught TypeError: Cannot read property 'prototype' of undefined view.js
This is my first time working with React + ExpressJs + Typescript I got the following error in the node_modules which I'm not sure where it come from. I already installed the types package for both node and expressjs. TypeError: Cannot read property 'prototype' of undefined (anonymous function) Z:/Project/sandbox-app/node_modules/express/lib/response.js:42 39 | * #public 40 | */ 41 | > 42 | var res = Object.create(http.ServerResponse.prototype) 43 | 44 | /** 45 | * Module exports. Here is the code where I setup the Express server import express from "express" import bodyParser from "body-parser" const app = express() const port = 3000 app.use(bodyParser.json()) app.use( bodyParser.urlencoded({ extended: true, }) ) app.get("/", (request, response) => { response.json({ info: "Node.js, Express, and Postgres API" }) }) app.listen(port, () => { console.log(`App running on port ${port}.`) }) Full stack trace TypeError: Cannot read property 'prototype' of undefined (anonymous function) Z:/Project/sandbox-app/node_modules/express/lib/response.js:42 39 | * #public 40 | */ 41 | > 42 | var res = Object.create(http.ServerResponse.prototype) 43 | 44 | /** 45 | * Module exports. View compiled ./node_modules/express/lib/response.js http://localhost:3000/static/js/0.chunk.js:81472:30 __webpack_require__ Z:/Project/sandbox-app/webpack/bootstrap:851 848 | 849 | __webpack_require__.$Refresh$.init(); 850 | try { > 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | __webpack_require__.$Refresh$.cleanup(moduleId); 854 | } View compiled fn Z:/Project/sandbox-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ./node_modules/express/lib/express.js Z:/Project/sandbox-app/node_modules/express/lib/express.js:22 __webpack_require__ Z:/Project/sandbox-app/webpack/bootstrap:851 848 | 849 | __webpack_require__.$Refresh$.init(); 850 | try { > 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | __webpack_require__.$Refresh$.cleanup(moduleId); 854 | } View compiled fn Z:/Project/sandbox-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ./node_modules/express/index.js Z:/Project/sandbox-app/node_modules/express/index.js:11 __webpack_require__ Z:/Project/sandbox-app/webpack/bootstrap:851 848 | 849 | __webpack_require__.$Refresh$.init(); 850 | try { > 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | __webpack_require__.$Refresh$.cleanup(moduleId); 854 | } View compiled fn Z:/Project/sandbox-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ▶ 2 stack frames were collapsed. __webpack_require__ Z:/Project/sandbox-app/webpack/bootstrap:851 848 | 849 | __webpack_require__.$Refresh$.init(); 850 | try { > 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | __webpack_require__.$Refresh$.cleanup(moduleId); 854 | } View compiled fn Z:/Project/sandbox-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:1384:18 __webpack_require__ Z:/Project/sandbox-app/webpack/bootstrap:851 848 | 849 | __webpack_require__.$Refresh$.init(); 850 | try { > 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | __webpack_require__.$Refresh$.cleanup(moduleId); 854 | } View compiled checkDeferredModules Z:/Project/sandbox-app/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); > 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] Z:/Project/sandbox-app/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready > 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:75
How to resolve cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined contact-keeper/client/node_modules/express/lib/response.js:42 39 | * #public 40 | */ 41 | > 42 | var res = Object.create(http.ServerResponse.prototype) 43 | 44 | /** 45 | * Module exports.
try adding target: 'node' to your webpack config
Why do I get TypeError when I try adding express to my first react app
I have created my first react app using npx create-react-app my-app and started it. Now I want to add express into this react app. Hence I have added the below line in my index.js var express = require('express') Here is what my whole index.js looks like. The above is the only line that I have added, rest is exactly same as what I got from create-react-app import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; var express = require('express') // const helmet = require('helmet') // const app = express() // app.use(helmet()) ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. serviceWorker.unregister(); The error that I'm getting is TypeError: Unable to get property 'prototype' of undefined or null reference. The below is the full stacktrace of the error that I'm seeing in browser. And please note that there are no compilation issues. × TypeError: Unable to get property 'prototype' of undefined or null reference Anonymous function mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:58 55 | */ 56 | 57 | > 58 | var res = Object.create(http.ServerResponse.prototype); 59 | /** 60 | * Module exports. 61 | * #public View compiled ./node_modules/express/lib/response.js mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:1 > 1 | /*! 2 | * express 3 | * Copyright(c) 2009-2013 TJ Holowaychuk 4 | * Copyright(c) 2014-2015 Douglas Christopher Wilson View compiled __webpack_require__ mylocaldrivepath/react/my-app/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn mylocaldrivepath/react/my-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ./node_modules/express/lib/express.js mylocaldrivepath/react/my-app/node_modules/express/lib/express.js:27 __webpack_require__ mylocaldrivepath/react/my-app/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn mylocaldrivepath/react/my-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ./node_modules/express/index.js mylocaldrivepath/react/my-app/node_modules/express/index.js:10 __webpack_require__ mylocaldrivepath/react/my-app/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn mylocaldrivepath/react/my-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled ./src/index.js mylocaldrivepath/react/my-app/src/index.js:8 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | > 8 | var express = require('express') 9 | // const helmet = require('helmet') 10 | 11 | // const app = express() View compiled __webpack_require__ mylocaldrivepath/react/my-app/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn mylocaldrivepath/react/my-app/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 0 http://localhost:3000/static/js/main.chunk.js:388:1 __webpack_require__ mylocaldrivepath/react/my-app/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled checkDeferredModules mylocaldrivepath/react/my-app/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); > 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled webpackJsonpCallback mylocaldrivepath/react/my-app/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready > 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled Global code http://localhost:3000/static/js/main.chunk.js:1:2 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Any help on fixing this issue is greatly appreciated !
Typically express is placed outside of the src folder to serve your compiled client-side code; meanwhile, webpack-dev-server creates a development server and compiles code on the fly; so in this case, since you're using the create-react-app and not utilizing server-side rendering, then you don't need express (for development). Instead, once you've compiled your code for production (via npm run build), you'll need some way to serve the assets. Typically, you'll have an app.js file that sits outside of the src folder and that will serve your compiled production folder (dist or build): const { resolve } = require("path"); const express = require("express"); const app = express(); const currentDirectory = process.cwd(); // current directory app.use(express.static("dist")); // express will serve up production assets app.get("*", (req, res) => res.sendFile(resolve(`${currentDirectory}/dist/index.html`)) ); // express will serve up the front-end index.html file if it doesn't recognize the route app.listen(8080, err => { if (!err) { console.log(`\nYour application is running on port 8080}\n`); } else { console.err(`\nUnable to start server: ${err}`); } }); For example: ├── dist | ├── css | | ├── main.[contenthash:8].css | | └── main.[contenthash:8].css.map | ├── js | | ├── main.[hash].js | | └── main.[hash].js.map | ├── media | | └── [hash].[ext] | └── favicon.ico | └── index.html | ├── public | ├── favicon.ico | └── index.html | ├── src | ├── actions | ├── components | ├── containers | ├── images | ├── pages | ├── reducers | ├── root | ├── routes | ├── styles | ├── types | ├── utils | └── index.js | └── app.js
I had the same problem and solved it! I was using Express.js and Node.js for backend and React.js for frontend and upon compiling the frontend I would get the error TypeError: http.ServerResponse is undefined I was using npx create-react-app for creating react frontend and as a result some of the files are not compiled properly. when I used create-react-app for creating react frontend it all got set! So a better practice is to create your react app using create-react-app instead of using npx create-react-app Hope this helps!