As I understand Browserlist tool is automatically adds needed polyfills if older browser support required. I'm trying to run ES6 js code in old Android Chrome Webview v.30 but got error:
Uncaught ReferenceError: Map is not defined", source: http://localhost/js/chunk-vendors.ed003893.js
My .browserslistrc set to:
Chrome > 20
Running npx browserslist shows that in includes chrome from 21 version and above. But after building production and running in WebView I got the same error that Map is not defined. Do I need manually add ES6 polyfill?
P.s. I'm using Vuejs 2
Found solution by adding es.map polyfill to babel.config.js file:
presets: [
['#vue/cli-plugin-babel/preset', {
polyfills: [
'es.map',
],
}],
],
}```
Related
I am new to Vite and Vitest. I am experimenting a little bit, trying to add Vitest to a React-native app. I know Vite doesn't really support React Native but I would like to trying running just the tests with Vitest.
I get an error when trying to import React-native modules:
Module .../node_modules/react-native/index.js:14 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "react-native" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.
As a temporary workaround you can try to inline the package by updating your config:
// vitest.config.js
export default {
test: {
deps: {
inline: [
"react-native"
]
}
}
}
When adding the suggested config the tests break inside React-native instead, as if the modules in fact is not supported.
What is going on here? Is React-Native only published as commonjs modules, while only esm-modules is supported by Vite? Is there a way around it?
Thanks in advance,
M.
I am currently working on a vue.js 2 project that uses vuetify pwa and vuex dependencies
When i try to build my project the cli throws the following error:
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
at Object.exports.process (C:\Users\BluRRayS\Documents\ProostWebApp\node_modules\#hapi\joi\lib\errors.js:202:19)
I already tried to reinstall all my NPM packages and to update them to their latest version.
I Also tried to pull my project freshly from github but that didn't work either.
Since I do not have much experience with webpack or front-end software engineering in general I really am a bit stuck so any help would be much appreciated.
What causes this error and how could I resolve it?
After a lot of fiddling around I found out that my vue.config.js wasn't valid after updating my npm packages.
module.exports = {
"pwa": {
// My Settings are in here
},
"workboxOptions": {
"navigateFallbackWhitelist": [
// Removed this empty object-> {}
]
}
},
"transpileDependencies": [
"vuetify"
],
}
I Had to remove the empty object from navigateFallbackWhitelist
unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.
This is my app.js:
require('./bootstrap');
window.Vue = require('vue');
Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.
1. requiring polyfill
Approach: Adding require("#babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill
Result: Following Error Message shown in IE console:
SCRIPT1003: ':' expected
Clearly a compatibility issue, since pre data(){} is invalid in ES < 5
2. using mix.babel
Approach: Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
Result: Same Error Message as in 1
3. using an mix extension
Approach: Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})
Result: Again, the same Error Message as in 1
4. manually transpiling with babel-cli
Approach: Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/
Result: Stil no luck, same error as in 1
I am really starting to get frustrated, so any help is much appreciated.
If you can't get Babel-Polyfill to work, you could try using Polyfill.io, which automatically polyfills the selected Polyfills if the browser requires them.
All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head.
I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
I'm developing a vue-cli 2.9.3 app with the webpack template. I have a component which uses MapboxGL, imported with import mapboxgl from 'mapbox-gl;'.
Everything works fine in dev using npm run dev.
I can build the project without issue with npm run build. However, I get the following error on the console when navigating to the component using MapboxGL:
ReferenceError: e is not defined
The DevTools from Firefox or Chrome are unable to make the link to the sourcemap (.js.map) files, so the error message is not very helpful.
I was able to make the bundle work by using devtool: eval-source-map instead of devtool: source-map in ./config/index.js, but the bundle size becomes > 8Mb which is not acceptable and it is not recommended in production.
I have also tried without sourcemaps but I got the same cryptic error.
How can I debug this error in the packaged bundle? I would like to at least be able to see where the error comes from.
It seems that it is a known bug with MapboxGL and Webpack.
It can be solved by adding the following in ./build/webpack.prod.conf.js:
module: {
...
noParse: /(mapbox-gl)\.js$/,
...
}