I met an issue today with Vue.
In a function, I cannot get an element from a state.
But when I console.log() the state, the element is there.
How to fix it?
The code:
export const actions: ActionTree<IState, IState> = {
getUsers(context) {
// eslint-disable-next-line no-console
console.log('getUsers().context=', context);
// eslint-disable-next-line no-console
console.log('getUsers().context.state=', context.state);
// eslint-disable-next-line no-console
console.log('getUsers().context.state.baseURL=', context.state.baseURL);
// do something...
}
}
The console's log:
The 1st log is OK. I can see the value of the baseURL.
The 2nd log is OK too. can see the value of the baseURL.
The 3rd log is the problem. I cannot get the value of the baseURL!!!
package.json file:
{
"name": "ui",
"version": "2.0.0-rc",
"private": true,
"author": "Leo Wu <wudongyin#gmail.com>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.3.2",
"qs": "^6.9.1",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0",
"vuex": "^3.0.1",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-plugin-typescript": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"typescript": "~3.5.3",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/airbnb",
"#vue/typescript"
],
"rules": {
"max-len": "off",
"no-param-reassign": "off"
},
"parserOptions": {
"parser": "#typescript-eslint/parser"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Please let me know if you need more information.
Any help will be appreciated.
Thanks #acdcjunior and #TimWickstrom,
I finally found the cause and a solution. Here are the codes comparison. The main difference is where to load the config value.
The original code (problematic):
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app');
store.commit(UPDATE_BASE_URL, {
baseURL: process.env.VUE_APP_BASE_URL,
});
The working code:
new Vue({
router,
store,
vuetify,
created() {
this.$store.commit(UPDATE_BASE_URL, {
baseURL: process.env.VUE_APP_BASE_URL,
});
},
render: h => h(App),
}).$mount('#app');
Screenshot for the working code:
Hope it helps who meets a similar issue.
Related
The site runs but on the opening of two modals it throws the reference error and the page goes blank.
I am using react-quill for a text editor which is the cause of the problem. All of it works locally!! Just in the build it fails. and throws a Require not defined reference Error.
The React Quill File:
import React, { useState, useEffect } from 'react'
import 'react-quill/dist/quill.snow.css'
import { useQuill } from 'react-quilljs'
export default function RichTextEditor({
getHtml,
placeholder,
styles,
}: {
getHtml: (value: string) => void
placeholder: string
styles: React.CSSProperties
}) {
const modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
['clean'],
],
}
const { quill, quillRef } = useQuill({ modules })
const [value, setValue] = useState<string>(placeholder)
const [focused, setFocused] = useState<boolean>(false)
useEffect(() => {
if (quill) {
quill.clipboard.dangerouslyPasteHTML(placeholder)
quill.on('text-change', () => {
setValue(quillRef.current.firstChild.innerHTML) // Get innerHTML using quillRef
})
}
}, [quill])
getHtml(value)
return (
<div style={styles}>
<div ref={quillRef} />
</div>
)
}
I tried adding 'react-quilljs' to the defineConfig: optimizeDeps but its not helping.
Package.json:
{
"version": "0.1.0",
"homepage": "./",
"private": true,
"scripts": {
"dev": "VITE_APP_ENV=\"beta\" vite",
"build": "VITE_APP_ENV=\"beta\" vite build",
"build:beta": "VITE_APP_ENV=\"beta\" vite build",
"build:prod": "REACT_APP_ENV=\"prod\" vite build",
"lint": "eslint",
"preview": "vite preview",
"test": "echo \"All tests passed\""
},
"dependencies": {
"#content-api": "*",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-circular-progressbar": "^1.1.0",
"#types/react-dropzone": "^5.1.0",
"#types/react-gtm-module": "^2.0.1",
"#types/react-html-parser": "^2.0.2",
"#types/react-time-picker": "^4.0.2",
"#types/uuid": "^8.3.1",
"buffer": "^6.0.3",
"immer": "^9.0.6",
"react": "18.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-circular-progressbar": "^2.0.4",
"react-date-picker": "^8.4.0",
"react-dom": "18.1.0",
"react-dropzone": "^11.4.2",
"react-gtm-module": "^2.0.11",
"react-hot-toast": "^2.2.0",
"react-html-parser": "^2.0.2",
"react-query": "^3.34.15",
"react-quill": "^2.0.0",
"react-quilljs": "^1.3.3",
"react-responsive": "^9.0.0-beta.4",
"react-router-dom": "^6.2.1",
"react-scripts": "4.0.3",
"react-spinners": "^0.11.0",
"react-time-picker": "^4.4.3",
"source-map-explorer": "^2.5.2",
"styled-components": "^5.3.3",
"typescript": "^4.9.4",
"uuid": "^8.3.2",
"vite-plugin-svgr": "^2.2.2",
"web-vitals": "^1.0.1",
"zustand": "^3.5.13"
},
"devDependencies": {
"#rollup/plugin-babel": "^6.0.3",
"#rollup/plugin-commonjs": "^24.0.0",
"#types/quill": "^2.0.9",
"#types/react": "^18.0.0",
"#types/react-dom": "^18.0.8",
"#types/styled-components": "^5.1.15",
"#vitejs/plugin-react": "^2.2.0",
"vite": "^3.2.3"
}
}
I am using CRA to build a web app that also uses Typescript and Jest for testing (snapshot testing). I randomly am now getting the error Property 'toMatchSnapshot' does not exist on type 'Assertion'. across all my snapshot tests.
Here is an example test where I am getting this error:
import { BrowserRouter } from 'react-router-dom';
import renderer from 'react-test-renderer';
describe('<Button />', () => {
test('Button props with mandatory props', () => {
const tree = renderer
.create(
<BrowserRouter>
<Button text="Test Text" />
</BrowserRouter>
)
.toJSON();
expect(tree).toMatchSnapshot(); <-- Error here
});
}
I have tried various solutions such as updating Jest, and updating related packages and nothing seems to work.
My Package.json:
{
"name": "webapp",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "react-scripts start",
"cypress:open": "cypress open"
},
"dependencies": {
"#babel/core": "^7.19.1",
"#babel/plugin-syntax-flow": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.19.0",
"#react-spring/web": "^9.5.5",
"#types/socket.io-client": "^3.0.0",
"axios": "^0.27.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-router-dom": "^6.4.3",
"react-scripts": "^5.0.1",
"socket.io-client": "^4.5.1",
"uuid": "^9.0.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^13.0.3",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"#types/cypress-cucumber-preprocessor": "^4.0.1",
"#types/jest": "^29.0.3",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#types/react-test-renderer": "^18.0.0",
"autoprefixer": "^10.4.7",
"cypress": "^10.11.0",
"eslint": "^8.20.0",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.1.2",
"postcss": "^8.4.14",
"react-test-renderer": "^18.2.0",
"tailwindcss": "^3.1.6",
"ts-jest": "^29.0.1",
"typescript": "^4.8.3"
},
"jest": {
"clearMocks": true,
"transform": {
"^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
},
"testEnvironment": "jsdom"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"stepDefinitions": "cypress/e2e/**/*.ts"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
It looks like you have cypress installed, which seems to be conflicting with Jest's types. See Cypress causing type errors in jest assertions
I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance
I am writing a web app using React with Typescript. I recently started some refactoring of old code to clean things up, and recieved this error:
TypeError: ___WEBPACK_IMPORTED_MODULE_0__.commonSortTitles is undefined
This is the code that causes the error:
Bags.ts
-------------------------------------------
import { Bag, commonSortTitles } from '..';
// code here that does not affect the issue
export const bagSortTitles = [
...commonSortTitles,
'# of Magic Items',
'# of Items'
] as const;
And the export commonSortTitles is here:
common.ts
-------------------------------------------------------------------
export type SortDirection = typeof ascendingTitles[number];
export const commonSortTitles = [
'Created',
'Last Updated',
'Weight',
'Title'
] as const;
export const ascendingTitles = ['Ascending', 'Descending'] as const;
In this setup, the IDE correctly reports: Image of what the intellisense shows.
Interestingly, if I move the commonSortTitles to the Bags.ts file, it begins working fine.
Bags.ts (workaround)
-------------------------------------------
import { Bag } from '..';
// code here that does not affect the issue
const commonSortTitles = [
'Created',
'Last Updated',
'Weight',
'Title'
] as const;
export const bagSortTitles = [
...commonSortTitles,
'# of Magic Items',
'# of Items'
] as const;
This, however, means I have to duplicate the code for commonSortTitles in at least one other file, which I am working to avoid.
Here is my package.json file:
package.json
---------------------------------------------------------
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.20.7",
"#types/react": "^16.14.5",
"#types/react-dom": "^16.9.12",
"#types/react-google-recaptcha": "^1.1.1",
"#types/react-helmet": "^5.0.15",
"#types/react-redux": "^7.1.16",
"#types/react-router": "^5.1.13",
"#types/react-router-dom": "^5.1.7",
"axios": "^0.21.1",
"cross-env": "^7.0.3",
"enzyme": "^3.11.0",
"jquery": "^3.6.0",
"node-sass": "^4.14.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-google-recaptcha": "^2.0.1",
"react-helmet": "^6.0.0",
"react-redux": "^7.2.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"typescript": "^4.2.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "tslint src/**/*.ts",
"lint:fix": "npm run lint -- --fix"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/redux-logger": "^3.0.7",
"#typescript-eslint/eslint-plugin": "^4.20.0",
"#typescript-eslint/eslint-plugin-tslint": "^4.20.0",
"#typescript-eslint/parser": "^4.20.0",
"eslint": "^7.23.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^32.3.0",
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-react-hooks": "^4.2.0",
"react-lorem-ipsum": "^1.4.9"
}
}
Can anyone tell me what it is that might be causing this? It feels to me like this might be an issue with the React version, but I can't fathom why it hasn't come up until just now (since all of this code was in the project previously, I just moved some things around)
EDIT:
Here is the index.ts for the folder these files are in '/components':
/components/index.ts
-------------------------
export * from './common';
export * from './Bags';
// additional exports that are unrelated
And here is the index file from the parent folder to that one:
index.ts
-----------------------------
export * from './components';
export * from './models';
export * from './redux';
Bypassing the index by directly importing from ./common.ts does indeed stop the error from occurring. Importing from '.' also works. Is there an issue with my import strategy?
I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-free": "^5.13.0",
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.28",
"#types/react": "^16.9.21",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.
Are you trying to use class or functional components, you have some errors in your code.
Class components should look like this:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
Functional components should look like this:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}