Aureliajs where is Promise.race([ - aurelia

Why is Promise.race([... undefined in the current version of aurelia?
You can see a good example of its use at: Error handling for fetch() in Aurelia

In my aurelia-app build with aurelia-cli only Bluebird core was bundled, but Promise.race is only included in the full version.
In aurelia.json in the section "prepend", change "bluebird.core.js" to "bluebird.min.js"
"prepend": [
"node_modules/bluebird/js/browser/bluebird.min.js",
...
],

Promise.race is supported either by the browser, or by a polyfill you supply. Aurelia does not supply a Promise polyfill. You can use Bluebird (as the skeletons do), or you can use the built-in Promises if you don't need to support older browsers. Current browser support for Promise.race can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

Ok, with Asheley's comment I was able to figure it out. I used bluebird as he suggested:
aurelia.json
...{
"name": "bluebird",
"path": "../node_modules/bluebird/js/browser/bluebird.min"
},...
Inside the class:
...
import {Promise} from 'bluebird';
...
Promise.race([ // is now available
...

Related

How to use nuxtjs/auth-next module with Nuxt3?

Just trying to add authentication to my NuxtJs 3 app folloging nuxt/auth configuration docs, but still get an error during app start:
// nuxt.config.js
export default defineNuxtConfig({
auth: {
// ...
},
modules: [
// '#nuxtjs/axios',
'#nuxtjs/auth-next'
],
})
Received same error for #nuxtjs/axios but I just commented it out since its official documentation indicates to switch to $fetch API.
Cannot figure out where the error is
nuxt-auth is not compatible with Nuxt3 as told here: https://github.com/nuxt-community/auth-module/issues/1805#issuecomment-1326287711
It's on the official roadmap but still not done by the core team.
You could google for a homemade solution online. Thanks to Nuxt3 composables and some logic, it is totally achievable without an official module.
You can use that community one in the meantime, as confirmed here.
At the time being, nuxt/auth module is not supported by Nuxt3.
You can find the list of modules supported by Nuxt3 here https://nuxt.com/modules?version=3.x
You can use this nuxt-auth module which is compatible with nuxt 3: https://nuxt.com/modules/nuxt-auth https://github.com/sidebase/nuxt-auth

How to upgrade sass-loader

I use vue and when I run it, there is a warning. I tried npm update without luck. How to get rid off it?
vue-cli-service serve
WARN A new version of sass-loader is available. Please upgrade for best experience.
Serg already gave the answer in comment. It's worked for me. Adding the answer for others. Hope it will help others.
Just run this command
npm i sass-loader#latest
You can update your packages via using yarn upgrade-interactive --latest, in case of sass-loader, if you have upgrade it from 7 to 9, you may have some invalid options erros which you can fixed in below steps as I've explained before: https://stackoverflow.com/a/62844942/12666332
Problem
Based on https://github.com/vuejs/vue-cli/issues/4513, And If you have upgrade your sass-loader from v7 to 8 or 9, You may have faced with th validation-error for invalid options
vue.config.js(valid syntax for sass-loaderv7 in webpack)
css: {
loaderOptions: {
sass: {
data: `#import "#/assets/styles/variables/index.scss";`
}
}
}
errors
object:
ValidationError: Invalid options object. Sass Loader has been
initialized using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
sass-loader v8.0 Breaking Changes
You should know that v8. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0
minimum required webpack version is 4.36.0
minimum required node.js version is 8.9.0
move all sass (includePaths, importer, functions) options to the
sassOptions option. The functions option can't be used as Function,
you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option default value
of the sourceMap option depends on the devtool value (eval/false
values don't enable source map generation)
Solution v8
As the docs says, move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option
sass-loader v9.0 Breaking Changes
You should know that v9. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0
BREAKING CHANGES minimum supported Nodejs version is 10.13
prefer sass (dart-sass) by default, it is strongly recommended to
migrate on sass (dart-sass)
the prependData option was removed in favor the additionalData
option, see docs
when the sourceMap is true, sassOptions.sourceMap,
sassOptions.sourceMapContents, sassOptions.sourceMapEmbed,
sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will be
ignored.
Solution v9
In ver9 as you can see in the docs https://github.com/webpack-contrib/sass-loader#options (https://github.com/webpack-contrib/sass-loader#sassoptions , https://github.com/webpack-contrib/sass-loader#additionaldata), if we change data to additionalData if will fix the invalid options errors.
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/assets/styles/variables/index.scss";`
}
}
}

Is there a bug when extracting Vue with the "extract" method in laravel-mix webpack

I followed the laravel-mix documentation to reduce the size of my vue application by using the extract(['vue]) method, it works well, however when i try using async components it won't work properly.
i already added babel to enable the promise syntax
mix.js('resources/js/app.js', 'public/js').version().extract(['vue'])
{
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
i'm hoping there is something i am missing here and its not a actual bug that i will have to wait for a patch, has anyone seen this issue before?
I just red this:
Warning: you can’t currently combine mix.extract() and async components. According to Laravel Mix this will be fixed when Webpack 5 gets released.
source: https://medium.com/maatwebsite/reducing-vue-application-file-size-with-laravel-mix-e483f746d836

Test platform specific extension code for React Native

Currently, React Native dynamically requires a file for the running platform with an specific file extension, *.ios.js or *.android.js. However, when running this code inside a test environment, we get a require error because the module require('./module') cannot be found in the file tree, which looks like:
module.ios.js
module.android.js
How can we handle this issues in a test environment?
Adding platform specific extensions to moduleFileExtensions fixed the problem for me with jest.14.1. Credits to : github link
Here is a snippet from sample package.json which will run all files including scene.jest.js(x).
...
"jest": {
"verbose": true,
"preset": "jest-react-native",
"moduleFileExtensions": ["js", "android.js", "ios.js"],
"testRegex": "\\.scene\\.jest\\.jsx$"
}
...
As of Jest 17.0.0 you can use the defaultPlatform configuration for this - see the very bottom of the Jest React Native tutorial.
As it shows there, you would configure something like this:
"haste": {
"defaultPlatform": "ios",
"platforms": ["android", "ios"],
},
Naturally, this will mean your tests only load the iOS version of your component (or only Android, depending how you choose to configure it).
If you find it important to test both versions, you'll probably need to do something more like the solution mentioned in this issue, possibly manipulating Platform.OS and using require.requireActual directly.
(Might also want to track this issue, in case a less hacky solution is eventually found.)
It's kind of ugly and maybe there is a better solution but it seems that you can create a module.js file that will be used in tests but in platform environment it will still use the module.ios.js or module.android.js.
You need to create a custom compiler to resolve the platform specific dependencies in your tests. If you are using mocha, this will probably help you:
http://lidatang.com/setup-mocha-testing-react-native/

Using sass with expressjs

What is the best way to use sass with express.js framework. I am starting from teh point where I have already done
npm install sass
I believe previously with express 2.x one could do something like -
app.use(express.compiler({ src: pub, enable: ['sass'] }))
But with express 3.x it gives me error :
app.init();
return app;
} has no method 'compiler'
What is the alternative statement to include in express 3.x?
Similarly if one could let me know the same on how to plugin coffeescript that would be great help.
I have seen examples of using Cakefile to precompile, but is that the only solution? That would mean adding an extra step of running a Cake task. What advantage would that have as against something defined within express app.js / app.coffee.
I have looked at connect-assets (which does coffeescript but not sass) and somewhere one also mentioned about connect-assetmanager pre hook, but haven't been able to make that work.
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x says:
template engine compliance from engine.compile(str, options) => Function to engine.__express(filename, options, callback)