Following is my code in which npm is throwing error. Earlier it was working fine, but when I have copied the same code in different directory, ran npm install and now trying to run npm start. It is throwing error :
ERROR in ./www/plugins/entry.js
Module build failed: SyntaxError: Unexpected token (7:8)
5 | import routes from './routes/routes'
6 |
> 7 | render((<Router history={browserHistory} routes={routes} />),document.getElementById('app'))
Code is :
import React from 'react';
import { render } from 'react-dom';
import { Router , browserHistory } from 'react-router';
import routes from './routes/routes';
render((<Router history={browserHistory} routes={routes} />), document.getElementById('app'));
package.json
{
"name": "userapp3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --config www/server/webpack.js --watch --colors",
"webp": "concurrently 'node www/server/index.js' 'webpack --config www/server/webpack.js --watch --colors'",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"extract-text-webpack-plugin": "^1.0.1",
"minifier": "^0.8.0",
"node-sass": "^3.8.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-helmet": "^3.3.0",
"react-router": "^2.5.2",
"react-select2": "^4.0.1",
"sass-loader": "^4.0.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1"
}
}
Related
I'm trying to create a fullstack app template with react, babel, and webpack. However, when I start up the app using nodemon, any changes I make to react components when saved are not reflected on my localhost. Not even my css changes show up.
Attached is my package.json. I typically use npm start to serve to local host 8080.
{
"name": "reactappscratch",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch src --exec 'webpack-dev-server --mode development --hot --open'",
"build": "webpack --mode production",
"dev": "nodemon --watch server --exec 'npm run start:webpack'",
"start:webpack": "webpack --watch --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/material": "^5.11.7",
"css-loader": "^6.7.3",
"morgan": "^1.10.0",
"pg": "^8.9.0",
"style-loader": "^3.3.1"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
I'm getting the following error in my react project:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
react.development.js:1447
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
__webpack_require__
<anonymous>
<anonymous>
The project consists of 2 separate parts, Components and Onboarding. Onboarding uses Components as a dependency.
Inside Components, I have 2 package.json files, one in the root and one in src.
Root package.json:
{
"name": "My Project",
"version": "2.0.0",
"description": "Main React Library",
"main": "dist/index.js",
"module": "dist/index.js",
"bundleDependencies": false,
"deprecated": false,
"license": "MIT",
"private": true,
"sideEffects": false,
"scripts": {
"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files"
},
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.18.10",
"#babel/plugin-syntax-flow": "^7.18.6",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.18.10",
"#babel/preset-flow": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#types/node": "^18.7.15",
"typescript": "^4.8.2",
"reactstrap": "^9.1.4",
"react-quill": "^2.0.0"
},
"dependencies": {}
}
package.json inside src:
{
"name": "My Project",
"version": "2.0.0",
"description": "Main React Library",
"main": "index.js",
"module": "index.js",
"bundleDependencies": false,
"deprecated": false,
"license": "MIT",
"private": true,
"sideEffects": false,
"dependencies": {
"#mui/icons-material": "5.4.1",
"#mui/material": "5.4.1",
"#mui/styled-engine": "5.4.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "6.2.1",
"axios": "^0.27.2",
"uuid": "^9.0.0",
"bootstrap": "^5.2.0"
}
}
Inside Onboarding, I also have 2 package.json files, one in the root and one in src:
Root package.json:
{
"name": "onboarding-ui",
"description": "",
"version": "0.1.0",
"scripts": {
"start": "sls offline --aws-profile",
"deploy": "sls deploy -s stage --aws-profile",
"test": "sls invoke test"
},
"devDependencies": {
"aws-sdk-mock": "^5.7.0",
"serverless": "^3.21.0",
"serverless-cloudfront-invalidate": "^1.11.0",
"serverless-latest-layer-version": "^2.1.1",
"serverless-mocha-plugin": "^1.12.0",
"serverless-offline": "^6.8.0",
"serverless-prune-plugin": "^1.4.3",
"serverless-s3-sync": "^1.14.4",
"serverless-scriptable-plugin": "^1.0.5"
}
}
package.json inside src:
{
"name": "onboarding",
"version": "0.2.17",
"private": true,
"author": "Me",
"license": "MIT",
"description": "presentation layer.",
"engines": {
"node": "14 || 15 || 16",
"npm": ">=6"
},
"dependencies": {
"#asseinfo/react-kanban": "2.2.0",
"#emotion/cache": "11.7.1",
"#emotion/react": "11.7.1",
"#emotion/styled": "11.6.0",
"#mui/icons-material": "5.4.1",
"#mui/material": "5.4.1",
"#mui/styled-engine": "5.4.1",
"#mui/styles": "^5.9.2",
"#react-jvectormap/core": "1.0.1",
"#react-jvectormap/world": "1.0.0",
"#testing-library/jest-dom": "5.16.2",
"#testing-library/react": "12.1.2",
"#testing-library/user-event": "13.5.0",
"accounted-ui": "../../Components/dist",
"axios": "^0.27.2",
"chart.js": "3.4.1",
"chroma-js": "2.4.2",
"crypto-js": "^4.1.1",
"dropzone": "5.9.2",
"flatpickr": "4.6.9",
"formik": "^2.2.9",
"html-react-parser": "1.4.8",
"i18next": "^21.9.1",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-http-backend": "^1.4.1",
"lodash.debounce": "^4.0.8",
"prop-types": "15.8.1",
"react": "17.0.2",
"react-chartjs-2": "3.0.4",
"react-confetti": "^6.1.0",
"react-csv": "^2.2.2",
"react-debounce-input": "^3.3.0",
"react-dom": "17.0.2",
"react-flatpickr": "3.10.7",
"react-github-btn": "1.2.1",
"react-i18next": "^11.18.5",
"react-images-viewer": "1.7.1",
"react-quill": "1.3.5",
"react-router-dom": "6.2.1",
"react-scripts": "5.0.0",
"react-table": "7.7.0",
"react-toastify": "^9.0.3",
"stylis": "4.0.13",
"uuid": "8.3.2",
"web-vitals": "2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build:dev": "dotenv -e .env.dev react-scripts build",
"build:prod": "dotenv -e .env.prod react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"accounted-ui": "../../Components/dist", // this is how I'm pulling in the `Components` folder
"dotenv-cli": "^5.1.0",
"eslint": "8.8.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"prettier": "2.5.1"
}
}
The project is using Material UI, which I suspect might also have something to do with this. I tried many suggestions but nothing has worked so far. Would appreciate it if anyone can help with this.
I updated all the packages in my project. And upgrade vue 3.
After the done with updates there is a problem in my code.
I cannot use Vue.use(VueCompositionAPI);
In the old version of the project I call it from import VueCompositionAPI from '#vue/composition-api';
but this package is not compatible with due 3 anymore so I cannot call it.
What shouldd I do?
package.json:
{
"name": "front",
"version": "1.0.0",
"description": "Frontend",
"main": ".eslintrc.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"repository": {
"type": "git",
},
"keywords": [
"fdm"
],
"author": "etc",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.1",
"#jsonforms/core": "^2.5.2",
"#jsonforms/vue": "^2.5.2",
"#jsonforms/vue-vanilla": "^2.5.2",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-e2e-nightwatch": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-pwa": "^5.0.8",
"#vue/cli-plugin-router": "^5.0.8",
"#vue/cli-plugin-unit-mocha": "^5.0.8",
"#vue/cli-plugin-vuex": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/eslint-config-airbnb": "^6.0.0",
"#vue/test-utils": "^2.0.2",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chai": "^4.3.6",
"chromedriver": "^103.0.0",
"core-js": "^3.23.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^9.2.0",
"geckodriver": "^3.0.2",
"json-schema-ref-parser": "^9.0.9",
"jsonpath": "^1.1.1",
"lodash": "^4.17.21",
"node-sass": "^7.0.1",
"npm": "^8.13.2",
"register-service-worker": "^1.7.2",
"sass-loader": "^13.0.2",
"vue": "^3.2.37",
"vue-axios": "^3.4.1",
"vue-bootstrap4-table": "^1.1.11",
"vue-router": "^4.1.1",
"vue-sorted-table": "^1.3.0",
"vue-template-compiler": "^2.7.4",
"vuedraggable": "^2.24.3",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"eslint": "^8.19.0"
}
}
my main.js:
import Vue from 'vue';
import { BootstrapVue } from 'bootstrap-vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import SortedTablePlugin from 'vue-sorted-table';
import {
faSpinner, faSortUp, faSortDown, faSort, faFilter, faCheck, faTimesCircle, faUser, faPause,
faTrash,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(VueCompositionAPI);
// Install BootstrapVue
Vue.use(BootstrapVue);
Vue.use(SortedTablePlugin);
library.add(
faSpinner,
);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Look, vue 2 is build on the options API.
Vue 3 is build on composition API.
In order to use composition API in your Vue 2 app, you needed the #vue/composition-api package to run it.
What you did is: You upgraded to 3 (wich is by default composition API) and try to use the #vue/composition-api wich is only made for vue 2 in order to use the composition API. But vue 3 is by default composition API. I hope you get me here.
Also, since 2.7 you dont even need this package anymore
Also there is a note:
When you migrate to Vue 3, just replacing #vue/composition-api to vue
and your code should just work.
In vue 2.x you did:
const { ref, reactive } = VueCompositionAPI
In vue 3.x you do:
import { ref, reactive } from "vue"
or:
const { ref, reactive } = Vue;
I'm getting started with testing with this article Deploying our app
Here's my package.json:
{
"name": "complete-toolchain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "node tests/*.js",
"build": "npm run test && npx parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.21.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.14.0",
"eslint-plugin-react": "^7.21.5",
"parcel-bundler": "^1.12.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.0"
},
"dependencies": {
"date-fns": "^2.16.1",
"format-number": "^3.0.0",
"react": "^17.0.1",
"react-async-hook": "^3.6.2",
"react-dom": "^17.0.1"
}
}
I get error when I run npm run test:
Cannot find module 'C:\Users\x\complete-toolchain\tests\*.js'
Why doesn't it understand this? Of course it works with "test": "node tests/nasa-feed.test.js",.
Below I have a sample test for a Typescript project. I'm using mocha chai to do the testing. The test case is blank for now.
import {KafkaConsumer} from '../infrastructure/delivery/kafka/kafka-consumer';
import {expect} from 'chai';
import {describe, it} from 'mocha';
describe('KafkaConsumer Initialization', () => {
it('should initialize KafkaConsumer', () => {
})
})
When I run the test I get the following error:
import {describe} from 'mocha';
^
SyntaxError: Unexpected token {
Any idea why this might be? If I change line 3 to import 'mocha'; I a similar SyntaxError. Without that line, describe() and it() are not defined
Below is my package.json file.
{
"name": "wss",
"version": "0.0.0",
"private": true,
"main": "dist/index.js",
"scripts": {
"tsc": "tsc",
"start": "node --inspect=5858 -r ts-node/register ./src/index.ts",
"start:watch": "nodemon",
"build": "tsc",
"prod": "tsc && npm run postbuild && node ./dist/index.js",
"postbuild": "npm run copy-files",
"copy-files": "copyfiles -u 1 ./src/**/*.js dist",
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'",
"test:watch": "nodemon --exec npm test"
},
"nyc": {
"require": [
"ts-node/register"
],
"include": [
"src/**/*.ts"
],
"extension": [
".ts"
],
"reporter": [
"lcov",
"text"
],
"sourceMap": true,
"instrument": true
},
"dependencies": {
"#types/dotenv": "^6.1.1",
"#types/newrelic": "^5.11.0",
"#types/redis": "^2.8.21",
"aws-iot-device-sdk": "^2.2.4",
"axios": "^0.19.0",
"bluebird": "^3.5.5",
"chai-http": "^4.3.0",
"cookie-parser": "~1.4.3",
"copyfiles": "^2.2.0",
"dotenv": "^7.0.0",
"express": "~4.16.0",
"kafka-node": "^4.1.3",
"lodash": "^4.17.15",
"morgan": "~1.9.0",
"newrelic": "^5.11.0",
"redis": "^3.0.2",
"reflect-metadata": "^0.1.13",
"uuid": "^8.0.0"
},
"devDependencies": {
"#types/bluebird": "^3.5.27",
"#types/express": "^4.16.1",
"#types/jsonwebtoken": "^8.3.2",
"#types/lodash": "^4.14.150",
"#types/mocha": "^8.0.0",
"#types/node": "^11.13.14",
"#types/winston": "^2.4.4",
"chai": "^4.2.0",
"eslint": "^4.19.1",
"mocha": "^8.0.1",
"nodemon": "^1.18.11",
"nyc": "^14.1.1",
"ts-node": "^8.10.2",
"ts-node-dev": "^1.0.0-pre.41",
"tslint": "^5.16.0",
"typescript": "^3.9.2",
"typescript-eslint-parser": "^22.0.0"
}
}
RESOLVED! test script in package.json should be changed to:
"test": "mocha --require ts-node/register --watch-extensions ts './src/test/test.ts'",