Categories
Mastering Development

IE11 Blank Page with React, Typescript, Babel, and Webpack

I have a React application written in Typescript with Babel and Webpack. It loads fine in Firefox and Chrome, but loads a blank page in Internet Explorer 11. I am new to this project with relatively low experience with React/Babel/WebPack/Typescript. I need to make the app work with IE11. I’ve spent a couple days learning […]

Categories
Mastering Development

Tailwindcss not working with next.js; what is wrong with the configuration?

For some reason tailwind is not rendering properly in next.js. I’m wondering if something is wrong with my settings? Styles folder – tailwind.css @tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js const defaultTheme = require(‘tailwindcss/defaultTheme’) module.exports = { theme: { extend: { }, }, plugins: [ require(‘@tailwindcss/ui’), ] } postcss.config.js config module.exports = { plugins: { […]

Categories
Mastering Development

react blank page on route, nginx subdirectory

I have deployed my react app into /var/www/admin/ in nginx with the location config my /etc/nginx/sites-available/default root /var/www/; index index.html; server_name hellonode; location ^~ /assets/ { gzip_static on; expires 12h; add_header Cache-Control public; } location ~/admin/api/(.*)$ { default_type "application/json"; proxy_pass http://localhost:8080/api/$1; } location /admin/ { try_files $uri $uri/ = 404; } The package.json is as […]

Categories
Mastering Development

Electron & React-BoilerPlate white screen

I have this app that works perfectly fine in Dev mode but not in Production. My folder structure are (build,dist,node_modules,public,src). build dist node_modules public Main.js index.html src index.tsx In my package.json { "name": "test", "version": "0.8.0", "description": "test welness", "author": "Remote Buddy Inc.", "homepage": "./", "main": "public/Main.js", "dependencies": { "@aspnet/signalr": "^1.1.4", "@craco/craco": "^5.6.2", "abp-web-resources": "^5.1.1", […]

Categories
Mastering Development

React hooks widget works when used directly but not when imported from NPM

I have a moderately simple example of a React Hooks widget whose function it is to provide context hooks to provide state that can set a few strings and switch the current Material UI theme. Here is the working demo. By clicking on the button labeled “NEXT THEME” you can see the page toggle between […]

Categories
Mastering Development

How to make npm start work on a cloned React repository?

I have created a new github repository with files from a working project I downloaded from another github repository of mine. I have run npm install. When I try npm start, I get the following error: npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! […]

Categories
Mastering Development

Caused by: java.lang.Exception: Command `config` unrecognized

After Running Copied React-native project: Caused by: java.lang.Exception: Command config unrecognized. Make sure that you have run npm install and that you are inside a react-native project. I did npm install but it didn’t help. Package.json { “name”: “ProjectName”, “version”: “0.0.1”, “private”: true, “scripts”: { “android”: “react-native run-android”, “ios”: “react-native run-ios”, “start”: “react-native start”, “test”: […]

Categories
Mastering Development

Error rendering react-redux functional component when data is deleted from firestore (useFirestoreConnect)

My ArticleList component is successfully getting & displaying the user’s list of articles from firestore when I first load the app. The user can click a “Remove Article” button, which successfully removes the article from the subcollection in firestore, but it causes an error in the rendering of the react component, which seems to still […]

Categories
Development

I cannot configure my package.js file for ReactJS

This is the error: Insufficient number of arguments or no entry found. Alternatively, run ‘webpack(-cli) –help’ for usage info. And this is the code in my package.json file: { “name”: “reactredux”, “version”: “1.0.0”, “description”: “React”, “main”: “index.js”, “scripts”: { “start”: “npm run build”, “build”: “webpack -d && copy src/index.html dist/index.html && webpack-dev-server –content-base src/ –inline […]