I am on project in Vue2 and use element-ui, but we want upgrade our project to Vue3. For this we need to pass on Element-plus (element-ui doesn't compatible with Vue3).
We successfully pass on Vue3 but when we want use element comp we have always the same prob. An error appear in console and I don't understand why. I suspect a problem of translation to my SFC files into renderer function with vue-loader.
My test page:
<template>
<div id="app">
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
/>
</div>
</template>
<script>
const default_layout = "default";
export default {
name: "App",
components: {
},
data() {
return {
value1: null
};
},
vue.config.js:
module.exports = {
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias.set("vue", "#vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
};
});
}
};
depencies in package.json:
"dependencies": {
"#ag-grid-enterprise/all-modules": "^25.3.0",
"#vue/compat": "^3.1.0",
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-vue": "^25.3.0",
"core-js": "^3.6.5",
"element-plus": "^1.1.0-beta.9",
"highcharts": "^8.1.2",
"highcharts-vue": "^1.3.5",
"object-assign-deep": "^0.4.0",
"rfdc": "^1.1.4",
"rollup": "^2.28.2",
"v-tooltip": "^2.1.3",
"vue": "^3.1.0",
"vue-class-component": "^7.2.3",
"vue-click-outside": "^1.1.0",
"vue-debounce": "^2.5.7",
"vue-i18n": "^9.1.7",
"vue-loader": "^16.0.0",
"vue-numeric": "^2.3.0",
"vue-property-decorator": "^8.5.0",
"vue-router": "^4.0.11",
"vue-simple-svg": "^2.0.2",
"vue-toastification": "^1.7.6"
},
"devDependencies": {
"#babel/core": "^7.10.3",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-buble": "^0.21.3",
"#rollup/plugin-commonjs": "^17.1.0",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-replace": "^2.3.3",
"#storybook/addon-actions": "^6.1.21",
"#storybook/addon-docs": "^6.1.21",
"#storybook/addon-essentials": "^6.1.21",
"#storybook/addon-links": "^6.0.26",
"#storybook/vue": "^6.1.21",
"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-eslint": "~4.5.13",
"#vue/cli-service": "~4.5.13",
"#vue/compiler-sfc": "^3.2.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-preset-vue": "^2.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"node-sass": "^4.14.1",
"postcss": "^8.2.8",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-includepaths": "^0.2.4",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1"
},
And the error I have in console:
error
For information I successfully make it work in new project start in Vue.
Related
I created a new React Native project and used Jest testing, it goes very well. But when I try it in an existing app it couldn't work, instead it gave me the following error.I suspect it is a configuration error that caused this problem:
Error
SyntaxError: Unexpected token 'export'
4 | //Import React
5 | import React, {useEffect, useState} from 'react';
> 6 | import { StackActions, NavigationActions } from 'react-navigation';
| ^
7 | import {useSelector, useDispatch} from 'react-redux';
8 | import {changeVoucherCategory} from '../../../actions';
9 | //Import all required component
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/Screen/drawerScreens/Profile/ProfileScreen.js:6:1)
Below are some of my files
package.json
{
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "react-scripts start",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build:ios": "react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/IGBFAMILY/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"#babel/runtime": "^7.14.0",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/cli-platform-ios": "^4.13.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^6.0.0",
"#react-navigation/bottom-tabs": "^5.11.2",
"#react-navigation/material-top-tabs": "^5.3.10",
"#react-navigation/native": "^5.8.10",
"#react-navigation/stack": "^5.12.8",
"#sentry/react-native": "^2.3.0",
"aws-sdk": "^2.897.0",
"babel-preset-react-app": "^7.0.0",
"base64-arraybuffer": "^0.2.0",
"jest-cli": "^26.6.3",
"json-groupby": "^1.1.0",
"moment": "^2.29.1",
"query-string": "^7.0.0",
"react": "16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.64.0",
"react-native-barcode-mask": "^1.2.4",
"react-native-base64": "^0.2.1",
"react-native-camera": "^3.43.3",
"react-native-checkbox-lite": "^1.0.2",
"react-native-countdown-component": "^2.7.1",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^8.1.3",
"react-native-elements": "^3.3.1",
"react-native-firebase": "^5.6.0",
"react-native-flatlist-slider": "^1.0.5",
"react-native-fs": "^2.17.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-tabs": "^4.1.2",
"react-native-mime-types": "^2.3.0",
"react-native-modal-dropdown": "^1.0.0",
"react-native-modal-overlay": "^1.3.1",
"react-native-passmeter": "0.0.5",
"react-native-phone-number-input": "^2.0.0",
"react-native-qrcode-svg": "^6.0.6",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-sha256": "^1.3.6",
"react-native-snap-carousel": "^3.9.1",
"react-native-sqlite-storage": "^5.0.0",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.16.0",
"react-native-ui-xg": "0.0.6",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^11.4.0",
"react-navigation": "^4.4.2",
"react-navigation-drawer": "^2.5.2",
"react-navigation-stack": "^2.8.4",
"react-redux": "^7.2.3",
"react-scripts": "^4.0.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "7.11.6",
"#babel/preset-env": "^7.14.1",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "^26.6.3",
"eslint": "6.8.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "^16.14.0"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
]
}
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset',"#babel/react", "#babel/env"],
};
App-test.js
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import App from '../src/App';
it('renders correctly', () => {
renderer.create(<App />);
});
I had tried many accepted answers on StackOverflow and internet but no luck on solving this problem.These are some of the links I can remember of, there might be a little unrelated because I faced the same problem with other modules apart from #react-navigation:
https://stackoverflow.com/a/59802557/14792325
https://stackoverflow.com/a/54463740/14792325
https://stackoverflow.com/a/55803188/14792325
https://stackoverflow.com/a/43197503/14792325
https://lifesaver.codes/answer/react-native-syntaxerror-unexpected-token-import
Can anyone help me to identify my mistakes? Thanks a lot.
I'm developing react js application with material ui components.
In my application I haven't used redux.
It's everything working fine. But when I try to implement material ui autocomplete, it's not working in webpack. It's throwing this error
This is the sample code which I try to add to my application. https://codesandbox.io/s/test-material-ui-autocomplete-o3uic
Uncaught TypeError: Object(...) is not a function
at useAutocomplete (useAutocomplete.js:241)
at Autocomplete (Autocomplete.js:382)
at renderWithHooks (react-dom.development.js:2876)
at updateForwardRef (react-dom.development.js:3032)
at beginWork$1 (react-dom.development.js:3453)
at HTMLUnknownElement.callCallback (react-dom.development.js:124)
at Object.invokeGuardedCallbackDev (react-dom.development.js:144)
at invokeGuardedCallback (react-dom.development.js:159)
at beginWork$$1 (react-dom.development.js:4397)
at performUnitOfWork (react-dom.development.js:4195)
These are the packages I installed in my application
"dependencies": {
"#babel/core": "^7.8.0",
"#babel/plugin-proposal-class-properties": "^7.8.0",
"#babel/preset-react": "^7.8.0",
"#babel/runtime": "^7.0.0-beta.55",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.45",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.19.2",
"babel-loader": "^8.0.6",
"bootstrap": "^4.4.1",
"css-loader": "^3.4.2",
"downshift": "^4.0.4",
"file-loader": "^5.0.2",
"file-saver": "^2.0.2",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"material-icons-react": "^1.0.4",
"mui-datatables": "^2.0.0",
"notistack": "^0.9.7",
"npm": "^6.13.6",
"path": "^0.12.7",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.5",
"react-autosuggest": "^9.4.3",
"react-countdown-circle-timer": "^1.0.6",
"react-dom": "^16.12.0",
"react-excel-workbook": "0.0.4",
"react-html-table-to-excel": "^2.0.0",
"react-idle-timer": "^4.2.12",
"react-loader-spinner": "^3.1.5",
"react-material-ui-form-validator": "^2.0.9",
"react-responsive": "^8.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-virtualized": "^9.21.2",
"react-xlsx-workbook-dynamic-column-width": "0.0.2",
"reactstrap": "^8.2.0",
"style-loader": "^1.1.2",
"styled-components": "^4.4.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
Kindly please help me in this.
Ran into this exact error myself. #material-ui/lab#4.0.0-alpha.45 has a peer dependency of #material-ui/core#^4.9.0, and they apparently really seem to mean it. You appear locked at #material-ui/core#^4.8.3, and I would suggest upgrading:
yarn upgrade #material-ui/core#^4.9.0
See the exact package.json here.
For some reason my ide is printing out 'Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag' for the following react code. I don't understand why it's printing that error since the component it's referring to is wrapped in an enclosing parent tag the <TableBody> tag specifically.
/* #flow */
import React from 'react'
import TableBody from '#material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'
type RanksType = {
_id: string | number,
rankName: string,
members: Array<MembersType>
};
export default (props: {
members: MembersType
}) => (
<TableBody>
{props.members.map(({
_id,
rankName,
members,
}: RanksType) => (
<Roster <---specifically refering to this element
key={_id}
rank={rankName}
members={members}
/>
))}
</TableBody>
)
Package.json
{
"name": "novacms",
"private": true,
"scripts": {
"start": "meteor --settings settings-production.json --port $IP:$PORT",
"dev": "meteor --settings settings-development.json --port $IP:$PORT",
"test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.42",
"#novacms/assign": "^1.0.0",
"#novacms/dependancy-injector": "^1.0.0",
"#novacms/event-store": "^1.0.0",
"#novacms/extend": "^1.0.0",
"#novacms/extendschema": "^1.0.1",
"#novacms/has": "^1.0.0",
"#novacms/pipe": "^1.0.0",
"#novacms/type-check": "^1.0.0",
"#material-ui/core": "^1.0.0-rc.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"bcrypt-nodejs": "0.0.3",
"event-emitter": "^0.3.5",
"faker": "^4.1.0",
"lodash": "^4.17.5",
"md5": "^2.2.1",
"meteor-apihelper": "^1.0.0",
"meteor-node-stubs": "^0.3.3",
"mobx": "^3.6.1",
"mobx-react": "^4.4.2",
"moment": "^2.21.0",
"npm": "^5.10.0",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router": "^4.2.0",
"react-storybook": "^1.0.0",
"recompose": "^0.26.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"simpl-schema": "^1.4.2",
"simpl-schema-mockdoc": "^1.0.5",
"sinon": "^4.5.0",
"spacejam": "^1.6.1"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"chai": "^4.1.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-meteor": "^5.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-flowtype": "^2.46.3"
},
"parser": "babel-eslint"
}
VSCode config
{
"files.eol": "\r\n",
"editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
"eslint.workingDirectories": [
"./src",
"./client",
"./imports",
"./server"
],
"react.beautify.onSave": true,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"javascript.validate.enable": false,
"javascript.format.enable": false,
}
.babelrc
{
"plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}
I had a very similar issue.
Firstly delete (rename) your .babelrc file which you use (remove where ever you set it).
If storybook can't find that file, then it will use its own settings. This worked for me to prove that it was that file that caused the issue.
If this is the same for you then create a new .babelrc file, and place it into the storybook folder. Storybook will now use this and your project can continue to use the existing one.
The tricky part is finding the config setting in you existing .babelrc file that is breaking storybook - for me it was the react-hot-load/babel, but you don't have that listed.
My file ended up with only #babel/plugin-proposal-class-properties and #babel/plugin-proposal-rest-spread for plugins.
My programmatic navigation in the component using the vue-router is not working. After the successfull login I want redirect it to the dashboard page. But nothing happens...
Relevant code - the router:
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '#/components/Login'
import Dashboard from '#/components/Dashboard'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'login',
component: Login,
beforeEnter: (to, from, next) => {
if (store.getters.isAuthenticated) {
// if user is already authenticated,
// redirect it to the dashboard
next('/dashboard') // it works
} else {
next()
}
}
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (store.getters.isAuthenticated) {
next()
} else {
// if user is not authenticated,
// redirect it to the login
next('/login') // it works
}
}
}
]
})
Method in component:
userLogin () {
this.authorizeUser({
name: this.user.name,
pass: this.user.pass
}).then(result => {
console.log('redirected to dashboard')
this.$router.push('dashboard') // this doesn't work
})
}
Package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"amazon-cognito-identity-js": "^1.31.0",
"axios": "^0.17.1",
"numeral": "^2.0.6",
"sweetalert2": "^7.4.0",
"vee-validate": "^2.0.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.4.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.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",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.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.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
No errors there, but no action is taken also - I'm still staying on the login page. What am I missing?
EDIT:
This works: this.$router.go('dashboard') Does it mean I'm using the old version?
Your approach to redirecting is correct and this.$router.push('dashboard') is the correct approach. With that in mind and based on our other tests, remove your beforeEnter from the route as this is the last point in the chain that could cause a problem and stop the redirect.
You'll have to isolate the issue as to why that's not working separately.
Try this:
this.$router.push({ path: '/dashboard' })
At least this works for me.
What's happening is that you are calling this.$router inside of a result => { } context so this is relative to that function. You have to save this from the outside context for it to work.
Put this const router = this.$router; before this.authorizeUser({ and then router.push('dashboard'); and then it will work.
I just want to use enzyme to test my react components.
Blow is my test code. Do nothing but only import some dependencies.
import React from 'react';
import { shallow } from 'enzyme';
import List from '../../../src/pages/index/components/List';
describe('List components test', () => {
});
When I exec command npm run test, the termial will call error message like this
I search this problem with google, I find similar problem in github, https://github.com/airbnb/enzyme/issues/47, but I have tried everything metion in this issue, it still error all the time( like setting external for webpack)
So, how can I solve this problem?
my dependencies's version is blow
"antd-mobile": "^1.0.0",
"classnames": "^2.2.5",
"fastclick": "^1.0.6",
"keymaster": "^1.6.2",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"rc-progress": "^2.2.2",
"react": "^15.6.1",
"react-addons-shallow-compare": "^15.6.0",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
"atool-build": "^1.0.2",
"atool-test": "^0.5.5",
"awesome-typescript-loader": "^3.2.3",
"babel-eslint": "^7.2.3",
"babel-plugin-import": "^1.1.0",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-runtime": "^6.11.6",
"clone": "^2.1.0",
"co-mocha": "^1.2.0",
"cross-env": "^3.1.4",
"debug": "^3.0.0",
"dora": "^0.3.3",
"dora-plugin-config-manager": "^0.2.3",
"dora-plugin-livereload": "^0.5.2",
"dora-plugin-simulator": "^0.2.0",
"dora-plugin-webpack": "^0.6.5",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-egg": "^3.2.0",
"eslint-config-react-app": "^0.6.2",
"eslint-plugin-flowtype": "^2.33.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.1",
"eslint-plugin-react": "^7.0.1",
"html-webpack-plugin": "^2.16.0",
"lint-staged": "^3.4.0",
"object-assign": "^4.1.1",
"postcss-plugin-px2rem": "^0.6.0",
"react-test-renderer": "^15.6.1",
"sinon": "^3.2.1",
"stylelint": "^8.0.0",
"stylelint-config-standard": "^17.0.0",
"svg-sprite-loader": "^0.3.0",
"ts-loader": "^2.3.2",
"tslint": "^5.6.0",
"tslint-eslint-rules": "^4.1.1",
"tslint-react": "^3.2.0",
"typescript": "^2.4.2",
"webpack-visualizer-plugin": "^0.1.11"