Categories
Development

How can I use the Parcel bundler with the TSC

I’m currently trying to make a typescript game. I want to use Parcel as my bundler. But Parcel requires you to give one entry file. My current file structure is as followes builds -dev –public –private -production –public –private src -server -client tsconfig package.json vscode screenshot I want Parcel to output my client in the […]

Categories
Development

unable to import JSON in typescript

I have a json file which looks like this { “type”: “service_account”, “project_id”: “blele”, “private_key_id”: “9c0a8fe58c6a35a1640677b7dbf5b”, “private_key”: “—–BEGIN PRIVATE KEY—–\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCQAsmXWkbeNsLn\nktPmTGONatPlZevmvSDO0IIMymUuRHPOuTQRm6k6WkYB1BB5gulGOsOc10hGrscK\nJtxj/G+eZguTvybosKdwVbm5sZ1jCUlS/TdmAVtJVWGf1YT/nxS1RuT+d7obFGN3\nNhMzQ2sm6JwmPIfF7kcfcU9Cjgjj5mDMa7OO2PQ4/gkKi+8/HhMge/4Wde\nd+/htb6ZA6BdHFSoevHHgTkkygJF47oDeirSN5VDDc1FYqSSZnCZ45uRik3RsAcw\ndInRhknSKdcbqyug9FQgM6l9T8a0sMpwgVcAjq3WaJaUgO1Wd9nfMhoItZvc6cIc\nbbBl3FxRAgMBAAECggEACK2gNQBGsRBfR0hdE/Y0oWnlJg8tSdM\nWDx6WgZIkhrfBZyvGndsUb5YS9MASLwfA+pYFRFg84lgMLjP4i1FBcSwsrM0kgN8\n/uqB5Fx4EQj7X0uZXmMKdysMwRXbaebWYJhqW0g4hIl3YW6urIGRoPb3q+n/Muy1\nhmZhaTTi34cDJLZSbywiMxSBSqlHstlLeK7jQTIU3y0lmC4snTiMjjXjDxGHD0em\nLKlMAouZbr/kj9M+iSj+9SQoH7ZR9FD7saoncJuOUZdH7Mwz+TvqS7bbm70P7zRR\nVwpDAeqc6XP8Hv6f2hhD62x5kmopSB0CP0MhZ/JjUQKBgQDCPDdP0MnlCnRf5xV8\n6ZJSWK5QOr894GKhQwbiddVTaNPPKlqqN+HM/r69SAwNYoZ+pAH9Us01vbWaoZIE\n0afNWqRcKAQucF6kU5C3zVpMFlW2bX9wxKZA3WdIyKnND7WiHr6zO+bqNoUckY0N\nUi6pS3m4ZnPSdfVb3ULHgt8eiQKBgQC9zgrwnotEUsyD85IaEDBXEPf3XfjmKN/n\n3WppgzDgC95qQVcgkb6LZcNsKXQqBcmeNP8UDIbhVmylMw18MBM9UjNBK8BztI3Q\n9ESsrYVOFnnxQfUqDSPCraHI4qD4/sKQi/8l/CKx4Al9exnvj1awJssAfQSAJraJ\nEjzGCiOdiQKBgQC/+5bMPFmiGsBGHnk9uvwWinLY+AgY19WFAWQnqEJPrDhW9s0g\nnBWCcnUDT9ghzrWTLPaOdi5BJR8AFRznyHZsYmA8eo0PfZ/+Gl7bXY0X0aespfQl\n+Sk+ydgRt80l05Y7BNqG+/lUnMjbIP5jIUzfpqtL2XA3oMIAp+UeoDt6yQKBgE6f\nKcLwOYoMrjC+VTe8mvmFyuFJqM9WASGfgvO/5x/3aqMi+78+/+noNmH4bej2SsTg\n+QRKKqMNCLQnNmn3UYNLm6LXoc9t2gdIphBMLxL2L3zx+3IIvXl4\ntDD81zZNMkErG9wyyNrgxtgl8RZQcu4mggyrRu/CMh\nAU4EdEzxmT3jtAg28bGUys1ZINw0OY2Tlr4wZzW/iaIIK34VvtsByrNJ1G4nKlnS\n6xIYt5gv7buhMI/E8MBcf5EOThegr0kS/GYTd2H5u/Oj+gE33+V5C9qdk84v2Hn6\n1dUqBNjWjtlbRXjxFv4UAQ4=\n—–END PRIVATE KEY—–\n”, “client_email”: “firebase-adminsdk-0fcdc@be.iam.gserviceaccount.com”, “client_id”: “10713329946488”, “auth_uri”: “https://accounts.google.com/o/oauth2/auth”, “token_uri”: “https://oauth2.googleapis.com/token”, “auth_provider_x509_cert_url”: “https://www.googleapis.com/oauth2/v1/certs”, “client_x509_cert_url”: “https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-0fc.gserviceaccount.com” } in ./.keys/admin.keys.json I want to import that file in index.ts. When I did something like this import firebaseKeys from ‘./.keys/admin.keys.json’ […]

Categories
Chrome Development Plugins

Why can’t webpack tree-shake lodash when using “import * as _”?

I am learning about tree-shaking with a webpack 4/React application that uses Lodash. At first, my Lodash usage looked like this: import * as _ from “lodash”; _.random(… I soon learned, via the BundleAnalyzerPlugin, that the entirety of Lodash was being included in both dev and prod builds (527MB). After googling around I realized that […]

Categories
Development

Typescript cannot find module defined in paths

I have a typescript application that has paths for absolute imports. My tsconfig looks like this: { “compilerOptions”: { “baseUrl”: “.”, “paths”: { “utils*”: [“src/utils*”], “operations*”: [“src/operations*”], “actions*”: [“src/actions*”], “components*”: [“src/components*”], “constants*”: [“src/constants*”], }, “outDir”: “dist”, “module”: “esnext”, “target”: “esnext”, “moduleResolution”: “node”, “noEmit”: true, “lib”: [“es2017”, “dom”], “noUnusedLocals”: true, “sourceMap”: true, “skipLibCheck”: true, “allowJs”: true, […]

Categories
Development

“Navbar refers to a value, but is being used as a type here” when trying to render a shallow copy of my component when testing

I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, I get the ts error “‘Navbar’ refers to a value, but is being used as a type here.”, and underneath […]

Categories
Development

TypeScript + Express: Property ‘rawBody’ does not exist on type ‘IncomingMessage’

In my src/app.ts, I have: import express from ‘express’; import bodyParser from ‘body-parser’; const app = express() app.use(bodyParser.json({ verify: (req, res, buf) => req.rawBody = buf })) But I get the error Property ‘rawBody’ does not exist on type ‘IncomingMessage’ on: app.use(bodyParser.json({ verify: (req, res, buf) => req.rawBody = buf })) I have a typings/express.d.ts, […]

Categories
Development

How to correctly type the apply method for browser console logging functions?

I’ve written the below class to capture the console.log function in my app so I can review the logs on devices where I can’t easily access the browser console and so later I can bundle the captured logs when reporting errors. In order to get it working, I’ve had to add ts-ignore like this: // […]

Categories
Development

WebStorm breakpoints issue with TypeScript React App (using webpack)

I tried to configure the JavaScript Debugger as the WebStorm website is telling so: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ However, it worked like for 2 minutes and it doesn’t work anymore, I can’t tell why.. Is it at least stable with TypeScript? Can I use the JavaScript Debugger? Edit 1 (based on @lena comment) Here you can find my […]

Categories
Development

jest test does not recognize typescript syntax

I have a sample nodejs project which is a Google Pubsub Cloud Functions sample where I am trying out Jest as the testing tool. When I am running npm script to do the unit test I get an error that indicates that typescript is not being recognized. I am doing just npm run test:unit that […]