Categories
Mastering Development

reactjs application – can’t get my hello world to show up

Background / Problem I’m trying to build understand my first react/webpack/nodejs app. I am able to build / launch it by opening a browser and navigating to http://localhost:3333/ , but the hello world message I’m expecting is not showing. Instead I think it’s trying to give me a directory listing of a folder…? Not too […]

Categories
Mastering Development

Webpack / Html-loader removes CSS in minimize mode

Problem I am using Webpack, Html-loaded and EJS in a project to render some HTML. The HTML does contain some embedded CSS: #clawgame-sidebar img { max-height: 196px; } #clawgame-sidebar.clawgame-sidebar-active { <%= (o.sidebarPosition==ET_SidebarPosition.Left? “left: 0px;”: “right: 0px;”)) %> max-width: 100%; } Whenever I run Webpack in production mode / Html-loader with minimized option, the second CSS-statement […]

Categories
Mastering Development

ERROR in Entry module not found: Error: Can’t resolve ‘index.js’ in ‘C:\Users\dell\Desktop\projet_folder_js’

I am facing path issue and not understanding it package.json file { “name”: “projet_folder_js”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “dev”: “webpack” }, “author”: “”, “license”: “ISC”, “devDependencies”: { “webpack”: “^4.43.0”, “webpack-cli”: “^3.3.11” } } webpack.config.js file const path = require(“path”); module.exports = { entry: “index.js”, output: { path: path.resolve(__dirname), filename: “output.js”, }, […]

Categories
Mastering Development

TypeScript metadata reflection references other classes before they are defined

I have some TypeORM entities in my codebase which have relations to each other, making a circular dependency. Since decorator metadata is used on each entity class, TypeScript inserts code after each class defining metadata on it. Say that the classes are Business and Qualification. On the relating fields TypeScript will emit code that looks […]

Categories
Mastering Development

Material.io web with webpack error “Can’t find stylesheet to import”

I tried using matrial.io with webpack, just as described in material.io’s getting started with the following configurations: webpack.config.js –> exactly like example const autoprefixer = require(‘autoprefixer’); module.exports = { entry: [‘./app.scss’], mode: ‘development’, module: { rules: [ { test: /\.scss$/, use: [ { loader: ‘file-loader’, options: { name: ‘bundle.css’, }, }, {loader: ‘extract-loader’}, {loader: ‘css-loader’}, […]

Categories
Development

You may need an appropriate loader to handle this file type error occurs in ReactJS file

I have divided my configuration in to two production and development mode and merging them using webpack-merge. Whenever i try to build or run the code it gives me you may need an appropriate loader error even though i have define loader for the jsx or js files. Common Config File code is here… const […]

Categories
Development

Hot reloading not being trigger – component malformed?

This has been baffling me for a few hours now & I can’t seem to work out why. My original theory was that react-router/redux was causing this issue but I have now stripped them out & hot reloading still does not occur. My original file structure is below: index.js import ‘@babel/polyfill’ import React from ‘react’ […]

Categories
Development

“Module not found: Error: Can’t resolve ‘electron-is-dev'” in electron & typescript & webpack project

I’m using Electron and Typescript with webpack. And I’m gonna add react.js. But I typed “npx webpack”, I got an error. It says “electron-is-dev module is not found”, but I already installed it. ERROR in ./src/main/window.ts Module not found: Error: Can’t resolve ‘electron-is-dev’ in ‘project-path/src/main’ @ ./src/main/window.ts 2:0-36 12:35-40 @ ./src/main/app.ts I can’t find how […]

Categories
Development

Why does webpack omit my .css code from the generated .css bundle when I change mode from `development` to `production`?

Context I have a React application laid out using the project directory structure shown below. It makes uses of a whole tree of .scss files, and a single bar.css file, used to support a third party component. The bar.css file is referenced by a single .jsx file (which uses the third party component), like so: […]

Categories
Development

react app with webpack built from scratch is not loading an image in css

I built a simple react app that uses webpack and babel. I am having trouble loading my images. My basic folder structure: root: webpack.config.js package.json public: index.html src: 800×600-1x2x.jpg App.css App.js index.js App.js is boilerplate code: import React, { Component} from “react”; import {hot} from “react-hot-loader”; import “./App.css”; class App extends Component{ render(){ return( <div […]