Syntax error on IE11 with Angular 10(non-CLI) - javascript

I'm currently making app in Angular 10 (not use Angular-cli).
This app is compiled and bundled using webpack 4 and #ngtools/webpack, then working fine on Chrome, but not working on IE11 with below error.
SCRIPT1002: Syntax error
vendor.js (2, 5884)
function makeDecorator(name, props, parentClass, additionalProcessing, typeFn) {
return noSideEffects(() => {
^^^^^
How can I get rid of this error?
webpack.config.js (excerpt)
module.exports = {
entry: {
'polyfills': './app/polyfills.ts',
'vendor': './app/vendor.ts',
'app': './app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
{
loader: '#ngtools/webpack'
}
]
}
]
}
plugins: [
new AngularCompilerPlugin({
tsConfigPath: 'tsconfig.json',
entryModule: 'app/app.module.ts#AppModule'
})
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"types": ["node", "core-js"],
"typeRoots": ["node_modules/#types"],
"sourceMap": true,
"plugins": [
{ "name": "#angular/language-service" }
],
"lib" : ["es2015", "es2015.iterable", "dom"],
},
"exclude": [
"node_modules",
],
"angularCompilerOptions": {
"enableIvy": true,
"skipMetadataEmit" : true,
}
}
polyfills.ts
import "core-js/es/array/index";
import "core-js/es/date/index";
import "core-js/es/function/index";
import "core-js/es/map/index";
import "core-js/es/math/index";
import "core-js/es/number/index";
import "core-js/es/object/index";
import "core-js/es/reflect/index";
import "core-js/es/regexp/index";
import "core-js/es/set/index";
import "core-js/es/string/index";
import "core-js/es/symbol/index";
import "core-js/features/reflect/index";
import "zone.js/dist/zone";
import "classlist.js";
import "web-animations-js";
if (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json (dependencies)
"dependencies": {
"#angular/animations": "10.2.0",
"#angular/common": "10.2.0",
"#angular/compiler": "10.2.0",
"#angular/compiler-cli": "10.2.0",
"#angular/core": "10.2.0",
"#angular/forms": "10.2.0",
"#angular/language-service": "10.2.0",
"#angular/platform-browser": "10.2.0",
"#angular/platform-browser-dynamic": "10.2.0",
"#angular/router": "10.2.0",
"#fortawesome/fontawesome-free": "5.15.1",
"angular-in-memory-web-api": "0.11.0",
"bootstrap": "4.5.3",
"classlist.js": "1.1.20150312",
"core-js": "3.7.0",
"jquery": "3.5.1",
"popper.js": "1.16.0",
"rxjs": "6.6.3",
"web-animations-js": "2.3.2",
"zone.js": "0.11.2",
},
"devDependencies": {
"#ngtools/webpack": "10.2.0",
"#types/core-js": "2.5.4",
"#types/jasmine": "3.5.14",
"#types/node": "14.14.2",
"#types/webpack": "4.41.23",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"browserify": "17.0.0",
"codelyzer": "6.0.1",
"copy-webpack-plugin": "6.2.1",
"copyfiles": "2.4.0",
"css-loader": "5.0.0",
"file-loader": "6.1.1",
"glob": "7.1.6",
"html-loader": "1.3.2",
"html-webpack-plugin": "4.5.0",
"istanbul-instrumenter-loader": "3.0.1",
"mini-css-extract-plugin": "0.12.0",
"nodemon": "2.0.6",
"raw-loader": "1.0.0",
"reflect-metadata": "0.1.13",
"regenerator-runtime": "0.13.7",
"remap-istanbul": "0.13.0",
"rimraf": "3.0.2",
"source-map-loader": "1.1.1",
"style-loader": "2.0.0",
"terser-webpack-plugin": "4.2.3",
"to-string-loader": "1.1.6",
"ts-helpers": "1.1.2",
"ts-node": "9.0.0",
"tslint": "6.1.0",
"typescript": "4.0.3",
"watchify": "3.11.1",
"webpack": "4.44.1",
"webpack-cli": "3.3.12",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.11.0",
"webpack-md5-hash": "0.0.6",
"webpack-merge": "5.2.0"
}

Check browserslist file. You should remove not before IE 9-11. Like this:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

Related

After npm eject in CRA environment variables receive undefined

I started new project with npx create-react-app and after that npm eject. But when everything completed, in the beginning of each file I get this eslint error:
Parsing error: [BABEL] /Users/admin/Desktop/Work/practise/todo-blockchain/scripts/start.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/admin/Desktop/Work/practise/todo-blockchain/node_modules/babel-preset-react-app/index.js")
I've surfed the net a lot but did not found any answers. I tried to change the babel presets, add plugins but nothing helped.
I'm using MacOS and looking forward to your help
This is my package.json:
{
"name": "todo-blockchain",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.16.0",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"#svgr/webpack": "^5.5.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.1.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.1.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"tonweb": "^0.0.40",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start": " node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
]
}
}
Just to close the question
As mentioned in this link https://github.com/facebook/create-react-app/issues/12070#issuecomment-1086568526
It's an issue related to create-react-app that will probably be fixed in the next version.
Adding the code below to the eslintrc.js resolves the issue for now
"parserOptions": { "babelOptions": { "presets": [ ["babel-preset-react-app", false] ] } }

Main.js file too large in angular 12

While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
enter image description here
"name": "kapilguru",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"serve": "serve --open",
"start": "ng serve --source-map=false --host 0.0.0.0 --disable-host-check ",
"build": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^12.2.2",
"#angular/cdk": "^11.2.4",
"#angular/common": "~12.2.2",
"#angular/compiler": "~12.2.2",
"#angular/core": "~12.2.2",
"#angular/forms": "~12.2.2",
"#angular/material": "^11.2.4",
"#angular/platform-browser": "^12.2.2",
"#angular/platform-browser-dynamic": "~12.2.2",
"#angular/router": "~12.2.2",
"#material/button": "^10.0.0",
"#material/notched-outline": "^10.0.0",
"#material/ripple": "^10.0.0",
"#material/textfield": "^10.0.0",
"#ng-bootstrap/ng-bootstrap": "^9.0.2",
"#types/file-saver": "^2.0.2",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"angular-ng-autocomplete": "^2.0.5",
"angularx-social-login": "^3.5.7",
"assert": "^2.0.0",
"bootstrap": "^4.0.0-beta.2",
"chart.js": "^2.9.3",
"ckeditor4-angular": "^2.2.1",
"crypto-browserify": "^3.12.0",
"file-saver": "^2.0.5",
"fs-web": "^1.0.1",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.7",
"https-browserify": "^1.0.0",
"jquery": "^3.6.0",
"jspdf": "^2.3.1",
"material-icons": "^0.5.4",
"ng-circle-progress": "^1.6.0",
"ng-connection-service": "^1.0.4",
"ng-otp-input": "^1.7.1",
"ng2-charts": "^2.2.3",
"ng2-file-upload": "^1.4.0",
"ngx-editor": "^9.0.2",
"ngx-image-cropper": "^3.3.5",
"ngx-material-timepicker": "^5.5.3",
"ngx-owl-carousel-o": "^5.1.0",
"ngx-spinner": "^11.0.2",
"ngx-toastr": "^13.2.1",
"os-browserify": "^0.3.0",
"paytm-blink-checkout-angular": "^0.0.2",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"sweetalert2": "^11.0.16",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"webex": "^1.136.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^12.2.6",
"#angular/cli": "~12.2.2",
"#angular/compiler-cli": "~12.2.2",
"#types/jasmine": "~3.6.0",
"#types/jquery": "^3.5.5",
"#types/jspdf": "^2.0.0",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"#types/sizzle": "^2.3.3",
"#types/uuid": "^8.3.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
},
"browser": {
"fs": false,
"path": false,
"os": false,
"crypto": false,
"stream": false,
"http": false,
"tls": false,
"zlib": false,
"https": false,
"net": false
}
}
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"disableSizeLimit": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"allowJs": true,
"removeComments": true,
"skipLibCheck": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"ES2015",
"es2018",
"dom"
],
"paths" : {
"crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],
"assert": ["./node_modules/assert"],
"http": ["./node_modules/stream-http"],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify"],
"fs": ["./node_modules/fs-web"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInputAccessModifiers": false,
"strictTemplates": false,
"fullTemplateTypeCheck": false,
"strictInjectionParameters": true,
"enableIvy": true
}
}```
You can gzip your static assets by using "Compression"
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Why tests fail with an error SyntaxError: Unexpected token {?

Good day!
The project uses webpack 5, the tests themselves were written before the transition.
There is clearly a problem with babel, although the config was written according to jest documentation
I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please!
Thank you!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/preset-env": "^7.13.12",
"#babel/runtime": "^7.13.10",
"#mdi/js": "^5.9.55",
"#mdi/svg": "^5.9.55",
"#vue/babel-preset-app": "^4.5.12",
"#vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},
.babelrc
{
"presets": [["#babel/env", { "modules": false }]],
"env": {
"test": {
"presets": [["#babel/env", { "targets": { "node": "current" } }]]
}
}
}
this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).
Here are some basic settings to guide you:
// .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
Remember to install first npm install -D babel-preset-vue
Have a nice day!

React CKeditor Jest error: SyntaxError: Cannot use import statement outside a module

App was created using CreateReactApp with ejecting.
I'm trying to use CKeditor according to this doc CKeditor 5
After few hours it works fine, but much more hours trying to fix error in test finished unsuccessfully!
When I run npm test I got this error:
node_modules/#ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10
import Editor from '#ckeditor/ckeditor5-core/src/editor/editor';
SyntaxError: Cannot use import statement outside a module
1 | import React, { useState, useEffect } from 'react';
2 | import CKEditor from '#ckeditor/ckeditor5-react';
> 3 | import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
my package.json:
{
"private": true,
"dependencies": {
"#babel/core": "7.4.3",
"#ckeditor/ckeditor5-alignment": "^16.0.0",
"#ckeditor/ckeditor5-basic-styles": "^16.0.0",
"#ckeditor/ckeditor5-dev-utils": "^12.0.5",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
"#ckeditor/ckeditor5-editor-classic": "^16.0.0",
"#ckeditor/ckeditor5-essentials": "^16.0.0",
"#ckeditor/ckeditor5-heading": "^16.0.0",
"#ckeditor/ckeditor5-link": "^16.0.0",
"#ckeditor/ckeditor5-list": "^16.0.0",
"#ckeditor/ckeditor5-paragraph": "^16.0.0",
"#ckeditor/ckeditor5-react": "^2.0.0",
"#ckeditor/ckeditor5-theme-lark": "^16.0.0",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"axios": "^0.18.1",
"babel-eslint": "10.0.1",
"babel-jest": "24.7.1",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^8.0.0",
"base64url": "^3.0.1",
"blueimp-load-image": "^2.21.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"cleave.js": "^1.4.10",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"file-loader": "3.0.1",
"fingerprintjs2": "^2.1.0",
"flow-typed": "^2.5.2",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.4",
"history": "^4.9.0",
"html-react-parser": "^0.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"lint-staged": "^8.1.5",
"mini-css-extract-plugin": "0.5.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"qs": "^6.7.0",
"raw-loader": "^3.1.0",
"rc-slider": "^8.6.9",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.0",
"react-avatar-editor": "^11.0.7",
"react-dates": "^20.2.2",
"react-dev-utils": "^9.0.0",
"react-dom": "^16.8.6",
"react-modal": "^3.8.1",
"react-onclickoutside": "^6.8.0",
"react-places-autocomplete": "^7.2.1",
"react-redux": "^7.0.3",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.3",
"react-slick": "^0.24.0",
"react-test-renderer": "^16.8.6",
"react-truncate": "^2.4.0",
"react-with-direction": "^1.3.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && flow"
}
},
"proxy": "https://getrenty-qa.devopsready.tools",
"scripts": {
"start": "node scripts/start.js",
"precommit": "npm test && lint-staged",
"build": "node scripts/build.js",
"test:lint:js": "eslint src/**/*.{js,jsx}",
"test:lint:scss": "stylelint --config=.stylelintrc \"**/*.scss\"",
"test:lint": "npm run test:lint:js && npm run test:lint:scss",
"test:unit": "node scripts/test.js --env=jsdom",
"test": "npm run test:lint && npm run test:unit",
"test:ci": "node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"flow-bin": "^0.98.0",
"jest-junit": "^7.0.0",
"prettier": "^1.17.0",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"stylelint-scss": "^3.6.1",
"husky": "^2.1.0"
},
"jest": {
"coverageReporters": [
"text",
"cobertura"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [
"src/"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
}
}
component code:
import React, { useState, useEffect } from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import styles from './rtf.module.scss';
const editorConfig = {
plugins: [
Essentials,
Alignment,
Bold,
Italic,
Paragraph,
Heading,
Link,
List,
],
toolbar: [
'heading',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'alignment',
],
};
type Props = {
initialData?: string,
onSave: Function,
title?: string,
savingStatus?: string,
};
const Editor = ({ initialData, onSave, title, savingStatus }: Props) => {
const [editorData, setData] = useState(initialData || '');
useEffect(() => {
setData(initialData);
}, [initialData]);
const handleChange = (event, editor) => {
const data = editor.getData();
setData(data);
};
const resetEdit = () => {
setData(initialData);
};
const handleSave = () => {
onSave(editorData);
};
return (
<div>
<div className={styles.title_row}>
<h5 className={styles.title}>{title}</h5>
<button
type="button"
className={`button_small ${styles.to_right}`}
onClick={resetEdit}
>
Reset
</button>
<button
type="button"
className="button_green_dark_short"
onClick={handleSave}
>
Save
</button>
</div>
<div className={styles.saving_status}>{savingStatus}</div>
<div className={styles.rtf_wrapper}>
<CKEditor
config={editorConfig}
editor={ClassicEditor}
onChange={handleChange}
data={editorData}
/>
</div>
</div>
);
};
Editor.defaultProps = {
initialData: '',
title: '',
savingStatus: '',
};
export default Editor;
I have tried modify jest.transformIgnorePatterns in package.json but it failed again.
Any advices?????
This is happening because you are using the unbundled version of the ckeditor, jest does not understand es6, so you got to change transformIgnorePatterns so jest can be able to compile the files for you.
This is for a standard jest configuration (e.g jest.config.js) and .babelrc
*If you are using .babelrc try changing it to babel.config.js
In your jest configuration file include this:
{
moduleNameMapper: {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
},
transformIgnorePatterns: ['/node_modules/(?!#ckeditor)/.+\\.js$']
}
If you are using craco in a react app use it like this:
jest: {
configure(config) {
config.moduleNameMapper = {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
};
...
config.transformIgnorePatterns = ['/node_modules/(?!#ckeditor)/.+\\.js$'];
return config;
},
},
The ckeditor builded version is buggy right now, I hope they fix it soon enough...

angular 2 app not working in ie/edge

I'm not undestand why app not working. app work good in chrome and firefox. ie/edge doesn't show date. it's default tutorial angular 2 app without modifications.Sorry for my english.
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
template: `
<h1>My First Angular App</h1>
<button (click)="showCurrentMonth()">Show Month</button>
<span *ngIf="curentMonth">{{curentMonth}}</span>
<br/>
<button (click)="showCurrentcurentDate()">Show Date</button>
<span *ngIf="curentDate">{{curentDate}}</span>
`
})
.
export class AppComponent {
splitedDate: string[] = new Date().toLocaleDateString().split(".");
curentMonth: string;
curentDate: Date;
months = [
"January","February","March","April",
"May","June","July","August",
"September","October","November","December"
]
showCurrentMonth() {
// udefined in IE/Edge
this.curentMonth = this.months[parseInt(this.splitedDate[1]) - 1]
}
showCurrentcurentDate() {
var splitedcurrentDate: number[] = new Date()
.toLocaleDateString()
.split(".")
.map(d => parseInt(d, 10))
// invalid Date in IE/Edge
this.curentDate = new Date(splitedcurrentDate[2], splitedcurrentDate[1], splitedcurrentDate[0])
}
}
ts.config
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
package.json
"dependencies": {
"#angular/common": "~2.0.2",
"#angular/compiler": "~2.0.2",
"#angular/core": "~2.0.2",
"#angular/forms": "~2.0.2",
"#angular/http": "~2.0.2",
"#angular/platform-browser": "~2.0.2",
"#angular/platform-browser-dynamic": "~2.0.2",
"#angular/router": "~3.0.2",
"#angular/upgrade": "~2.0.2",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"systemjs": "0.19.39",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.2",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.4"
},
"repository": {}

Categories

Resources