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
Mastering Development

Running webpack build issue while trying to create a React application using babel, webpack

I am working on a new project set up for react using webpack and babel. Following is the webpack.config.js file Folder structure: node_modules/ src/ – api/ – components/ – index.jsx – stats.html webpack.config.js babel.config.js const path = require(‘path’); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer’); const { ContextReplacementPlugin, HashedModuleIdsPlugin } = require(‘webpack’); […]

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

Webpack unable to find babel-loader

I’m having a bit of trouble adding react to a legacy application. While I found plenty of materials on getting started, I ran into a bunch of issues related to my particular configuration and exacerbated by my utter lack of webpack knowledge (so much time relying on react cli tools makes one lax). My configuration: […]

Categories
Development

Webpack dev server reloads but doesn’t show Markup or CSS changes?

So i’m pretty new to Webpack, and I finally got the webpack-dev-server running. It recompiles and refreshes page on save, and it shows changes to my JS code. But it doesn’t seem to work well with my SASS or HTML files? On a fresh start, it will show a change if I make it, but […]

Categories
Cryptocurrency Development Ethereum

Getting error -> unexpected token. You may need an appropriate loader to handle this file type

root@kali:~/Documents/oraclize-test# npm run dev truffle-oraclize-api@0.0.2 dev /root/Documents/oraclize-test webpack-dev-server ERROR in ./app/javascripts/app.js Module parse failed: /root/Documents/oraclize-test/app/javascripts/app.js Unexpected token (124:0) You may need an appropriate loader to handle this file type. | }) | } | @ multi (webpack)-dev-server/client?http://localhost:8081 ./app/javascripts/app.js webpack: Failed to compile. APP.JS // Import the page’s CSS. Webpack will know what to do with […]

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 Vue

Vuejs + webpack shows blank page after importing js file

Vuejs + webpack (development environment) shows blank page after importing core.min.js file inside Footer.vue file. console shows no error. To view the code of core.min.js check https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view Note:I only import core.min.js . App.vue <template> <div id=”app”> <div class=”page”> <app-header></app-header> <app-home></app-home> <app-footer></app-footer> </div> </div> </template> <script> export default { data () { return { msg: ‘Welcome […]

Categories
CSS Development Plugins

Webpack watch compiles my scss sass but not webpack-dev-server

I am able to compile my sass successfully with webpack using the webpack –watch command, but it does not perform hot module replacement. I am able to do HMR successfully with the webpack-dev-server –hot –progress –colors –inline command, and it reloads with my .js changes, but not my .scss/.css ones. I’ve noticed that when I […]

Categories
CSS Development Plugins

Computed Properties not working with Babel preset-env

I’m trying to use computed properties in my Material UI style object, but I’ve getting an unexpected token error. Below is the code snippet, error, and babel-webpack config. const useStyles = makeStyles(theme => { root: { [desktop]: { width: “80%”, } } }); //webpack.config.babel.js … const config = { entry: [‘@babel/polyfill’, ‘./src/components/index.js’], resolve: { extensions: […]