Categories
Mastering Development

Gatsby with Typescript importing assets error (ts2307)

I am trying to add images using import import image from ‘../assets/images/picture.jpg am using Typescript with gatsby … the strange thing is it works fine with normal javascript (.js ~ .jsx file) but when I use (.ts ~ .tsx file) it throw out this error Cannot find module ‘../assets/images/picture.jpg’ or its corresponding type declarations.ts(2307) The […]

Categories
Mastering Development

react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?

Hello I am new to react and typescript. I have created an app with react-create-app and added typescript. After finishing app modules I wanted to do some unites test I have installed mocha and chai: npm install –save-dev mocha chai. in my pakacge.json I have updated test script to "test": "mocha src/test/*". After using an […]

Categories
Mastering Development

Typeerror: Class extends value undefined is not a constructor or nulll

I get the above error on runtime, I use Create-React-App with Typescript. Here’s my code: src/api/HttpClient.ts class HttpClient { public readonly instance: AxiosInstance; public constructor(baseURL: string) { this.instance = axios.create({ baseURL }); } } export default HttpClient; src/api/auth/index.ts import HttpClient from "../HttpClient"; export class AuthService extends HttpClient { public constructor() { super("http://dev.api"); } // API […]

Categories
Mastering Development

Jest: node_module dependency uses import statement and crashes the test

TL;DR My Jest test crashes with SyntaxError: Cannot use import statement outside a module because a node_module uses an import statement. How can I fix this error? Context I’m writing a Next.js app, use Jest as my test runner and Magic for authentication. I have ts-node installed to run my Jest tests in TypeScript. I […]

Categories
Mastering Development

Jest withTypeScript syntaxerror unexpected token, expected “;”

I’ve been trying to setup jest for use with typescript and I’ve tried a bunch of fixes with no luck. I’m getting the error SyntaxError: Unexpected token, expected ";", I think the config isn’t supporting typescript code: https://i.stack.imgur.com/iGBCa.png If anybody has any suggestions I’d be very grateful! Here’s my package.json: "jest": { "preset": "ts-jest", "testEnvironment": […]

Categories
Mastering Development

‘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 […]

Categories
Mastering Development

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", […]

Categories
Mastering Development

How to configure stencil so that generated ts file doesnt come with double quotes

Right now whenever I ran command stencil build –docs, it will generate components.d.ts with below content /* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; […]

Categories
Mastering Development

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. […]

Categories
Mastering Development

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, […]