Categories
Mastering Development

Cannot read property ‘fromJSON’ of undefined while testing in Jest

while running jest i get the following error.I dont know why am i getting this error. TypeError: Cannot read property ‘fromJSON’ of undefined at Object. (node_modules/@grpc/proto-loader/node_modules/protobufjs/ext/descriptor/index.js:3:66) at Object. (node_modules/@grpc/proto-loader/build/src/index.js:23:20) Below is the tsconfig.json { “compilerOptions”: { “target”: “esnext”, “module”: “commonjs”, “outDir”: “dist”, “sourceMap”: true, “moduleResolution”: “node”, “declaration”: true, “experimentalDecorators”: true, “allowSyntheticDefaultImports”: true, /* Allow default […]

Categories
Mastering Development

Using babel & web pack with react without create-react-app

My goal is to create a simple app and output one js standalone file and one css standalone file without using create-react-app. I have two functional components like const Card = () => { return( <div>test</div> ) } export default Card; My app.js file import ReactDOM from ‘react-dom’; import Card from ‘./Card’; ReactDOM.render(<Card />, document.getElementById(‘root’)); […]

Categories
Mastering Development

Can I copy static assets with minification(Webpack)?

I have a question regarding webpack. I have a project structure with two folders: Project: —src —dist I am using webpack-copy-plugin to copy static assets from src to dist. Is there any way to minify and optimize assets while copying them with webpack-copy-plugin?( css, js, image files?). Here’s my webpack.js file below. const HtmlWebpackPlugin = […]

Categories
Mastering Development

Migrate webpack V3 to V4 on Angular V1 – SyntaxError: Unexpected token I in JSON at position 0 at JSON.parse

I am trying to upgrade an old project that uses Angular V1. I upgraded babel, webpack, and JQUERY. JQUERY was upgraded from version 2 to 3. On npm start, which is webpack-dev-server –open –config build/webpack.dev.js1 I get the error: angular.js:15570 SyntaxError: Unexpected token I in JSON at position 0 at JSON.parse (<anonymous>) at fromJson (angular.js:1476) […]

Categories
Mastering Development

TypeScript not finding variable declared in type declaration if I import a file

I made a very simple library which contains a .d.ts (source) which has the following structure (I omit the details because the file works fine, it likely is a config issue in my project): // Some helper types and interfaces type TranslationFunction = /* … */; export { TranslationFunction }; Then, I do npm i […]

Categories
Mastering Development

What’s wrong with my importing path & clicking to open file?

I just started a new job, and therefore a new setup. It’s not all that different but for some reason I am having 2 problems related to what the import path shows, and clicking on files/components to open the file do not work. Could this be because of the jsconfig file?: { “compilerOptions”: { “checkJs”: […]

Categories
Mastering Development

.env variables in prod enviroment (dotenv-webpack)

My code works perfectly fine in development mode. But when attempting to use it in prod mode I get an error that the API request can’t be reached due to undefined variables (variables in the .env). I am using webpack and dotenv-webpack to bundle files for prod. console error main.js?__WB_REVISION__=b1e064aa60232b9e77ec8ee2ca52e4f8:1 GET http://api.geonames.org/searchJSON?q=quito&username=undefined 401 (Unauthorized) as […]

Categories
Mastering Development

How do I get an appropriate loader to handle this file type in Django?

I have just started a django and react project. Whenever I try and load some css be it plain css or from bootstrap I get the following error: I followed the following tutorial: https://www.valentinog.com/blog/drf/ I move my .bablrc and my webpack.config.js into my project root folder. Previously it was inside the frontend app folder. Please […]

Categories
Mastering Development

Error: Cannot find module ‘ejs’, webpack does not compile the ejs module in the bundle.js file made through webpack.server.js

I keep getting the not found module for ejs and tried bunch of solutions. I am not sure why the ejs module does not compile to the file webpack builds. this is the error: Error: Failed to lookup view “pages/index” in views directory “/views” at Function.y.render (/Users/”user name”/projects/project-node-test/build/bundle.js:277:4330) package.json: “name”: “project-node”, “version”: “1.0.0”, “description”: “”, […]

Categories
Mastering Development

babel7 config for newer node targets fails on `import` statements

When building my node api with webpack and babel and node v12.13, I’m getting this error: Module build failed (from /../node_modules/babel-loader/lib/index.js):TypeError: /../src/handler.js: Property name expected type of string but got null This seems to be related to ES6 import statements in the source files. Below is the config I have ended up with. Based on […]