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!
Related
I got project from my client to update that project with some points. But I'm facing problem to run this project.
I install npm and all required node modules downloaded based on package.json information.
{
"name": "acelle-builder",
"version": "1.0.0",
"description": "",
"private": true,
"type" : "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/ace": "0.0.42",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0",
"file-loader": "^4.1.0",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"raw-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^3.0.0",
"to-string-loader": "^1.1.5",
"url-loader": "^2.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"ace-builds": "^1.4.12",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"js-beautify": "^1.13.0",
"popper.js": "^1.16.1"
}
}
there are some codes of importing html files like
import controls from './controls.html';
import widgets from './widgets.html';
but when I run this project using node command I'm getting error with unknown file .html extension.
How can I solve this?
Node.js can only import JS modules.
If you want to use syntax which involves importing other kinds of things then you need to use an appropriate tool. The dependencies in the package.json file include WebPack. Use that.
There is even a script (named build) listed that will run it.
npm run build
You can't import from an html file. You are trying to import from ./controls.html and ./widgets.html. You have to import from js files. Maybe you meant "./controls.html" and "./widgets.js".
I'm writing a new application with nodejs/express/sequelize. I use babel 7 to compile my ES6. Everything works fine with sequelize so far except when I want to use removeHook method. I get this error when I use removeHook on an instance.
/home/xxxx/PhpstormProjects/some-project/node_modules/lodas/lodash.js:15709
var result = object(this.__wrapped__),
^
TypeError: Class constructor Model cannot be invoked without 'new'
at self.object.(anonymous function) [as removeHook] (/home/xxxx/PhpstormProjects/some-project/node_modules/lodash/lodash.js:15709:28)
at removeHook (/home/xxxx/PhpstormProjects/some-project/src/controllers/user.js:44:22)
at callback (/home/xxxx/PhpstormProjects/some-project/src/util/loginStrategy.js:9:18)
I know this problem is coming from Babel. I was using babel six at first, but I had the same problem. I have tried everything available on GitHub, and the best solution was the following .babelrc but still I'm getting the same error. Also, I have upgraded lodash with no effect. I tried babel-plugin-lodash with no result.
.babelrc
{
"plugins": ["lodash"],
"presets": [
["#babel/env", {
"targets": {
"node": "10.16.0"
}
}]
]
}
package.json
{
"name": "xxxxxxxxxxx",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "sessionSecret=lool nodemon ./app.js --exec babel-node -e js"
},
"dependencies": {
"bcrypt": "^3.0.6",
"body-parser": "^1.19.0",
"connect-pg-simple": "^5.0.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-session": "^1.16.2",
"fs": "0.0.1-security",
"lodash": "^4.17.11",
"lodash-es": "^4.17.11",
"nodemon": "^1.19.1",
"pg": "^7.11.0",
"sequelize": "^5.8.12",
"sequelize-cli": "^5.5.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-classes": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"babel-eslint": "^10.0.2",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-latest-node": "^3.2.1",
"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.18.0"
}
}
Node Version
v10.16.0
I have seen other answers, but they didn't solve my problem. Most of them are really old. Please let me know if you need more information.
I solved my own problem. It turns out that I can't use removeHook on instances. I should have used models. This is a big problem with Sequelize documentation. Here is what I found.
Instance and class methods have been removed as of v4. See here(it's a 404)
Also, your beforeUpdate hook updates the user asynchronously. You should return a promise so sequelize knows it has to wait for your hook to finish doing its task and updating the user.
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.
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",
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.