This happens from me from time to time. After a cache clean up "suddenly" react-native stops working without a seemingly clear reason.
/Users/Shared/projects/project/node_modules/react-native/packager/react-packager/src/Logger/index.js:85
printFields? = [])
^
SyntaxError: Unexpected token ?
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at loader (/Users/Shared/projects/project/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Shared/projects/project/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/Shared/projects/project/node_modules/react-native/packager/react-packager/index.js:14:16)
I'm on react-native 0.38.0, node 6.1.0, but also tried switching to node 6.9.2
Tried removing and reinstalling (through yarn) the node_modules folder.
I'm fairly certain that the specific error is irrelevant. What seems to be happening is that flow syntax is not being recognized.
.babelrc
{
"presets": [
"react-native",
"react-native-stage-0",
"react-native-stage-0/decorator-support",
]
}
dev dependencies
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
"babel-plugin-transform-flow-strip-types": "^6.21.0",
"babel-preset-airbnb": "^2.0.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-native": "1.9.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"chai-as-promised": "^6.0.0",
"chai-enzyme": "^0.6.1",
"chai-immutable": "^1.6.0",
"commitizen": "^2.9.2",
"cz-conventional-changelog": "^1.1.6",
"enzyme": "^2.2.0",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-react": "^6.8.0",
"expect.js": "^0.3.1",
"flow": "^0.2.3",
"flow-bin": "^0.37.3",
"immutablediff": "^0.4.3",
"mocha": "^3.0.2",
"react-dom": "^15.3.1",
"react-native-mock": "^0.2.6",
"reactotron-redux": "^1.6.1",
"redux-debounce": "^1.0.1",
"redux-debounced": "^0.3.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.5",
"redux-mock-store": "^1.0.2",
"remote-redux-devtools": "^0.5.7",
"sinon": "^1.17.5",
"why-did-you-update": "0.0.8"
Any suggestions?
The simplest answer I have here is: downgrade to Node 5.x.
The longer answer is that it's probably due to a bug in transform-flow-strip-types (not stripping the ?), but is circumvented via the Babel preset es2015-node containing transform-es2015-parameters. BUT, es2015-node only includes the plugins when running in Node <= 5.x.
I've created an issue over at the React Native issues page if you want to follow along: https://github.com/facebook/react-native/issues/11601
Related
I have searched around for this error and found numerous people reporting it, but none of the solution tried have worked for me. The project I'm working with was ejected from expo with react-native v0.63 installed, and then upgraded to react-native v0.64.3. Everything else is working fine, but the tests are failing. On running yarn test, all the unit tests throw the same error:
src/screens/ScreenTest/ScreenTest.test.js
● Test suite failed to run
SyntaxError: /node_modules/#react-native/polyfills/error-guard.js: Missing semicolon. (14:4)
12 | let _inGuard = 0;
13 |
> 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
| ^
15 | type Fn<Args, Return> = (...Args) => Return;
16 |
17 | /**
at instantiate (node_modules/#babel/parser/lib/index.js:72:32)
at constructor (node_modules/#babel/parser/lib/index.js:367:12)
at Parser.raise (node_modules/#babel/parser/lib/index.js:3706:19)
at Parser.semicolon (node_modules/#babel/parser/lib/index.js:4151:10)
at Parser.parseExpressionStatement (node_modules/#babel/parser/lib/index.js:15453:10)
at Parser.parseStatementContent (node_modules/#babel/parser/lib/index.js:14986:19)
at Parser.parseStatement (node_modules/#babel/parser/lib/index.js:14838:17)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/lib/index.js:15495:25)
at Parser.parseBlockBody (node_modules/#babel/parser/lib/index.js:15486:10)
at Parser.parseProgram (node_modules/#babel/parser/lib/index.js:14748:10)
at Parser.parseTopLevel (node_modules/#babel/parser/lib/index.js:14735:25)
at Parser.parse (node_modules/#babel/parser/lib/index.js:16764:10)
at parse (node_modules/#babel/parser/lib/index.js:16816:38)
at parser.next (<anonymous>)
at normalizeFile.next (<anonymous>)
at run.next (<anonymous>)
at transform.next (<anonymous>)
at evaluateSync (node_modules/gensync/index.js:251:28)
at sync (node_modules/gensync/index.js:89:14)
at ScriptTransformer.transformSource (node_modules/#jest/transform/build/ScriptTransformer.js:481:35)
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:586:40)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:624:25)
at Object.<anonymous> (node_modules/react-native/jest/setup.js:300:6)
Another thing to note is that I have babel.config.js file in my project already, since a lot of answers mentioned moving from .babelrc to babel.config.js as a solution to this problem, but it didn't help. just to be sure i also tried removing the babel.config.js and adding a .babelrc but that did not work either.
I'm at my wits end here and any help is greatly appreciated!
So far I've tried:
Upgrading/downgrading the jest, babel, and any dependencies to a newer version
How can I stop my React Native tests bombing out on Flow types in Node Modules? => Fixes posted in this thread
https://github.com/react-native-community/upgrade-support/issues/152 => More fixes from this issue
Changing babel plugins and adding/removing transformIgnorePatterns
Creating a fresh, bare react-native#0.64.3 project and running the default test (tests pass after downgrading babel to the recommended version)
babel.config.js:
module.exports = function (api) {
api.cache(false)
return {
env: {
production: {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'module:react-native-dotenv',
'react-native-reanimated/plugin',
'transform-remove-console',
],
},
development: {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['module:react-native-dotenv', 'react-native-reanimated/plugin'],
},
},
}
}
package.json:
{
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#gorhom/bottom-sheet": "^4.4.2",
"#pnthach95/react-native-root-view-background": "^1.2.0",
"#ptomasroos/react-native-multi-slider": "^2.2.2",
"#react-native-async-storage/async-storage": "^1.13.4",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/netinfo": "^8.3.0",
"#react-native-community/push-notification-ios": "^1.8.0",
"#react-native-firebase/analytics": "12.9.3",
"#react-native-firebase/app": "12.9.3",
"#react-native-firebase/auth": "^12.1.0",
"#react-native-firebase/crashlytics": "12.9.3",
"#react-native-firebase/dynamic-links": "10.8.1",
"#react-native-firebase/in-app-messaging": "12.9.3",
"#react-native-firebase/messaging": "^12.1.0",
"#react-native-firebase/perf": "12.9.3",
"#react-native-firebase/remote-config": "12.9.3",
"#react-native-google-signin/google-signin": "^6.0.1",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "1.9.2",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/core": "^5.16.1",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.6",
"#react-navigation/stack": "^6.3.1",
"#rematch/core": "^2.0.0",
"#rematch/loading": "^2.0.0",
"#sentry/react-native": "^2.6.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"accordion-collapse-react-native": "^0.3.2",
"axios": "^0.20.0",
"babel-eslint": "^10.1.0",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint-plugin-react-native": "^3.11.0",
"eslint-plugin-unused-imports": "^1.1.1",
"expo": "^40.0.0",
"expo-document-picker": "~8.4.1",
"expo-file-system": "~9.3.0",
"expo-location": "~10.0.0",
"expo-splash-screen": "~0.8.1",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"firebase": "^8.4.3",
"intl": "^1.2.5",
"lodash": "^4.17.20",
"lottie-ios": "3.4.0",
"lottie-react-native": "^5.1.4",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prop-types": "^15.7.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-calendly": "^4.0.0",
"react-dom": "16.13.1",
"react-intl": "^5.24.6",
"react-native": "0.64.3",
"react-native-appsflyer": "6.8.2",
"react-native-background-timer": "^2.4.1",
"react-native-bootsplash": "^3.2.2",
"react-native-code-push": "^7.0.4",
"react-native-confirmation-code-field": "^6.5.1",
"react-native-date-picker": "^3.2.8",
"react-native-device-info": "^8.0.0",
"react-native-dotenv": "^2.5.0",
"react-native-fast-image": "^8.5.11",
"react-native-fbsdk-next": "^4.2.0",
"react-native-fingerprint-scanner": "^6.0.0",
"react-native-fs": "^2.18.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-header-scroll-view": "^0.10.3",
"react-native-image-picker": "~4.2.1",
"react-native-in-app-review": "^4.1.1",
"react-native-inappbrowser-reborn": "^3.5.1",
"react-native-indicators": "^0.17.0",
"react-native-insta-story": "^1.1.8",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-modal": "^13.0.0",
"react-native-offline": "^6.0.0",
"react-native-otp-autocomplete": "^1.0.7",
"react-native-pager-view": "5.4.12",
"react-native-paper": "^4.2.0",
"react-native-permissions": "^3.0.0",
"react-native-picker-select": "^8.0.0",
"react-native-play-install-referrer": "^1.1.8",
"react-native-popup-menu": "^0.15.11",
"react-native-portal": "^1.3.0",
"react-native-progress": "^4.1.2",
"react-native-push-notification": "7.3.1",
"react-native-quiz-maker": "^0.1.0",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-razorpay": "^2.2.7",
"react-native-reanimated": "~2.5.0",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-restart": "^0.0.22",
"react-native-rss-parser": "https://github.com/adityabishtedu/react-native-rss-parser/tarball/rss-patch",
"react-native-safe-area-context": "3.4.1",
"react-native-screens": "^3.17.0",
"react-native-session-stats": "https://github.com/balazsherczeg/react-native-session-stats.git",
"react-native-shadow-2": "^6.0.5",
"react-native-share": "^7.9.0",
"react-native-signature-canvas": "^4.3.0",
"react-native-simple-toast": "^1.1.3",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "4.0.0-beta.6",
"react-native-step-indicator": "^1.0.3",
"react-native-steps": "^1.3.0",
"react-native-svg": "^12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-tab-view-fixed": "^0.0.69",
"react-native-thumbnail-video": "^0.1.2",
"react-native-tracking-transparency": "^0.1.1",
"react-native-ultimate-config": "3.4.2",
"react-native-unimodules": "~0.12.0",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^5.1.1",
"react-native-view-shot": "^3.4.0",
"react-native-walkthrough-tooltip": "^1.1.11",
"react-native-web": "~0.13.12",
"react-native-webp-format": "^1.1.2",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"react-navigation": "^4.4.4",
"react-number-format": "^4.4.1",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-axios-middleware": "^4.0.1",
"redux-thunk": "^2.3.0",
"rn-faded-scrollview": "^1.0.12",
"rn-fetch-blob": "^0.12.0",
"validate.js": "^0.13.1",
"victory-native": "^36.6.0",
"volkeno-react-native-quiz-multiple-choice": "^1.0.3"
},
"devDependencies": {
"#babel/core": "^7.20.5",
"#babel/runtime": "^7.20.6",
"#babel/preset-typescript": "^7.16.5",
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"babel-jest": "~26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-preset-expo": "8.3.0",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "3.3.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.26.0",
"husky": "^8.0.0",
"jest": "~26.6.3",
"metro-react-native-babel-preset": "^0.73.4",
"prettier": "^2.4.1",
"react-native-bundle-visualizer": "^2.2.1",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Unfortunately, I've had the same issue and so I stumbled over your question. After some hours I found the problem and the solution.
In my case the issue happened when I upgraded jest from 27 to 28 (https://jestjs.io/docs/28.x/upgrading-to-jest28) because of this change:
Babel config
babel-jest now passes root: config.rootDir to Babel when resolving configuration. This improves compatibility when using projects with differing configuration, but
it might mean your babel config isn't picked up in the same way anymore. You can override this option by passing options to babel-jest in your configuration.
My babel.config.js was located in my react native application root .\babel.config.js but my .\jest.config.js file defined as root (to search for the tests): rootDir: "src". With the change from 27 to 28 the babel.config.js file was not longer found because babel-jest searched in ./src/babel.config.js and thus exactly the same error occurred like you described above:
SyntaxError: /node_modules/#react-native/polyfills/error-guard.js: Missing semicolon. (14:4)
because babel no longer transpiled the error-guard.js file.
As you have still jest 26 (in your package.json) your case might be different - but the problem is that your babel.config.js file is not or no longer found and thus babel-jest is no longer transpiling any file.
Not sure if this helps you - I used the following solution:
Create a new file ./babel-jest.js with the content
module.exports = require("babel-jest").createTransformer({
rootMode: "upward",
})
Reference this in .\jest.config.js like:
transform: {
"^.+\\.jsx?$": "../babel-jest.js",
},
Now, instead of babel-jest directly the new transformer from .\src\..\babe-jest.js is called including the option to search for the babel.config.js file upwards (and then finally finding it in .\babel.config.js just one level above).
This solution is also described here:
Babel: root programmatic options
and here
https://github.com/facebook/jest/issues/8006
There are other proposals to use:
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
},
in
https://github.com/facebook/jest/issues/8006
and even on the jest page it self
https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
but unfortunately this was not working for me.
There is another option you can give a try (described also in https://github.com/facebook/jest/issues/8006).
You can create a babel.config.js file in the root for your tests and reference the original file via
module.exports = require('../babel.config.js');
Hope this helps a bit.
I have a vue codebase I am trying to run on my end. I have done npm install but whenever I try to run npm run serve, I get the error above. I will be posting the full stack trace here.
INFO Starting development server...
ERROR TypeError: compiler.plugin is not a function
TypeError: compiler.plugin is not a function
at LimitChunkCountPlugin.apply (E:\Teogundipe\Dev\Alero\client-app\node_modules\webpack\lib\optimize\LimitChunkCountPlugin.js:16:12)
at createCompiler (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:73:12)
at create (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:134:16)
at webpack (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:158:32)
at f (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\index.js:64:16) at serve (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\lib\commands\serve.js:185:22)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! alero#1.1.0 serve: `vue-cli-service serve --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the alero#1.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\oilesanmi\AppData\Roaming\npm-cache\_logs\2022-11-01T16_12_02_116Z-debug.log
Here is the package.json file I am currently using.
"dependencies": {
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"chokidar": "^3.5.2",
"console": "^0.7.2",
"core-util-is": "^1.0.2",
"device-detector-js": "^2.2.7",
"dinero.js": "^2.0.0-alpha.8",
"element-ui": "^2.15.6",
"file-saver": "^2.0.5",
"https": "^1.0.0",
"moment": "^2.29.1",
"save": "^2.4.0",
"underscore-contrib": "^0.3.0",
"vue": "^2.5.2",
"vue-chartjs": "^3.5.1",
"vue-excel-editor": "^1.5.5",
"vue-excel-export": "^0.1.3",
"vue-excel-xlsx": "^1.2.2",
"vue-json-excel": "^0.2.99",
"vue-month-picker": "^1.6.0",
"vue-router": "^3.0.1",
"vuejs-paginate": "^2.1.0",
"vuetify": "^2.6.0",
"vuex": "^3.5.1",
"xlsx": "^0.15.6"
},
"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-polyfill": "^6.26.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",
"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",
"mini-css-extract-plugin": "^2.6.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.8.5",
"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.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.0",
"webpack-shell-plugin-next": "^2.2.2"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
What can be done please? I am using windows.
I have tried other similar situations, it doesn't seem to be working. I have remove cached forcefully, deleted node-modules and package-lock.json.
I expect to successfully launch the code on running npm run serve
I'm trying to run eslint on my code but am getting the following error:
> vue-cli-service lint; vue-cli-service test
ERROR Error: Cannot find module 'eslint/lib/ast-utils'
Referenced from: /Users/username/Development/project/tests/e2e/.eslintrc
Error: Cannot find module 'eslint/lib/ast-utils'
Referenced from: /Users/username/Development/project/tests/e2e/.eslintrc
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/username/Development/project/node_modules/eslint-plugin-protractor/lib/rules/array-callback-return.js:8:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
Versions:
"#babel/core": "^7.1.0",
"#babel/plugin-syntax-flow": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"#babel/plugin-transform-flow-strip-types": "^7.0.0",
"#vue/cli-plugin-babel": "^3.0.5",
"#vue/cli-plugin-eslint": "^3.0.5",
"#vue/cli-plugin-unit-jest": "^3.0.5",
"#vue/cli-service": "^3.0.5",
"#vue/test-utils": "^1.0.0-beta.25",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.2",
"eslint": "^5.6.1",
"eslint-config-sagely": "git+ssh://git#github.com/sagely/eslint-config-sagely.git",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-flowtype-errors": "^3.6.0",
"eslint-plugin-vue": "^4.7.1",
What am I missing here?
In my case I got a similar Error: Cannot find module 'eslint/lib/rules/utils/ast-utils' and I needed to upgrade eslint - v5 to v7 worked for me.
The easiest way to resolve this would be removing your node_modules folder and do npm install again or install all packages again using whatever package manager you use.
Following is my package json file. I have installed node_modules successfully. But Getting the error:
"TypeError: Cannot read property 'babel' of undefined"
while running "webpack --watch".
Please let me know if anyone is aware of this.
"axios": "0.16.2",
"babel-plugin-root-import": "^5.1.0",
"bootstrap": "3.3.7",
"chalk": "^2.3.0",
"chart.js": "^2.7.1",
"del": "^3.0.0",
"html-entities": "^1.2.1",
"jquery": "3.1.1",
"karma-es6-shim": "^1.0.0",
"leaflet": "1.0.*",
"less": "2.7.2",
"libphonenumber-js": "^1.2.12",
"lodash": "4.17.4",
"moment": "^2.19.1",
"store": "^2.0.12",
"url-loader": "0.5.8",
"vee-validate": "2.0.0-rc.7",
"vue": "2.4.2",
"vue-chartjs": "^2.7.2",
"vue-loader": "12.0.3",
"vue-paginate": "3.4.0",
"vue-resource": "1.2.1",
"vue-router": "2.3.1",
"vue-template-compiler": "2.4.2",
"vuejs-datepicker": "0.6.3",
"vuex": "^2.5.0"
},
"devDependencies": {
"babel-cli": "6.23.0",
"babel-core": "6.23.1",
"babel-loader": "6.3.2",
"babel-preset-es2015": "6.22.0",
Your version of babel-loader looks to be out of date. Uninstall it with npm uninstall babel-loader and re-install with npm i -D babel-loader. You may also need to update to babel-preset-env and remove babel-preset-es2015
https://babeljs.io/docs/en/env/#upgrading-to-babel-preset-env
For me it was a version mismatch between webpack and babel-loader.
I had babel-loader#6.2.0 with webpack#4.12.0, updating to babel-loader#7.1.4 fixed the issue for me.
Everything was fine and dandy. Then I upgraded Vue and Vue-template-compiler npm packages to versions for both above 2.1.4 and then nothing shows in my browser except following error:
(unknown) [Vue warn]: Error when rendering root instance: warn
localhost/:2961 Uncaught ReferenceError: _h is not defined
at Proxy.render (eval at <anonymous> (http://localhost:8080/js/app.js:1509:1), <anonymous>:1096:14)
at Vue$2.Vue._render (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:2952:22)
at Vue$2.eval (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:2189:21)
at Watcher.get (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:1652:27)
at new Watcher (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:1644:12)
at Vue$2.Vue._mount (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:2188:19)
at Vue$2.$mount (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:5978:15)
at install$2 (eval at <anonymous> (http://localhost:8080/js/app.js:1509:1), <anonymous>:1223:29)
at Object.install$$1 [as install] (eval at <anonymous> (http://localhost:8080/js/app.js:1509:1), <anonymous>:6265:3)
at Function.Vue.use (eval at <anonymous> (http://localhost:8080/js/app.js:794:1), <anonymous>:3364:22)
My package.json:
{
"name": "myapp",
"version": "0.0.1",
},
"dependencies": {
"babel-runtime": "^6.20.0",
"fastclick": "^1.0.6",
"material-design-icons": "^3.0.1",
"moment": "^2.17.1",
"quasar-framework": "^0.9.1",
"roboto-fontface": "^0.6.0",
"velocity-animate": "^1.3.1",
"vue": "2.1.4",
"vue-router": "^2.1.1"
},
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"colors": "^1.1.2",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.26.1",
"eslint": "^3.11.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.6",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^1.7.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.24.1",
"http-proxy-middleware": "^0.17.3",
"json-loader": "^0.5.4",
"postcss-loader": "^1.2.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"vue-html-loader": "^1.2.3",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "2.1.4",
"chai": "^3.5.0",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-sinon-chai": "^1.2.4",
"karma-spec-reporter": "^0.0.26",
"karma-webpack": "^1.8.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-ie-launcher": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.1",
"karma-safari-launcher": "^1.0.0",
"karma-sauce-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"phantomjs-prebuilt": "^2.1.13",
"sinon": "^1.17.6",
"sinon-chai": "^2.8.0",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"chromedriver": "^2.25.2",
"cross-spawn": "^4.0.2",
"nightwatch": "^0.9.9",
"selenium-server": "^2.53.1",
"semver": "^5.3.0",
"opn": "^4.0.2",
"ora": "^0.3.0",
"shelljs": "^0.7.4",
"webpack": "^2.1.0-beta.27",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.2",
"webpack-merge": "^0.18.0"
}
}
going back for both to version 2.1.4 and everything is fine again... How can I succesfully update Vue and Vue-template-compiler?
There has been a renaming of a method in vue:
https://github.com/vuejs/vue/commit/4b51ad048306367a6fb6fbee7445e086d855f31e
Your code or your dependencies might still use _h. In my case it relates to Quasar Framework. After updating to Quasar Framework 10.3 and vue 2.1.6 with vue-template-compiler 2.1.6 it is solved. See:
https://github.com/quasarframework/app-template-default/issues/5
Browsing through github searching on _h and vue brought me there.
It seems like same issue, as has been raised here. You should upgrade vue-template-compiler to 2.2.0, which should fix it.