I am trying to implement phantom js in angular 8 application by following below steps:
npm install karma-phantomjs-launcher --save-dev
npm install intl --save
Add import 'core-js/client/shim'; and import intl; to polyfills.ts.
I am getting following syntax error on running ng test:
SyntaxError: Use of reserved word 'class'
at http://localhost:9876/_karma_webpack_/polyfills.js:22707:0
Kindly guide me for this issue.
Thanks
Set the target in tsconfig.spec.json to es5 instead of the default es6
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"types": [
"jasmine",
"node"
],
"target": "es5", <<<========== add this line
},
Add the following to your polyfills.ts file:
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
Related
I'm using Jest as a test runner in a Vue 3 project that makes use of the #vueform slider plugin:
https://github.com/vueform/slider
the code in #vueform/slider/dist/slider.js:1 tiggers a "SyntaxError: Cannot use import statement outside a module" error.
I've tried adding a "transformIgnorePatterns" entry in the package.json's Jest configuraiton:
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.(vue)$": "vue3-jest"
},
"transformIgnorePatterns": ["/node_modules/(?!#vueform/slider/)", "node_modules/(?!#vueform/)"]
}
I Also added "type": "module" to package.json
And tried changing
import SliderPrice from "#vueform/slider"
to
const SliderPrice = require("#vueform/slider")
Still getting the same error!
Any ideas how I can solve this issue? I can't test anything with Jest until this error gets sorted.
Edit:
I forgot to add this: Intially, the error message details included the entire (minimized) slider.js file. After adding "type": "module" to package.json the details now include just this line:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";
Edit 2:
My babel config is in a .babelrc file:
{
"presets": ["#babel/preset-env"]
}
Vue is the front end setup within a Laravel application, but the webpack.mix.js configuration file doesn't use babel.
Edit 3:
After a few more hours of playing around with the settings, I believe that this is Babel related:
If I delete my .babelrc file then I start getting the "SyntaxError: Cannot use import statement outside a module" error for my own .vue files. This shows that with the .babelrc file, my ES6 javascript files are being transformed to ES5.
So the Vue plugins, like #vueform/slider/ are NOT being transformed to ES5 by Babel, even though the correct path is defined in "transformIgnorePatterns"
For vue3 and 2 (I didn't test it on 2 but should work)
npm i -D #babel/preset-env babel-jest
babel.config.js
{
"presets": ["#babel/preset-env"]
}
I have had issues also with vue files. Below my configuration works ok.
npm i -D #vue/vue3-jest # or 2 if you are on second version
jest.config.js
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.[t|j]sx?$': 'babel-jest',
'^.+\\.vue$': '#vue/vue3-jest',
},
}
I followed the guide and I used react-native-dotenv lib.
Here is my babel.co
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
'module:react-native-dotenv',
],
};
Here is what I have in my .env file:
URL="someUrl"
And this is how I'm trying to use it:
import {URL} from 'react-native-dotenv';
But I'm still getting this error:
Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
Any solutions on this please?
The documentation tells you to import it via:
import {URL} from '#env'
and not
import {URL} from 'react-native-dotenv';
Im getting uncovered lines on the last import in certain files when I run jest. For example,
import { StyleSheet, Platform } from "react-native";
import colors from "../../../../theme/color";
import fontStyles from "../../../../shared/fontStyles";
The fontStyles will be uncovered. The issue started after upgrading react-native which makes a bunch of native changes plus, a .flowconfig file was created and a .babelrc file was created replacing the values for babel that we had in package.json with
in .babelrc:
{
"presets": ["module:metro-react-native-babel-preset"]
}
I had this issue too and it possible solution can be by removing this line on package.json or jest.config.json
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success?
I found many posts on the net that explain how it should be done but without success. I tried to combine in almost all the ways possible the setup explained below without success, endind with many different errors up to a blank page
The application runs fine wit Chrome or FF
If someone has such an application running in IE 11 it would be greatly appreciated
Context (all the latest versions):
vue-cli
typescript
vue.js + vue-router + vuex + vuex-persistedstate
vuetify + vue-i18n + vuelidate
axios
Pardon me if some question seems stupid as I'm quite a newbie on babel/webpack dev..
What I've tried and questions :
(i've tried almost all the combinations the following)
Should I use npm install babel-polyfill --saveas explained in the vuetify setup for IE 11 here?
Should I addimport 'babel-polyfill'inmain.tsas explained in the vuetify setup for IE 11 here?
Or should I addimport '#babel/polyfill'inmain.tsas explained here
Should I use npm install #babel/preset-env --save-devas explained in the vuetify setup for IE 11 here or is it unnecessary due tovue-cli being used?
inbabel.config.js, should I replace the content initially created by vue-cli
presets: [
'#vue/app'
]
by as explained here
presets: ['#babel/preset-env']
or (as seen in many places)?
presets: [['#vue/app', useBuiltIns: 'entry' }]]
or add the 2 presets?
presets: [
['#babel/preset-env'],
['#vue/app', useBuiltIns: 'entry' }]
]
Should I add some plugins like explained here?
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
Or change it like this as explained in the vue doc here?
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
invue.config.js, should I add?
transpileDependencies: [
'vuetify',
'vue-i18n',
'vuelidate',
'axios'
]
[SOLUTION 2019-06-25]
We finally got it to work, the answer from #blackening was very helpful
It happened also that we had javsacript errors in IE 11 with google"reCaptcha"that disappeared after the following setup:
As a prerequisite,vue-cliis installed and the project is created by selecting`'Use Babel alongside TypeScript for auto-detected polyfills'
1) installcore-js#3
npm install core-js#3
2) editmain.tslike this:
import 'core-js/stable'
import Vue from 'vue'
import '#/plugins/vuetify'
{...}
3) editbabel.config.js
module.exports = {
presets: [
['#vue/app', { useBuiltIns: 'entry' }]
]
}
And that's it !
Now we are fighting with IE 11 CSS, but that's a know story... As a nexample, invue to apply a style only to IE, just code it like this
<style scoped>
/* Only for IE 11, wrap div text */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ieMaxWidth90 {
max-width: 90vw; /* 90% view width */
}
}
</style>
I'll do a partial answer.
1) #vue/app and babel presets are included in vue-cli.
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills
This is stated clearly in the vue-cli documentation. But it also specifies:
"If one of your dependencies need polyfills, you have a few options:
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js"
2) You still need to put the babel polyfill in each entry file.
Traditionally: import '#babel/polyfill' in your main.ts.
What babel-preset-env does is that it detects your browserlist then replaces that line with whatever polyfills it deems necessary.
3) #babel/polyfill is deprecated. Who knew.
Some people need extra heavy duty polyfills. That's me. Because internet exploder in office-js + being too used to bleeding edge tech. That's where core-js # 3 comes in.
My webpack build is fully custom for that purpose. But i ripped it out of the vue-cli and modified from there.
My babel loader config :
const BABEL_LOADER = {
loader: 'babel-loader',
options: {
plugins: ['#babel/plugin-syntax-dynamic-import'],
presets: [
// '#vue/app',
['#babel/preset-env', {
targets: {
ie: '11',
browsers: 'last 2 versions',
},
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
}],
],
},
};
This is the top of my entry file:
import Vue from 'vue';
import App from './App.vue';
// ------------ Polyfill ------------
import 'core-js/stable';
The core-js replaces #babel/polyfill.
More reading on core-js: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
npm install --save core-js
Top two lines of main.js:
import "core-js/stable";
import "regenerator-runtime/runtime";
In vue.config.js:
module.exports = {
...,
transpileDependencies: ['vuetify']
}
According to this tutorial, after installing the vuetify using the following command:
npm install vuetify --save
Then, import the Vuetify in the main.ts file, like this:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
After that, using this command to install babel-polyfill:
npm install --save babel-polyfill
Then, add the import at the top of the main.ts file, the final code as below:
import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
Finally, using "npm run serve" command to run the application, it works well in IE 11.
I'm new to Ionic 4 and am trying to get SQLite working. I have added the cordova plugin and the ionic native sqlite but when I try and set it up in the app module I get the above error. Here is my app,module.ts
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IonicStorageModule } from '#ionic/storage';
import { SQLite } from '#ionic-native/sqlite';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
SQLite,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Can anyone help?
You have to import from '#ionic-native/sqlite/ngx'
https://ionicframework.com/docs/native
It looks like this has to do with the recent release of Ionic 4. I ran into this issue with #ionic-native/file within my app. If you installed after the release without specifying the version you wanted, you probably got the latest or beta version.
I was able to fix it by rolling back to an earlier version by modifying my package.json to reflect the version required -- I had 5.0.0 installed and rolled back to 4.20.0. If you have VersionLens for VSCode it will show you the minimum and the latest versions.
Then, clear your node modules, and reinstall:
rm -rf node_modules/
npm install
There is another post open this, available here:
Type HTTPOriginal is not assignable to type Provider, ionic error after plugin installation
It happens because of the new update of ionic 4.
You have to add /ngx to your plugin's import. Like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
Otherwise fallback to ionic v4.
More info here
Everywhere where native plugins are imported, you need to add /ngx/.
Moreover, this must be done throughout the project, otherwise the error will still appear.
Error example:
import {Market} from '#ionic-native/market';
True example:
import {Market} from '#ionic-native/market/ngx';
Import:
import { SQLitePorter } from '#ionic-native/sqlite-porter/ngx';
import { SQLite } from '#ionic-native/sqlite/ngx';
And add into provider:
providers: [
SQLite,
SQLitePorter
]
This usually happens if you import them from different path.
You have to import '#ionic-native/sqlite/ngx' at both app.module.ts and the page you want to use it.