Using Vue.js on my webapp work on most browsers, except IE11. I tried the default babel-preset-es2015, also tried the babel-preset-es2015-ie, but no luck: the code still not running on IE11 with 'Symbol' is undefined error.
.babelrc
{
"presets": ["es2015"] << also tried es2015-ie
}
package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 3000 --host 0.0.0.0",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"bootstrap-loader": "^1.3.2",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"vue": "^2.1.6"
},
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"bootstrap-sass": "^3.3.7",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"imports-loader": "^0.7.0",
"json-loader": "^0.5.4",
"node-sass": "^4.0.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^9.8.0",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
As pointed by #Leonid, I was missing browser-polyfill script, as described by this answer. Working fine now on IE11 (and other browsers).
Here is what I did:
npm install --save-dev babel-polyfill
webpack.config.js
module.exports = {
entry: ['babel-polyfill', './src/main.js'],
....
....
}
I'll rather prefe updating webpack.mix.js instead. Then using the updated version of #babel/polyfill and babel-loader. And these #babel/core babel-preset not necessary. corejs 3 is more recent version but cant seem to work it out. Please anyone knows how to make import core-js/stable work, lemme know!
With NPM:
npm install babel-loader #babel/polyfill --save
webpack.mix.js
module: {
rules: [{
test: /\.js?$/,
exclude: /(bower_components)/,
use: [{
loader: 'babel-loader',
options: mix.config.babel()
}]
}]
}
And finally import #babel/polyfill at the beginning of your main/js or app.js file
import '#babel/polyfill';
Dependencies:
"#babel/polyfill": "^7.10.4",
"babel-loader": "^8.1.0",
"vue": "^2.6.11",
Related
I dont know why babel-node does not import without ".js" extension.
I have "type": "module" in package.js
import example from "./src/example.js"; works fine
import example from "./src/example"; doesnt work
--es-module-specifier-resolution=node works only when I dont use babel-node
package.js
"type": "module",
"scripts": {
"start": "node ./index.js --exec babel-node -e js --experimental-modules --es-module-specifier-resolution=node "
},
"dependencies": {
"bcrypt": "^5.0.1",
"body-parser": "^1.20.0",
"express": "^4.18.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.3.5",
"nodemon": "^2.0.16",
"npm": "^8.12.1"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1"
}
npm install #babel/node solved my problem
I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.
error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"axios": "^0.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"react": "16.2.0",
"react-native": "^0.57.8",
"react-native-branch": "^2.3.0",
"react-native-camera": "^1.0.0",
"react-native-datepicker": "^1.6.0",
"react-native-deep-linking": "^2.1.0",
"react-native-fabric": "^0.5.1",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-modal": "^4.1.1",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-saga": "^0.16.0",
"stripe-client": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-preset-airbnb": "^3.2.0",
"detox": "^9.0.4",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-react-native": "^3.6.0",
"jest-cli": "^23.6.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-test-renderer": "16.0.0",
"remote-redux-devtools": "^0.5.12"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"airbnb",
"#babel/preset-env",
"module:react-native",
"module:metro-react-native-babel-preset"
]
}
Deleting .babelrc file will fix this for you.
Please check react native upgrade helper
https://react-native-community.github.io/upgrade-helper
and specify your current React native version and the version to update (0.57 in your case)
You will see changes need to do in your case to make the code compatible with updated version
Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.
Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.
To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.
You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.
It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.
I'm having trouble getting a Vue site to work consistently in IE11. I'm currently trying to use browserify to transpile with Babel to ES5, but seemingly it isn't working consistently (it sometimes works, but then after making a non-change to a JS file (such as adding a space to the end of a line) and then recompiling it will suddenly not work).
I'm seeing errors such as:
SCRIPT1006: Expected ')' in _typed_array.js
SCRIPT1002: Syntax error in _collection.js
So I believe this means the JS isn't being transpiled correctly into ES5?
Here's a copy of my package.json that contains all my build scripts:
{
"private": true,
"scripts": {
"watch-js": "watchify -vd -p browserify-hmr -e rest-theme/src/main.js -o rest-theme/dist/build.js",
"watch-scss": "./node_modules/.bin/node-sass -w --output-style=compressed scss/style.scss rest-theme/dist/build.css",
"dev": "npm run watch-scss | npm run watch-js",
"build": "cross-env NODE_ENV=production browserify rest-theme/src/main.js | uglifyjs -c warnings=false -m > rest-theme/dist/build.js"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"babel-runtime": "^6.9.2",
"mixitup": "^3.2.1",
"vue": "^2.1.1",
"vue-moment": "^2.0.1",
"vue-resource": "^1.0.0",
"vue-router": "^2.1.0",
"vue-smooth-scroll": "^1.0.13",
"viewport-units-buggyfill": "^0.6.0",
"vivus": "^0.4.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^5.8.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"browserify-hmr": "^0.3.5",
"cross-env": "^1.0.6",
"node-sass": "^3.0.0",
"uglify-js": "^2.5.0",
"vue-hot-reload-api": "^2.0.6",
"vueify": "^9.3.0",
"vueify-insert-css": "^1.0.0",
"vue-migration-helper": "^1.1.1",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
"vueify",
["babelify", { "presets": ["es2015"] }]
]
},
"browser": {
"vue": "./node_modules/vue/dist/vue.common"
}
}
Nothing is really jumping out at me as to why it isn't compiling correctly; but perhaps there is something incorrect in my syntax, or an old version of something that is causing the build to fail sometimes?
I'm also including the babel polyfill on the first line of my main JS file:
import "babel-polyfill";
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
.....
But perhaps that is implemented incorrectly?
Let me know if I can provide more info, or additional script pieces to help illuminate anything!
I am having a weird problem, suddenly the nodemon stopped showing console log.
I am using npm run dev command to run the nodeJS app and my package.json looks like below,
{
"name": "loginform",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon app.js"
},
"dependencies": {
"async": "^2.1.4",
"body-parser": "^1.15.2",
"body-parser-xml": "^1.1.0",
"cassandra-driver": "^3.1.6",
"connect-flash": "^0.1.1",
"ejs": "^2.0.6",
"es6-template-strings": "^2.0.1",
"express": "^4.14.0",
"express-rate-limit": "^2.6.0",
"express-session": "^1.10.1",
"log-buffer": "0.0.3",
"mongodb": "^2.2.25",
"mongoose": "^4.7.0",
"nodemailer": "^0.7.1",
"passport": "^0.2.1",
"passport-facebook": "^1.0.3",
"passport-local": "^1.0.0",
"passport-twitter": "^1.0.2",
"qs": "^6.3.0",
"sweetalert2": "^6.5.5",
"trim": "0.0.1",
"url-pattern": "^1.0.3",
"uuid": "^3.0.1",
"xml2js": "^0.4.17"
},
"devDependencies": {
"nodemon": "^1.11.0"
}
}
I was working but suddenly stopped working, I am able to figure out why, though I had installed pm2 in between but uninstalled, is this the cause that might have broken the logging?
Update
This is how my console looks, no log at all.
Can anyone help with a solution?
Thanks.
You had a typo. I am sure you run this via npm run dev.
Try removing your node_modules folder, and re run npm install
I have a module I am trying to test. That module is using other external modules and jest is having a hard time resolving them.
It is resolving the base path to:
./node_modules/react-tag-input/dist-modules/
Instead of:
./node_modules/react-tag-input/node_modules/react-dnd
Below, is a simplified version of what is happening:
Error:
Cannot find module 'react-dnd' from 'reactTags.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:160:17)
at Object.<anonymous> (node_modules/react-tag-input/dist-modules/reactTags.js:13:17)
at Object.<anonymous> (src/tagger/eventtagger.js:5:404)
This is my test file:
caseevent.test.js
import EventTagger from './eventtagger.js';
eventtagger.js
import ReactTags from 'react-tag-input';
package.json
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"modulePaths": [
"<rootDir>"
],
},
"dependencies": {
"babel-jest": "^17.0.2",
"flux": "^2.0.1",
"install": "^0.8.1",
"jest": "^17.0.3",
"lodash.flow": "^3.3.0",
"npm": "^3.10.6",
"object-assign": "^1.0.0",
"react": "^15.4.0",
"react-dnd": "git+https://github.com/jcrogel/react-dnd.git",
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^15.4.0",
"react-tag-input": "^4.4.0",
"react-tagcloud": "^0.6.1"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.14.0",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"enzyme": "^2.6.0",
"jest-cli": "^17.0.3",
"jsdom": "^9.4.0",
"lodash": "4.14.1",
"react-addons-test-utils": "^15.4.0",
"react-native": "^0.38.0",
"react-test-renderer": "15.4.0",
"sinon": "^1.17.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^2.0.1"
}
What am I missing? How do I get jest-resolve to find or mock deeper components?
I'm having the same issue as well. Some things I've attempted:
jest.unmock(module) at the top of the testing file
polyfill the module in a Jest setup file
jest.mock(jest.fn() => {console.log('do something'))
Lastly, and this seemed to work, but I can't find documentation on this:
At the top of the testing file:
/**
* #providesModule moduleName
*/
This seems to recognize the module I needed. Jest is supposed to implicitly see modules out of the box, but I haven't had that experience with it.
I had a similar problem in my jest tests, with an external dependency of webpack.
To solve that:
I create a __mocks__ folder in the same level if __test__ folder.
Inside that, I created a file with the same name of the dependency, in my case it was jquery ($.js).
Inside my test file, I use jest.mock function to reference the mock external dependency: jest.mock('$');
from jest the docs:
https://facebook.github.io/jest/docs/manual-mocks.html
Hope it could help.