How to watch index.html using webpack-dev-server and html-webpack-plugin

I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not...

how to use ngnix to serve webpack build files in production

I wrote a vue + webpack project and it works fine in webpack-dev-middleware. Now I want to deploy it with nginx. What I do is write a webpack.build.config.js and bundle all files into a dist...

SyntaxError: Unexpected token export

I'm working on a npm package called foobar, locally, to allow me to make changes or modifications in real time without having to publish/unpublish to improve development time and sanity. In...

How to use noParse in webpack?

I want to exclude this from my webpack file, by using this line of code given to me below. noParse: /node_modules\/localforage\/dist\/localforage.js/, But no matter what I try I it keeps on saying...

Resolve "Property does not exist on type 'Vue'" error

I am using Typescript with Vuejs to build an application. I have several stand alone components (.vue) files that I am importing into a Typescript (.ts) file. In the Typescript file, I am...

How to solve npm install throwing fsevents warning on non-MAC OS?

Following warning is being thrown on npm install command - npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.1.2 (node_modules\rea ct-scripts\node_modules\fsevents): npm WARN notsup...

Jest Test Babel Error: Plugin/Preset files are not allowed to export objects

I'm using a very up-to-date (December 2017) stack of dependencies. As I try-out isomorphic react tests with Jest, the test suit keeps failing with the following error: * Test suite failed to...

Webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

I have upgraded my web application's packages, this upgrade seems to have broken my build. I first received an error telling me to install the webpack CLI, The CLI moved into a separate package:...

<div id="root"></div> not transfering in webpack build

I'm using Webpack 3.8.1 and webpack-dev-server 2.9.2. This is for a project I am writing in react. Below is my webpack.config file. Every time that I run the build command the is not...

Node Sass does not yet support Windows 64-bit

I am running protractor UI automation project and try to run test with yarn test and received following build error Module build failed: Error: Node Sass does not yet support your current...

Error: Cannot find module 'html-webpack-plugin' - Webpack (React)

I tried to create a basic React app with webpack 4 following this link until installing "html-webpack-plugin", I did not face any errors. But, once I run the command "npm run start", I keep...

Cannot fix "Unexpected token name «i», expected punc «;»" from UglifyJs

I have created a react app with a custom next server server.js: const { createServer } = require('http'); const next = require('next'); const app = next({ dev: process.env.NODE_ENV !==...

Reactjs port number still runs on localhost instead of mysite URL

I am trying to deploy a Reactjs application online for the first time. When I run the npm start command, it tries to start the app with http://localhost:3000 instead of mysite.com:3000 despite the...

Cannot install Firebase for VueJS + NodeJS

I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors ...

Webpack prevent emit css for some files with css modules

I'm trying to configure webpack in such a way, that for a certain .css files it does not emit css(does not add anything to styles.css), but emits locals(className to style mapping in the imported...

Webpack does not resolve less loader

I'm getting crazy about the configuration of my React-Typescript-Webpack application. It is built from scratch - no create-react-app - and should work with the UI library "antd" and "storybook" as...

React js react-responsive-carousel not loading with webpack

I am using React Responsive Carousel for my project, but I am getting this error in console ROR in ./node_modules/react-responsive-carousel/lib/styles/carousel.min.css 1:0 Module parse failed:...

Webpack not loading Vue's single file components CSS

Webpack is compiling single file components but not loading CSS. The HTML and Vue is rendered correctly but without CSS. It seems to be an issue with webpack configuration. Any idea what's...

ReactJS Webpack : ReferenceError: window is not defined

I'm using webpack in React JS. and Here is my error, ERROR in Error: /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:58758 var theme = window.matchMedia &&...

How to build custom bootstrap bundle using Rollup

According to Bootstrap 5 official documentation, we can import pre-compiled js files from bootstrap/js/dist and build a custom bundle using (Webpack, rollup,...

Webpack loads wrong images to dist directory

My webpack.config.js file const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const {...

Webpack 5: file-loader generates a copy of fonts with hash-name

I cant figure out whats going on here. I use the file-loader to load the fonts of my application: { test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: [{ loader:...

WARNING in Unknown plugin: imageminSvgo. Did you forget to install the plugin?

This is the Warning that I receive from Webpack, despite installing the imageminSvgo plugin. I have used it within the Image Minimizer Plugin as imageminSvgo, but Webpack doesn't seem to detect...

how to use webpack and web3 in react?

Hello I've just started a new react app from skratch. I followed instructions at https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9 this is my package.json file { ...

How to Use React Suite with tailwind css in Next.js?

Description I want to use React Suite and tailwind so I install tailwind following the installation instructions from the documentation and it's working fine, but when I install React Suite and...

Parsing error: Cannot find module '@babel/preset-react'

I have a React project. In the first line in every .js file where I import React, I am getting this error: Parsing error: Cannot find module '@babel/preset-react'. package.json { "name":...

[webpack-cli][Error: EEXIST: file already exists, open '....'] - Docker environment

This is using Docker. It works when using wsl2 but when using hyper-v I'm getting the issue. I'm trying to run mix watch -- --watch-options-poll=3000 or mix --production but every time I'm running...

ESlint - Error: Must use import to load ES Module

I am currently setting up a boilerplate with React, Typescript, styled components, webpack etc. and I am getting an error when trying to run eslint: Error: Must use import to load ES Module Here...

Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading 'getFormatter')

I am running a simple React/Django app with webpack that is receiving this error on build: ERROR in ./src/index.js Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError:...

How to add Autocomplete, Syntax Highlighting using Antlr4 grammar file functionality to Monaco Editor in my React application?

I am using the Monaco Editor in a react app in the following way: My monaco-editor.jsx looks like - import MonacoEditor from 'react-monaco-editor'; return ( <Flex> <Flex.Box> ...