Related
The second I change
<style>
to
<style lang="scss">
I start getting errors in the terminal:
18% building modules 74/80 modules 6 active
...vue-router/src/components/Landing.vue(node:30664)
UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]:
The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.join (path.js:1039:7)
at getSassOptions (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/utils.js:166:37)
at Object.loader (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/index.js:43:55)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at Object.context.callback (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/vue-loader/lib/selector.js:21:8)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
(Use `node --trace-warnings ...` to show where the warning was
created) (node:30664) UnhandledPromiseRejectionWarning: Unhandled
promise rejection. This error originated either by throwing inside of
an async function without a catch block, or by rejecting a promise
which was not handled with .catch(). To terminate the node process on
unhandled promise rejection, use the CLI flag
`--unhandled-rejections=strict` (see
https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 2) (node:30664) [DEP0018] DeprecationWarning: Unhandled
promise rejections are deprecated. In the future, promise rejections
that are not handled will terminate the Node.js process with a
non-zero exit code.
I believe I have installed the dependencies needed, it appear from the trace that sass-loader may be an issue here.
I installed sass using the command
npm install -D sass-loader#^10.1.1 node-sass
Any tips would be much appreciated, as really not sure what the issue could be at this point.
Landing.vue
<template>
<div>
<h1>Agile Admin App</h1>
</div>
</template>
<style lang="scss">
h1 {
border: 1px solid black;
}
</style>
I also figured my package.json file would be of use, as it may be a version issue for something like webpack or sass-loader
{
"name": "myapp",
"version": "1.0.0",
"description": "My App",
"author": "email#email.email",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.21.1",
"vue": "^2.5.2",
"vue-router": "^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-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.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",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.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",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^5.0.0",
"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",
"sass-loader": "^10.1.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"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"
]
}
Did you followed this tutorial? https://vue-loader.vuejs.org/guide/pre-processors.html#sass
You may try
npm install -D sass-loader node-sass
Then, in your webpack config
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
This should do the trick.
Never got to the bottom of this sadly, even with the suggestions above. Ultimately someone at work suggested copying my custom code out, rebuilding the setup in the cli using vite, then reapplying my work. This appeared to fix the issue.
Doesn't really explain why it broke, but this was the fix in my case.
In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source
I am simply trying to follow a tutorial which tells me to install both node-sass and sass-loader. When I do I get the following error:
ERROR Failed to compile with 1 errors 6:21:28 PM
error in ./src/components/TodoList.vue
Module build failed: TypeError: this.getResolve is not a function
at Object.loader (C:\xampp\htdocs\projects\todo-vue\node_modules\sass-loader\dist\index.js:52:26)
# ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de47834","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TodoList.vue 4:14-377 13:3-17:5 14:22-385
# ./src/components/TodoList.vue
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
My package.json file
{
"name": "todo-vue",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Jethro Hazelhurst <j.hazelhurst1994#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^3.2.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": "^2.2.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.6.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"
]
}
My Vue file where I am setting <style lang="scss">
<template>
<div>
<input type="text" class="todo-input" placeholder="What needs to be done">
Todo list goes here
</div>
</template>
<script>
export default {
name: 'todo-list',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="scss">
</style>
No idea where I am going wrong here.
You have "webpack": "^3.12.0" and "sass-loader": "^8.0.0", which I believe is incompatible (as discussed in this Github issue).
To solve the problem, either upgrade webpack to version 4 or downgrade sass-loader to version 7 (which, personally, is what I did).
Downgrading from sass-loader 8.0.0 to 7.3.1 fixed it for me on new builds with Webpack 4.4.0.
Resources:
Github Issue Tracker: https://github.com/webpack-contrib/sass-loader/issues/761
Github Solution: https://github.com/webpack-contrib/sass-loader/issues/761#issuecomment-554608680
new fish here, doing the same tutorial!
At the beginning after "npm run dev", there are warnings like
sass-loader#^x.x.x found but y.y.y expected.
webpack#^x.x.x found but y.y.y expected.
for those searching npm downgrade commands:
uninstall
e.g.
npm uninstall sass-loader
install the expected version (change y.y.y to your expected version)
npm install sass-loader#^y.y.y --save-dev
I ran this in my project root folder, and then the tutorial worked (however, under localhost:3000/todo)
I'm trying to add unit testing to an existing vue project via jest, but when I attempt to run my first test I get an error that says
Vue packages version mismatch:
- vue#2.5.16
- vue-template-compiler#2.6.6
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
But looking at my packages, my current vue version is 2.6.6 not 2.5.16. I have no idea where it's seeing this 2.5.16 version. I don't have vue installed globally, only #vue/cli#3.4.0. Any help would be appreciated. Below you can find my package.json that contains my jest configuration.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"#babel/core": "^7.4.0",
"#tinymce/tinymce-vue": "^1.1.0",
"#types/bootstrap": "^3.3.40",
"#types/jest": "^24.0.11",
"#types/jquery": "^2.0.51",
"#types/jquery.validation": "^1.16.5",
"#types/jqueryui": "^1.12.6",
"#types/kendo-ui": "^2018.3.0",
"#types/knockout": "^3.4.60",
"#types/moment": "^2.13.0",
"axios": "^0.18.0",
"axios-cache-adapter": "^2.1.1",
"browser-detect": "^0.2.28",
"es6-promise": "^4.2.5",
"file-saver": "^1.3.8",
"knockout": "^3.4.2",
"moment-timezone": "^0.5.23",
"query-string": "^6.2.0",
"tinymce-vue": "^1.0.0",
"url-search-params-polyfill": "^5.0.0",
"vee-validate": "^2.1.3",
"vue": "^2.6.6",
"vue-class-component": "^6.3.2",
"vue-multiselect": "^2.1.3",
"vue-notification": "^1.3.13",
"vue-property-decorator": "^7.2.0",
"vue-router": "^3.0.2",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4"
},
"scripts": {
"dev": "webpack --mode development --watch --hot",
"test": "npm run test:unit",
"test:unit": "jest",
"build": "webpack --mode production",
"output": "webpack --profile --json > stats.json"
},
"devDependencies": {
"#types/file-saver": "^1.3.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^1.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"jest": "^23.4.2",
"node-sass": "^4.10.0",
"printd": "^1.0.1",
"sass-loader": "^7.1.0",
"ts-jest": "^23.10.5",
"ts-loader": "^4.5.0",
"typescript": "^3.2.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-jest": "^3.0.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.28.4",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-hot-middleware": "^2.24.3"
},
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"moduleDirectories": [
".",
"<rootDir>/Scripts",
"<rootDir>/Scripts/VueModules",
"<rootDir>/Scripts/VueModules/SharedComponents",
"<rootDir>/Scripts/VueModules/Candidates/",
"node_modules"
],
"moduleNameMapper": {
"^#candidates$": "<rootDir>/Scripts/VueModules/Candidates",
"^#shared$": "<rootDir>/Scripts/VueModules/SharedComponents",
"^#app$": "<rootDir>/Scripts/VueModules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/Scripts/VueModules/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "<rootDir>/Scripts/VueModules/__mocks__/styleMock.js"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!vue)"
],
"testURL": "http://localhost/",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
}
}
You have "vue": "^2.6.6", and "vue-template-compiler": "^2.6.6", in your package.json meaning any version matching 2.6.6 or higher will be installed that explain the vue#2.5.16. Your package-lock.json file set the current version to which the package has been updated to, you can verify from there which version both vue and vue-template-compiler
You can run npm update or npm install vue-template-compiler#2.5.16 --save-dev to get both on the same version
Running the following command helped me
npm install vue-template-compiler#2.5.16 --save-dev
NB. Replace the version number with the right version that you need. In my case, the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.
Hope this helps someone
Vue packages version mismatch error fix
npm update fixed the same problem for me.
Add the following lines to your Package.json
"vue-template-compiler": "^2.6.12"
and then run npm install in terminal.
I'm building a new project in VUEJS 2 and am having a issue. I'm fairly new to webpack so I'm learning it as I go. Can you tell me why this section of code throws an error?
./store/modules/user/store.js
const state = {
user: {}
};
Then when it gets compiled, webpack throws these errors:
ERROR Failed to compile with 1 errors 14:21:50
error in ./assets/js/store/modules/user/store.js
Module build failed: TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (c:\myProject\node_modules\#babel\traverse\lib\scope\index.js:978:13)
at BlockScoping.updateScopeInfo (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
at BlockScoping.run (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
at newFn (c:\myProject\node_modules\#babel\traverse\lib\visitors.js:237:21)
at NodePath._call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:65:20)
at NodePath.call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:100:12)
at TraversalContext.visitQueue (c:\myProject\node_modules\#babel\traverse\lib\context.js:142:16)
at TraversalContext.visitSingle (c:\myProject\node_modules\#babel\traverse\lib\context.js:102:19)
at TraversalContext.visit (c:\myProject\node_modules\#babel\traverse\lib\context.js:182:19)
at Function.traverse.node (c:\myProject\node_modules\#babel\traverse\lib\index.js:106:17)
at traverse (c:\myProject\node_modules\#babel\traverse\lib\index.js:76:12)
at transformFile (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:116:29)
at runSync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:45:3)
at runAsync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:35:14)
at process.nextTick (c:\myProject\node_modules\#babel\core\lib\transform.js:34:34)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
# ./assets/js/store/store.js 3:0-40
# ./assets/js/main.js
Here is my package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.17.0",
"#vue/cli-plugin-babel": "^3.0.0-rc.3",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"vue-loader": "^14.1.1",
"vue-template-compiler": "^2.5.16"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.0.0-beta.51",
"#coreui/coreui": "^2.0.3",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"#coreui/icons": "0.2.0",
"#coreui/vue": "^2.0.0-rc.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"css-vars-ponyfill": "^1.7.2",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"npm": "^6.4.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.26.11",
"vue": "^2.5.16",
"vue-chartjs": "^3.3.2",
"vue-perfect-scrollbar": "^0.1.0",
"vue-router": "^3.0.1",
"vue-table-component": "^2.0.0-alpha.1",
"vue-tables": "^1.6.44",
"vuetable": "^1.5.12",
"vuex": "^3.0.1"
}
}
I'm assuming i'm missing some sort of babel extension. I've done some research and think it might be something to do with es2015 not being understood in the "store.js" file. Any idea on what I could do fix this? I also noticed I don't have a .babelrc file, is there something I need to put in that so this will work?
I appreciate any help!
I fixed it by just reverting to react-native#0.55.4 for now.I'm also faced error by using (react-native#0.56)#babel/core 7.0.0-beta.