Tag: “allowJs”: true

TypeScript Appends export {} to end of file in TypeScript 4 but not TypeScript 3

Post author By Full Stack
Post date November 15, 2020
No Comments on TypeScript Appends export {} to end of file in TypeScript 4 but not TypeScript 3

I have an iife that I would like to compile and I import statement for types. In TypeScript version 3.* it compiles correctly. But in TypeScript version 4.* it appends an export {}. Is there a way to prevent that? Here is the typescript file test.ts: import { Tester } from "./tester" (async function test() […]

Tags "allowJs": true, "alwaysStrict": true, "compileOnSave": true, "include": [ "./src/**/*.ts", "module": "es2015", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitThis": true, "noUnusedLocals": true, "noUnusedParameters": true, "outDir": "./public/app", "skipLibCheck": true, "src/**/*.js"], "src/**/*spec.ts" ] } The command I use for it: tsc -p ./tsconfig.json Update I added this bug report to TypeScript. https://github.co, "src/app/meals/add/index.template.js", "src/app/utils/html-template-tag.js" ], "strict": true, "strictFunctionTypes": true, "strictPropertyInitialization": true, //"strictBindCallApply": true, exclude: /node_modules/, I have an iife that I would like to compile and I import statement for types. In TypeScript version 3.* it compiles correctly. But in TypeScr

Mastering Development

‘ReactPlayer’ cannot be used as a JSX component

Post author By Full Stack
Post date November 8, 2020
No Comments on ‘ReactPlayer’ cannot be used as a JSX component

I attempt to use react-player for my React project. I’m using Typescript. I received the following error when I build it: ‘ReactPlayer’ cannot be used as a JSX component. Its instance type ‘ReactPlayer’ is not a valid JSX element. The types returned by ‘render()’ are incompatible between these types. Type ‘ReactNode’ is not assignable to […]

Tags "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^24.9.1", "@types/node": "^12.12.67", "@types/react-dom": "^16.9.8", "@types/react": "^16.9.56", "allowJs": true, "allowSyntheticDefaultImports": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "dom.iterable", "esModuleInterop": true, "esnext" ], "flexbox-react": "^4.4.0", "forceConsistentCasingInFileNames": true, "include": [ "src" ] } package.json { "name": "home-exercise", "isolatedModules": true, "jsx": "react" }, "lib": [ "dom", "module": "esnext", "moduleResolution": "node", "moment": "^2.29.1", "private": true, "react-dom": "^16.13.1", "react-player": "^2.6.2", "react-scripts": "3.4.3", "react": "^16.13.1", "resolveJsonModule": true, "skipLibCheck": true, "typescript": "^3.7.5" }, "version": "0.1.0", { strict: false }), //"noEmit": true, I attempt to use react-player for my React project. I'm using Typescript. I received the following error when I build it: 'ReactPlayer' cann

Mastering Development

CRA error – Cannot add property paths, object is not extensible

Post author By Full Stack
Post date October 29, 2020
No Comments on CRA error – Cannot add property paths, object is not extensible

[debug: true] PS C:\data\test\todo> npm start > todo@0.1.0 start C:\data\test\todo > craco start craco: *** Cannot find ESLint loader (eslint-loader). *** Initial options: { "source": "tsconfig", "baseUrl": "./src", "tsConfigPath": "./tsconfig.extend.json", "debug": true } Normalized options: { "source": "tsconfig", "baseUrl": "./src", "tsConfigPath": "./tsconfig.extend.json", "debug": true } Aliases: { "@root": "C:\\data\\test\\todo\\src" } Webpack Config: { "react-native": "react-native-web", […]

Tags "@root": "C:\\data\\test\\todo\\src" } C:\data\test\todo\node_modules\react-scripts\scripts\start.js:19 throw err; ^ TypeError: Cannot, "@root/*": ["./*"] } } } tsconfig.json { "extends": "./tsconfig.extend.json", "allowJs": true, "allowSyntheticDefaultImports": true, "baseUrl": "src", "compilerOptions": { "target": "es5", "debug": true } Aliases: { "@root": "C:\\data\\test\\todo\\src" } Webpack Config: { "react-native": "react-native-web", "debug": true } Normalized options: { "source": "tsconfig", "dom.iterable", "esModuleInterop": true, "esnext" ], "forceConsistentCasingInFileNames": true, "include": [ "src" ] } What am I missing? I did this. just yarn create react-app myapp --template typescript yarn add @craco/craco y, "isolatedModules": true, "jsx": "react" }, "lib": [ "dom", "module": "esnext", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "paths": { "@root": ["./"], "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "tsConfigPath": "./tsconfig.extend.json", [debug: true] PS C:\data\test\todo> npm start > todo@0.1.0 start C:\data\test\todo > craco start craco: *** Cannot find ESLint loader (es, // baseUrl SHOULD be specified // plugin does not take it from tsconfig baseUrl: "./src", // tsConfigPath should point to the file where "baseUrl" and "paths" are specified tsConfigPath: "./tsconfig.extend.json", //"noEmit": true, debug: true } } ] }; tsconfig.extend.json { "compilerOptions": { "baseUrl": "./src", object is not extensible at verifyTypeScriptSetup (C:\data\test\todo\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:23, options: { source: "tsconfig"

Mastering Development

Typescript ignores decorated mobx properties on class type definition

Post author By Full Stack
Post date October 15, 2020
No Comments on Typescript ignores decorated mobx properties on class type definition

This is a simplified example. I have a class definition using decorators like: export default class AnimationController { @observable animationTime: number = 0; @computed({keepAlive: true}) get interpolatedJoints(){} @computed({keepAlive: true}) get currentAnimation(){} } elsewhere I am importing this class to use as a type definition and getting an error when accessing these expected properties. import AnimationController […]

Tags "allowJs": true, "Dom", "experimentalDecorators": true, "jsx": "react" }, "lib": [ "es2019", "module": "es6", "moduleResolution": "node", "noImplicitAny": true, "sourceMap": true, "target": "es5", "typeRoots": [ "./node_modules/@types", "typescript": "^4.0.3", "webpack": "^4.44.2", my tsconfig.json looks like the follow9ing { "compilerOptions": { "outDir": "./dist/", This is a simplified example. I have a class definition using decorators like: export default class AnimationController { @observable anim

Mastering Development

How to enable @ experimentalDecorators in next.config.js or babelrc

Post author By Full Stack
Post date August 29, 2020
No Comments on How to enable @ experimentalDecorators in next.config.js or babelrc

Hi if someone would help me, I wanna use @Decorators on my nextjs app, but I get the following error. Hope someone knows what Im doin wrong Error message: Syntax error: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled: I’m trying to use typeorm / type-graphql to generate my backend in an app subfolder. […]

Tags 'default': '1', 'id', 'keywords', 'webpack'] }, "@accounts/password": "^0.29.0", "@accounts/server": "^0.29.0", "@accounts/typeorm": "^0.29.0", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-syntax-top-level-await": "^7.10.4", "@babel/plugin-transform-typescript": "^7.11.0", "@babel/preset-es2017": "^7.0.0-beta.53", "@babel/preset-typescript": "^7.10.4", "@graphql-modules/core": "^0.7.17", "@saeris/apollo-server-vercel": "0.3.0", "@types/node": "^14.0.27", "@types/react-dom": "^16.9.8", "@types/react": "^16.9.46", "@zeit/next-css": "^1.0.1", "@zeit/next-typescript": "^1.1.1", "**/*.tsx"] } package.json { "name": "apollo-server-vercel-demo", "allowJs": true, "apollo-server-express": "^2.16.1", "babel-plugin-parameter-decorator": "^1.0.16", "build": "next build", "class-validator": "^0.12.2", "dependencies": { "@accounts/graphql-api": "^0.29.0", "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.10.4", "dom.iterable", "esModuleInterop": true, "esnext" ], "experimentalDecorators": true, "express": "^4.17.1", "forceConsistentCasingInFileNames": true, "graphql-subscriptions": "^1.1.0", "graphql": "15.3.0", "include": ["next-env.d.ts", "isolatedModules": true, "jsx": "preserve" }, "lib": [ "dom", "license": "ISC", "main": "pages/index.tsx", "module": "esnext", "moduleResolution": "node", "next": "9.5.2", "react-dom": "^16.13.1", "react": "^16.13.1", "resolutions": { "webpack": "^5.0.0-beta.28" } } Blockquote, "resolveJsonModule": true, "scripts": { "dev": "next", "skipLibCheck": true, "start": "next start" }, "type-check": "tsc" }, "type-graphql": "^1.0.0", "typescript": "^3.9.7" }, "version": "1.0.0", "webpack": "^5.0.0-beta.28" }, ('isArray', ]); return config; } );, { "plugin-proposal-decorators": {"legacy": true} } ] ], { buildId, { nullable: true }) // // @Column() // author?: User; @Field(() => Boolean) @Column({ default: false }) isPublished: boolean; @, { strict: false }), {dev}), {each: true}) @IsPositive({each: true}) @ArrayUnique() @ArrayNotEmpty() @ArrayMinSize(4) @ArrayMaxSize(4) @Column("integer", } from 'type-graphql'; import { BaseEntity, } from 'typeorm'; import { ArrayNotEmpty, } next.config.js module.exports = { webpack: (config, } tsconfig.json { "compilerOptions": { "target": "es2018", //"noEmit": true, #TS, 2, 3, 4, array: true }) @Field(() => [Number!]!) position: number[]; @Field() @CreateDateColumn({ type: "timestamp" }) createdAt: Date;, ArrayMaxSize, ArrayMinSize, ArrayUnique, but I get the following error. Hope someone knows what Im doin wrong Error message: Syntax error: Support for the experimental syntax 'dec, column], CreateDateColumn, defaultLoaders, description, Entity, exclude: /node_modules/, Hi if someone would help me, I wanna use @Decorators on my nextjs app, IsBase64, IsNotEmpty, IsNumber, IsPositive, isServer, IsString } from "class-validator"; // import {User} from '@accounts/typeorm' // extends interface User { // documents: [Booking] // }; /, length, ManyToOne, max(.), maxlength, Min, nullable: true }) @IsBase64() merged: string; @IsArray() @Max(300, nullable: true }) signature: string; } babelrc { "presets": [ [ "next/babel", ObjectType, PrimaryGeneratedColumn, typescript }) => { config.experiments = { topLevelAwait: true, UpdateDateColumn, user => user.documents) // author: User; // @Field(() => Object, ValidateNested, VersionColumn

Mastering Development

Is it possible to configure wdio to make use of different tsconfig files?

Post author By Full Stack
Post date August 5, 2020
No Comments on Is it possible to configure wdio to make use of different tsconfig files?

I’m trying to get wdio setup to run our React TypeScript app. The problem is that it only works if I modify the tsconfig.json file itself to make use of the required types, change module to commonjs and set isolatedModules to false: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, […]

Tags "@wdio/jasmine-framework"] }, "@wdio/sync", "$src/*": ["./src/*"] }, "allowJs": true, "allowSyntheticDefaultImports": true, "compilerOptions": { "baseUrl": "./", "dom.iterable", "esModuleInterop": true, "esnext" ], "forceConsistentCasingInFileNames": true, "include": [ "./src/**/*.ts" ] } I've tried setting the jasmineNodeOpts in wdio.conf.js itself to retrieve the tsconfig.test.json but, "include": [ "src" ] } What I want to do is to be-able to break this out into separate tsconfig.json files and make use of each as and, "isolatedModules": true, "jsx": "react" }, "lib": [ "dom", "module": "commonjs", "moduleResolution": "node", "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "types": ["node"] }, // // The Jasmine framework allows interception of each assertion in order to log the state of the application // or website, // helpers: ["helper.js"], // Jasmine default timeout defaultTimeoutInterval: 60000, //"noEmit": true, assertion) { // do something } }, change module to commonjs and set isolatedModules to false: { "compilerOptions": { "target": "es5", either via a flag or whatever, I'm trying to get wdio setup to run our React TypeScript app. The problem is that it only works if I modify the tsconfig.json file itself to, it is pretty handy to take a screenshot every time // an assertion fails. expectationResultHandler: function(passed, paths, something like the following: { "extends": "./tsconfig.json", to use a specific tsconfig file? EDIT Added wdio.conf.js jasmine object: // Options to be passed to Jasmine. jasmineNodeOpts: {, when running wdio for our integration tests I only want it to make use of the tsconfig.test.json file

Mastering Development

Issue trying to setup jest: application code compiles fine but test code doesn’t

Post author By Full Stack
Post date June 26, 2020
No Comments on Issue trying to setup jest: application code compiles fine but test code doesn’t

I am trying to migrate to jest and I am facing typescript issues… I have 3 tsconfig files: tsconfig.json (base config) tsconfig.lib.json (application config) tsconfig.jest-spec.json (jest-dedicated test config) Please note that there are also karma/jasmine dedicated tsconfig files but those are irrelevant. I have separated the jest tests from the karma ones. tsconfig.json { "compileOnSave": […]

Tags 'html2pdf.js', 'ng-circle-progress'].join('|'); module.exports = { preset: 'jest-preset-angular', 'ngx-bootstrap', "**/*.d.ts" ], "**/*.ispec.ts", "**/*.jest-spec.ts", "**/*.spec.ts", "**/*.uspec.ts" ] } Here is also my jest.config.js file: const esModules = ['ng-inline-svg', "**/*.uspec.ts" ] } tsconfig.jest-spec.json { "extends": "../../tsconfig.json", "allowJs": true, "allowSyntheticDefaultImports": true, "angularCompilerOptions": { "annotateForClosureCompiler": true, "compilerOptions": { "outDir": "../../dist/out-tsc/libs/xxx", "compilerOptions": { "sourceMap": true, "declaration": false, "declaration": true, "Dom", "emitDecoratorMetadata": true, "enableResourceInlining": true }, "es2015", "esModuleInterop": true, "exclude": [ "src/test.ts", "experimentalDecorators": true, "fullTemplateTypeCheck": true, "importHelpers": true, "include": [ "**/*.jest.ts", "inlineSources": true, "lib": [ "dom", "lib": ["es2017", "module": "commonjs", "module": "es2015", "moduleResolution": "node", "skipTemplateCodegen": true, "sourceMap": true, "strictInjectionParameters": true } }, "strictMetadataEmit": true, "target": "es2015", "target": "es5", "tmp" ] } tsconfig.lib.json { "extends": "../../tsconfig.json", "typeRoots": [ "./node_modules/@types", "types": [ "jest", "types"], baseUrl, e.g. it's not plain JavaScript. By default, especially imports for example: From: import * as moment_ from 'moment'; const moment = moment_; To: import moment from 'moment'; Here i, exclude: /node_modules/, globals: { 'ts-jest': { tsConfig: '/tsconfig.jest-spec.json' } }, I am trying to migrate to jest and I am facing typescript issues... I have 3 tsconfig files: tsconfig.json (base config) tsconfig.lib.json, I have to adapt the whole application code base, if Jest sees a Babel config, ignoring "node_modules". Here's what you can do: • To have some of your "node_modules" files transformed, it will use that to transform your files, moduleNameMapper: { "^@XXX-ui/counterparty(.*)": "/src/lib/counterparty/src/$1", node, paths, rootDir: 'libs/xxx', roots: ['/src/lib'], setupFiles: ['/jest-globals.js'], setupFilesAfterEnv: ['/jest.base.setup.ts'], testMatch: ['**/?(*.)+(jest-spec|jest).[jt]s'], transformIgnorePatterns: [`/node_modules/(?!${esModules})`], With the above setup, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option i

Mastering Development

Must I fix all TSLint errors before Angular production build?

Post author By Full Stack
Post date June 6, 2020
No Comments on Must I fix all TSLint errors before Angular production build?

I am able to run my Angular v8 app in development mode even there are TSlint TS errors (just showed few at below). However, when I try to build for production, it failed with npm ERR! code ELIFECYCLE npm ERR! errno 2. I have a number of TSlint TS errors, is there a way to […]

Tags 'ar-ly', 'browser', 'postcss-loader', 'ta' // jhipster-needle-i18n-language-moment-webpack - JHipster will add/remove languages in this array ], "/js/**", "allowJs": true, "angularCompilerOptions": { "genDir": "target/classes/aot", "css-loader", "Dom", "emitDecoratorMetadata": true, "experimentalDecorators": true, "fullTemplateTypeCheck": true, "importHelpers": true, "include": ["src/main/webapp/app", "lib": ["es7", "module": "esnext", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noImplicitReturns": true, "outDir": "target/classes/static/app", "paths": { "app/*": ["src/main/webapp/app/*"] }, "preserveWhitespaces": true } } webpack.prod.js: const webpack = require('webpack'); const webpackMerge = require('webpack-merge'); const, "removeComments": false, "skipLibCheck": true, "skipMetadataEmit": true, "sourceMap": false, "sourceMap": true, "src/main/webapp/app/module/webrtc/"] } Here is my tsconfig-aot.json: { "compilerOptions": { "target": "es6", "src/test/javascript/"], "strictPropertyInitialization": false, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "./node_modules/@types", "zh-CN, { // Enable source maps. Please note that this will slow down the build. // You have to enable it in Terser config below and in tscon, { loader: 'sass-loader', { strict: false }), { test: /(vendor\.css|global\.css)/, { test: /(vendor\.scss|global\.scss)/, { test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i, { test: /\.css$/, { test: /\.scss$/, { test: /manifest.webapp$/, // Enable source maps. Please note that this will slow down the build terserOptions: { ecma: 6, // Ignore warnings about System.import in Angular { test: /[\/\\]@angular[\/\\].+\.js$/, // Webpack statistics in target folder reportFilename: '../stats.html' }), alias: utils.mapTypescriptAliasToWebpackAlias() }, and here is my tsconfig.json: { "compilerOptions": { "target": "es6", baseUrl, beautify: false, booleans: true, cache: true, caseSensitive: true, chunkFilename: 'app/[id].[hash].chunk.js' }, chunkFilename: 'content/[id].css' }), compress: { dead_code: true, conditionals: true, debug: false, drop_debugger: true, ecma: 6, entry: { polyfills: './src/main/webapp/app/polyfills', exclude: [/swagger-ui/] }) ], exclude: /(src\/main\/webapp\/index.html)/ }, exclude: /(vendor\.css|global\.css)/ }, exclude: /(vendor\.scss|global\.scss)/ }, exclude: /node_modules/, filename: 'app/[name].[hash].bundle.js', global: './src/main/webapp/content/scss/global.scss', hash: 'sha512', I am able to run my Angular v8 app in development mode even there are TSlint TS errors (just showed few at below). However, I am using JHipster 6.7.1, ie8: false, if_return: true, indent_level: 2, inline: true, is there a way to build for production without fixing these errors? ERROR in src/main/webapp/app/home/home.component.ts:16:3 - error TS2564:, it failed with npm ERR! code ELIFECYCLE npm ERR! errno 2. I have a number of TSlint TS errors, join_vars: true, loader: '@ngtools/webpack' }, loader: 'file-loader', loader: 'html-loader' }, loops: true, main: './src/main/webapp/app/app.main' }, main="", mainFields: [ 'es2015', mangle: { module: true, minifyCSS:false }, minifyJS:false, minimizer: [ new TerserPlugin({ parallel: true, mode: 'production' }); webpack.common.js: const webpack = require('webpack'); const { BaseHrefWebpackPlugin } = require('base-href-webpack-, module, module: { rules: [ { test: /\.html$/, module: { rules: [{ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, module: true, modules: [ 'node_modules' ], name: 'content/[hash].[ext]' } }, new AngularCompilerPlugin({ mainPath: utils.root('src/main/webapp/app/app.main.ts'), new BundleAnalyzerPlugin({ analyzerMode: 'static', new MomentLocalesPlugin({ localesToKeep: [ 'en', new OptimizeCSSAssetsPlugin({}), new webpack.LoaderOptionsPlugin({ minimize: true, new WorkboxPlugin.GenerateSW({ clientsClaim: true, openAnalyzer: false }) ], optimization: { runtimeChunk: false, options: { digest: 'hex', options: { implementation: sass } }], options: { minimize: true, options: { name: 'manifest.webapp' } }, options: { publicPath: './' } }, output: { comments: false }, output: { path: utils.root('target/classes/static/'), parser: { system: true }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both, properties: true, removeAttributeQuotes:false, skipWaiting: true, stats: { children: false, toplevel: true, tsConfigPath: utils.root('tsconfig-aot.json'), unused: true, use: [ { loader: MiniCssExtractPlugin.loader }, use: ['to-string-loader', warnings: false, when I try to build for production

Development

Jest encountered an unexpected token – React with jest and enzyme

Post author By Full Stack
Post date March 6, 2020
No Comments on Jest encountered an unexpected token – React with jest and enzyme

tsconfig.json { “extends”: “./node_modules/pcf-scripts/tsconfig_base.json”, “compilerOptions”: { “typeRoots”: [“node_modules/@types”], “allowJs”: true, “skipLibCheck”: true, “esModuleInterop”: true, “allowSyntheticDefaultImports”: true, “forceConsistentCasingInFileNames”: true, “module”: “esnext”, “moduleResolution”: “node”, “resolveJsonModule”: true, “isolatedModules”: true, “sourceMap”: true }, “include”: [“./ConsumptionSummaryComponent/src”, “ConsumptionSummaryComponent/globals.d.ts”], “exclude”: [“./node_modules/pcf-scripts/./node_modules”] } .babelrc file { “env”: { “test”: { “plugins”: [ “@babel/plugin-transform-modules-commonjs” ] } } } Package.json { “name”: “pcf-project”, “version”: “1.0.0”, […]

Tags '^.+\\.tsx?$': 'ts-jest' }, "^.*.svg$": "/src/blank-mock.js" }, "^.+\\.jsx$": "ts-jest" }, "^style-loader.*$": "/ConsumptionSummaryComponent/src/blank-mock", "@babel/preset-env": "^7.8.4", "@common-pcf/sdk": "file:../sdk/common-pcf-sdk-1.0.0.tgz", "@graphql-codegen/introspection": "1.12.1", "@graphql-codegen/typescript-operations": "1.12.1", "@graphql-codegen/typescript-react-apollo": "1.12.1", "@graphql-codegen/typescript": "1.12.1", "@microsoft/applicationinsights-web": "^2.3.1", "@types/enzyme-adapter-react-16": "1.0.6", "@types/enzyme": "3.10.5", "@types/jest": "^25.1.1", "@types/node": "^10.12.18", "@types/powerapps-component-framework": "^1.2.0", "@types/react-dom": "^16.9.5", "@types/react": "^16.9.19", "@uifabric/fluent-theme/lib/": "@uifabric/fluent-theme/lib-commonjs/", "@uifabric/icons": "^7.3.2", "@uifabric/styling/lib/": "@uifabric/styling/lib-commonjs/", "/ConsumptionSummaryComponent/src/services/**/*.{ts, "/js/**", "allowJs": true, "allowSyntheticDefaultImports": true, "apollo-boost": "^0.4.7", "babel-jest": "^25.1.0", "babelConfig": "/ConsumptionSummaryComponent/.babelrc", "clean": "pcf-scripts clean", "collectCoverage": true, "collectCoverageFrom": [ "/ConsumptionSummaryComponent/src/components/**/*.{ts, "compilerOptions": { "typeRoots": ["node_modules/@types"], "ConsumptionSummaryComponent/globals.d.ts"], "coverageDirectory": "test-coverage", "coverageReporters": ["lcov"], "coverageThreshold": { "global": { "branches": 0, "cra-template-typescript": "^1.0.0", "dependencies": { "@apollo/react-hooks": "^3.1.3", "description": "Project containing your PowerApps Component Framework (PCF) control.", "devDependencies": { "@babel/core": "7.8.4", "diagnostics": { "ignoreCodes": [ "TS1149" ] } } }, "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "3.4.4", "enzyme": "^3.11.0", "esModuleInterop": true, "exclude": ["./node_modules/pcf-scripts/./node_modules"] } .babelrc file { "env": { "test": { "plugins": [ "@ba, "expose-loader\\?jQuery\\!jquery": "/ConsumptionSummaryComponent/src/blank-mock", "forceConsistentCasingInFileNames": true, "functions": 0, "globals": { "ts-jest": { "tsConfig": "tsconfig.json", "graphql-tag": "^2.10.2", "graphql": "^14.6.0", "include": ["./ConsumptionSummaryComponent/src", "isolatedModules": true, "jest": "^25.1.0", "jest": { "roots": [ "/ConsumptionSummaryComponent/src" ], "lines": 0 } }, "module": "esnext", "moduleFileExtensions": [ "ts", "moduleNameMapper": { "ts-jest": "/node_modules/ts-jest", "moduleResolution": "node", "office-ui-fabric-react": "^7.84.0", "office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/", "pcf-scripts": "^1", "pcf-start": "^1", "react-dom": "^16.12.0", "react": "^16.12.0", "rebuild": "pcf-scripts rebuild", "resolveJsonModule": true, "scripts": { "build": "pcf-scripts build", "setupFiles": [ "/ConsumptionSummaryComponent/src/setupEnzyme.ts" ], "skipLibCheck": true, "source-map-loader": "^0.2.4", "sourceMap": true, "start": "pcf-scripts start", "statements": 0 } }, "test:watch": "jest --watch" }, "test": "jest", "transform": { "^.+\\.js$": "/node_modules/babel-jest", "ts-jest": "25.1.0", "ts-loader": "^6.2.1" } } SetupEnzyme.ts import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({, "version": "1.0.0", "webpack-cli": "^3.3.10", "webpack": "^4.41.5" } }, () => { const result = shallow(); expect(result).toMatchSnapshot(); }); Error Jest encountered an, e.g. it's not plain JavaScript. By default, iconName: Enums.ProductTypeLogo.azureLogo, iconStyle: styles.AzureIcon, if Jest sees a Babel config, ignoring "node_modules". Here's what you can do: • To have some of your "node_modules" files transformed, isEnabled:true, it will use that to transform your files, json, jsx, node, order: 1 }; it("Should render the Summary component for the test Product Group Summary", productGroupName: Enums.ProductTypeName.azureProductTypeName, snapshotSerializers: ['enzyme-to-json/serializer'], testEnvironment: 'node', testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', ts=x, tsconfig.json { "extends": "./node_modules/pcf-scripts/tsconfig_base.json", you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in you

Development

Why is this React Typescript app throwing errors?

Post author By Full Stack
Post date February 8, 2020
No Comments on Why is this React Typescript app throwing errors?

I just created a new React app using npx create-react-app my-app –template typescript and it was working fine until I changed my component to from a stateless one to a stateful one. The error: JSX element type ‘App’ is not a constructor function for JSX elements. TS2605 3 | import App from “./App”; 4 | […]

Tags "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.12.26", "@types/react-dom": "^16.9.0", "@types/react": "^16.9.19", "@types/styled-components": "^4.4.2", "allowJs": true, "allowSyntheticDefaultImports": true, "browserslist": { "production": [ ">0.2%", "build": "react-scripts build", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "development": [ "last 1 chrome version", "dom.iterable", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "esModuleInterop": true, "esnext" ], "forceConsistentCasingInFileNames": true, "include": ["src"] } Update after trying @Vlad's answer below: Changed import * as React from "react" to import React from "react" and now, "isolatedModules": true, "jsx": "react" }, "last 1 firefox version", "last 1 safari version" ] } } tsconfig.json { "compilerOptions": { "target": "es5", "lib": [ "dom", "module": "esnext", "moduleResolution": "node", "not dead", "not op_mini all" ], "private": true, "react-dom": "^16.12.0", "react-scripts": "3.3.0" }, "react": "^16.12.0", "resolveJsonModule": true, "scripts": { "start": "react-scripts start", "skipLibCheck": true, "strict": true, "styled-components": "^5.0.0", "test": "react-scripts test", "types": ["node"] }, "typescript": "^3.7.5" }, "version": "0.1.0", ) ); } // setState(() { //, //"noEmit": true, and 2 more. TS2605 3 | import App from "./App"; 4 | > 5 | ReactDOM.render(, document.getElementById("root")); | ^ 6 |, document.getElementById("root")); All the solution I could find suggested supplying props and state to the class as well as upgrading to the, error: null }; } handleChange = (event: any) => { console.log("changing", event); }; handleSubmit = (event: any) => { event.preventDefault(); console.log("submitting", event); }; render() { return ( <input typ, forceUpdate, I just created a new React app using npx create-react-app my-app --template typescript and it was working fine until I changed my component t, props, State> { constructor(props: Props) { super(props); this.state = { zipCode: ""