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
Development

Module not found: Error: Can’t resolve ‘./router’ in ‘C:\HK\Vue-learning\testapp1\src’

I am new to Vue js. I have installed a basic vue template and added a web pack for bundling. But when I use “webpack –config webpack.config.js” to build the app I am getting the following error. **ERROR in ./src/main.ts Module not found: Error: Can’t resolve ‘./router’ in ‘C:\HK\Vue-learning\testapp1\src’ @ ./src/main.ts 2:0-30 7:12-18 ERROR in […]

Categories
Development

Webpack production build always returns This page is using the development build of React

I am trying to use webpack-4 to get the production build of react (The project is not created usinf Create React App), but not successful. My project is using typescript and using ts-loader and using the version of React 15.6.2. The current webpack config file const path = require(“path”); module.exports = { entry: [‘./lib/tproj/js/index.ts’], output: […]

Categories
Development

Webpack-Dev-Server constructs improper SockJS: “An insecure SockJS connection may not be initiated from a page loaded over HTTPS”

I’ve been struggling with this awkward issue for well over a week now and couldn’t resolve it. Any help will be highly appreciated! I’m building a web application that uses Nginx as the proxy, React for web’s front-end, GoLang for my backend API. The entire application is running on Docker (version 19.03.5). After I ran […]

Categories
Development

Webpack doesn’t resolve index file in folder

I have the project in which I use React with Typescript and Webpack to bundle all together. I know that if there’s index.tsx file in folder in which I export all necessary files, I can import items from folder like import { item } from ‘path/to/folder’ instead of import { item } from ‘path/to/folder/and/file.tsx’ But […]

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

How should I include javascript in a template in Phoenix 1.5

I’m trying to include a javascript file that uses chart.js in my phoenix 1.5 project that uses webpack. When I add something like <script>require(‘/js/graph’).Graph.draw()</script> in a template, I see the error Uncaught ReferenceError: require is not defined in browser console and the graph is not rendered. package.json { “repository”: {}, “license”: “MIT”, “scripts”: { “deploy”: […]

Categories
Development Plugins

Babel 7.7 – replace babel/polyfill with core-js@3

Since @babel/polyfill was deprecated in 7.4.0, I am trying to directly add core-js and setting the version via the corejs option as decribed in the Babel documentation.. I am getting errors related to polyfill when trying this approach, though. 「(°ヘ°) The app compiles, but never renders – the console logs error “can’t access lexical declaration […]

Categories
Development Plugins React

How to reduce bundle size of react app even further

I am trying to reduce the size of my build file ( main.js ) to 500kb or less. Initially it was 1.2MB and with some code splitting and webpack I managed to reduce it to around 600kb but I need to reduce it by another 100kb. I am fairly new to webpack and I would […]

Categories
Development HTML Plugins

HtmlWebpackPlugin is not adding charset meta tag

HTML Webpack Plugin is not adding <meta charset=”UTF-8″> However, it says it always does: https://webpack.js.org/plugins/html-webpack-plugin/ This is my Webpack configuration: resolve: { alias: { ‘@’: path.resolve(__dirname, ‘src/’) } }, resolveLoader: { modules: [ ‘node_modules’, path.resolve(__dirname, ‘scripts/webpack/loaders’) ] }, entry: ‘./src/index.js’, output: { filename: ‘dist.js’, path: path.resolve(‘www’) }, module: { rules: [ { test: /\.js$/, use: […]