I'm developing a Vue app solely for Chrome, which leads me to believe (please correct me if wrong) that I can write native ES6 and don't need to transpile.
The Vue CLI generates a package.json like this:
"devDependencies": {
"babel-core": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.0.1",
"browserify-hmr": "^0.3.1",
"cross-env": "^1.0.6",
"envify": "^3.4.1",
"http-server": "^0.9.0",
"npm-run-all": "^2.1.2",
"uglify-js": "^2.5.0",
"vueify": "^9.1.0",
"watchify": "^3.4.0"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
But if I remove the 4 references to Babel, I get compile errors on my very first file. So really I just have two questions:
1) Am I correct in thinking that I can ditch Babel?
2) How do I do it?
I don't think browserify can handle ES6 imports without Babel. Usually, you could just get away with using something like gulp to uglify and minify without transpiling, because browserify is intended to allow require to be used in the browser, but if the browser supports import then you don't really need it. Unfortunately, this means that you won't be able to use vueify, so you lose the ability to use single file components, so I guess it's down to whether you think that trade-off is acceptable.
You may be interested in this discussion on GitHub: https://github.com/substack/node-browserify/issues/1186
Related
I just started using jest for testing my JavaScript project. I was using mocha and chai, but I couldn't get coverage information on my component tests, which use babel and Selenium, so I thought I'd try jest. I've converted my tests over to use jest and they are working but again, the Selenium tests do not give coverage information. I have a few unit tests that don't use Selenium, and I'm getting coverage data from them. If I disable the unit tests, the coverage numbers are basically zeroes across the board (though not exactly zero, there are a handful of lines that do get covered).
I've found a few blogs and SO questions addressing this problem, but their solutions are out-of-date (i.e. bug in jest, fixed in version 0.9.0. I'm using version 29.3.1). My jest.config.js contains this:
{
collectCoverage: true,
coverageDirectory: 'coverage',
coverageProvider: 'babel',
coverageReporters: [ 'html' ]
}
I'm using node.js v16.13.0 on Windows. My dependencies are:
"dependencies": {
"#babel/cli": "^7.19.3",
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/register": "^7.18.9",
"babel-jest": "^29.3.1",
"babel-plugin-rewire": "^1.2.0",
"chai": "^4.3.6",
"eslint": "^8.9.0",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-mocha": "^10.1.0",
"express": "^4.18.2",
"jest": "^29.3.1",
"mocha": "^10.1.0",
"rewire": "^6.0.0",
"selenium-webdriver": "^4.6.0",
"sinon": "^14.0.1"
}
How can I get coverage information from the Selenium tests?
I have been trying for about a week to get code coverage with Jest and Selenium-webdriver. It just does not work. I tried a different approach using nyc reporter. After the Selenium tests run, I use JavascriptExecutor to return the value of window.__coverage__, stringify it, save it as output.json in nyc_output directory and then run nyc report --reporter=lcov.
Magic. I get the code coverage report.
const data = await driver.executeScript("return window.__coverage__");
fs.promises.writeFile(".nyc_output/output.json", JSON.stringify(data));
It's a little hacky and not a long term solution, but meets my requirements until I can understand why Jest is not working.
Hopefully we get a better answer from someone else. But I have searched the internet high and low and have not seen any working examples of how to get code coverage for Selenium with Jest or even Mocha and nyc.
I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.
All pages in my app query from a database, and right now the pages are rendering as static html.
I've tried all the basic stuff, such as using ES6 imports(for components rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.
I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.
If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.
Thanks!
PACKAGE.JSON
"dependencies": {
"#chakra-ui/react": "^2.3.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#next/bundle-analyzer": "^13.0.2",
"dotenv": "^16.0.3",
"framer-motion": "^7.6.5",
"moralis-v1": "^1.11.0",
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-moralis": "^1.4.2",
"react-redux": "^8.0.4",
"web3uikit": "^0.1.159"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"file-loader": "^6.2.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2",
"url-loader": "^4.1.1"
}
}
Bundle:
The problem seems to be in _app.js. This file is shared by all other files and it's 1.03MB. So something in there is going wrong. You have to post the contents of that file to find the problem
I just ejected from expo and everything went well but I'm now getting the following error when trying to run my ios app in Xcode :
No visible #interface for 'RCTAsyncLocalStorage' declares the selector
'initWithStorageDirectory:'
Here is part of my package.json
"dependencies": {
"axios": "^0.17.1",
"expo": "^23.0.6",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-cloudinary": "^1.0.1",
"react-native-communications": "^2.2.1",
"react-native-elements": "^0.18.5",
"react-native-fetch-blob": "^0.10.8",
"react-native-gifted-chat": "^0.3.0",
"react-native-image-picker": "^0.26.7",
"react-native-image-to-base64": "^0.1.0",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-navigation": "^1.0.0-beta.22",
"redux-thunk": "^2.2.0"
}
I actually managed to fix it, this is how:
I updated my "react-native" dependency to the latest one available:
"https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
I removed all dependency that I had installed by mistake in my previous expo app that actually required react-native link using the npm uninstall --save command:
react-native-image-to-base64, react-native-cloudinary
Then I also had to remove them from the General > Linked Frameworks and Libraries
Now it works! I'm having issues with the Facebook Login now but at least it doesn't crash my app.
Good luck to you.
I feel really dumb for not realizing it sooner, but I had this issue when I forgot to run yarn after switching branches with a different Expo version.
Hope that saves someone else some debugging.
With almost every npm package that I'm trying to use with vue.js 1.0 I receive this error:
{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:117:15)
It drives me nuts! I'm using vue.js with browserify. Looked everywhere on the web:
https://github.com/webpack/css-loader/issues/240
https://github.com/webpack/css-loader/issues/180
https://github.com/webpack/css-loader/issues/295
https://github.com/webpack/css-loader/issues/163
Nothing seems to work! What am I doing wrong!?
2 packages where I've this problem:
https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor
My gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');
elixir(mix => {
mix.browserify('main.js');
mix.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
]);
mix.stylus('app.styl');
});
A solution would really help me out.
--EDIT--
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-stylus": "^2.0.3",
"vue-html5-editor": "^0.5.1"
},
"dependencies": {
"browserify": "^13.1.0",
"laravel-elixir-vueify": "^2.0.0",
"normalize-css": "^2.3.1",
"nprogress": "^0.2.0",
"stylus": "^0.54.5",
"sweetalert": "^1.1.3",
"vue": "^1.0.26",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vue-spinner": "^1.0.2",
"vue-upload-component": "^2.0.0-beta"
}
}
Those are webpack packages and you are using browserify. If you need to use webpack packages you should be using webpack as your bundler.
I did have a go at installing the vue-upload-component package to see how easy it would be with browserify and elixir but it's awkward to say the least. I didn't get it working because it uses babel transforms to compile the vue files, so first you need to pull them in manually and then you would likely need to write an elixir extension to use those transforms to get it to work. Obviously each webpack package will be different so you would need to do that each time you install one, which is hardly convenient.
I had some luck changing the configuration output of the Vue component I wanted to use to use webpack -p instead of just webpack.
I could then take that output without the hot module code and put it through browserify:
browserify file.js --standalone SomeLibrary > file.browser.js
Where file.js is the webpack -p output, SomeLibrary is the name you want on the global window scope from the browserify packaging, and file.browser.js is your resultant file to include in your project.
On Meteor 1.4.1.1 since I've updated to the latest Angular 2.0.1 release I struggle against this error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten
I've tried meteor update and meteor reset but the error is still there.
I've looked for some answers saying that I should load Zone.js after every other scripts. The problem is that I can't control the loading order on Meteor.
Here is my package.json dependencies:
"dependencies": {
"#angular/common": "^2.0.1",
"#angular/compiler": "^2.0.1",
"#angular/core": "^2.0.1",
"#angular/forms": "^2.0.1",
"#angular/platform-browser": "^2.0.1",
"#angular/platform-browser-dynamic": "^2.0.1",
"angular2": "^2.0.0-beta.17",
"angular2-meteor": "^0.7.0",
"angular2-meteor-polyfills": "^0.1.1",
"bcrypt": "^0.8.7",
"bluebird": "^3.4.6",
"chart.js": "^2.3.0",
"es6-shim": "^0.35.1",
"meteor-node-stubs": "^0.2.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.12",
"ui-router-ng2": "^1.0.0-beta.3",
"zone.js": "^0.6.25"
}
and here are my meteor packages:
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
angular2-compilers#0.6.2_1
barbatus:angular2-runtime
deanius:promise
momentjs:moment
fortawesome:fontawesome
dburles:collection-helpers
accounts-password#1.3.0
promise#0.8.4
meteorhacks:ssr
email#1.1.17
jalik:ufs
jalik:ufs-local
service-configuration#1.0.10
accounts-facebook#1.0.10
accounts-google#1.0.10
accounts-twitter#1.1.11
percolate:synced-cron
shell-server`
Any ideas ?
Promise coming from zone.js is beeing overwritten by promise package which is a dependency of ecmascript and deanius:promise.
You need to remove ecmascript and use typescript everywhere (client AND server)
This worked for me.
meteor remove barbatus:angular2-runtime
meteor remove barbatus:angular2-polyfills
and/or this
npm uninstall barbatus:angular2-runtime
npm uninstall barbatus:angular2-polyfills
As described here by Richie 765:
https://github.com/Urigo/angular2-meteor/issues/413
I found out that both barbatus:angular2-runtime and barbatus:angular2-polyfills are incompatible with ecmascript. So I uninstalled them. By the way, is barbatus:angular2-runtime still used for anything? It seems it has been removed from the repo so I think there's no use for it anyway. In my project first thing I import is
import 'angular2-meteor-polyfills';
Doesn't have to be in every file, just as the first import in the file that is loaded first. /client/main.js would be a good place.