Categories
Mastering Development

Why do I need “@babel/plugin-proposal-optional-chaining” in my setup using “@babel/preset-env” and “@babel/preset-typescript”

I have a project using Typescript and @babel/preset-env. Bundling with Webpack fails with this error and the config below. If I un-comment the line, which forces @babel/plugin-proposal-optional-chaining to be included, then compilation works. It also works if I add Safari, Edge or IE 11 to the targets string. Why is that? ERROR in ./src/bla.ts 58:23 […]

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

webpack watch not working on osx – how to fix?

Changes in my index.js aren’t being reflected in realtime on my browser. My config: const path = require(“path”); const MonacoWebpackPlugin = require(“monaco-editor-webpack-plugin”); module.exports = { mode: process.env.NODE_ENV, entry: “./index.js”, output: { path: path.resolve(__dirname, “dist”), filename: “[name].bundle.js”, }, module: { rules: [{ test: /\.css$/, use: [“style-loader”, “css-loader”,], }, { test: /\.ttf$/, use: [‘file-loader’] }], }, plugins: […]

Categories
Development

React router 4 url issue

import React from ‘react’; import { Router, Route, Switch } from ‘react-router-dom’; import { history } from ‘./history’; import Login from ‘./components/Login’; import Home from ‘./components/Home’; import NotFound from ‘./presentation/NotFound’; import MainContent from ‘./components/MainContent’; import Overview from ‘./components/Overview’; export default () => { return( <Router history ={history}> <Switch> <Route path=”/” component={Login} exact /> <Home> <Route […]

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

Categories
Development Plugins

Webpack file-loader outputs [object Module]

I am using webpack with HtmlWebpackPlugin, html-loader and file-loader. I have a simple project structure in which I use no frameworks, but only typescript. Thus, I write my HTML code directly to index.html. I also use this HTML file as my template in HtmlWebpackPlugin. As all websites do I need to put an image which […]

Categories
Development Plugins

How can webpack devServer accept other paths except root / in the browser?

I followed the webpack setting from https://createapp.dev/ then made my sources from create-react-app to webpack. But I have a problem for hot-realoding. The browser can’t accept any router paths except / when I revised pages except /. When I run webpack devserver by ‘yarn start’, hot reloding is good for ‘/’ for example: http://localhost:4000. but […]

Categories
Development Plugins

How can webpack devServer accept other paths except root / in the browser?

I followed the webpack setting from https://createapp.dev/ then made my sources from create-react-app to webpack. But I have a problem for hot-realoding. The browser can’t accept any router paths except / when I revised pages except /. When I run webpack devserver by ‘yarn start’, hot reloding is good for ‘/’ for example: http://localhost:4000. but […]