Questions tagged [webpack]

Webpack serves as a powerful module bundler, primarily designed to package JavaScript files for seamless integration into web browsers. However, its versatility extends beyond this role, encompassing the ability to convert, bundle, or assemble diverse resources and assets. By incorporating dependencies between modules, Webpack generates static assets that accurately represent these interconnected components. Furthermore, it empowers users with extensibility options while promoting superior standards in web architecture and performance optimization.

Are dependencies necessary once webpack has bundled my code?

As my project is bundled by webpack, I am questioning whether dependencies are necessary or if everything can be categorized as devDependencies. I have successfully created a react component library and published it on npm. The peerDependencies listed inc ...

Dealing with CORS policy or 404 errors when using Vue.js and socket.io in conjunction with the npm run serve command

I'm currently working on developing my project locally. Running on my local machine is a simple socket.io server: const io = require('socket.io')(); io.listen(3000); In my Vue.js application, I aim to establish a connection with a socket ...

Ways to resolve the issue: "internal/modules/cjs/loader.js:638 throw err; ^"

I am encountering an error when trying to run my Vue.js project using npm on localhost:8080. Is there a solution to resolve this issue? This error specifically occurs when I attempt to install node_modules and package-lock.json in my Vue folder, which inc ...

The error occurred while using NPM watch: ReferenceError: The variable "_" is not recognized in the file "../node_modules/angular-google-maps/dist/angular-google-maps.js" at line 1, column 1 (

I'm currently working with Angular and encountered an error in the console section of my browser after restarting my computer: Unhandled Promise rejection: _ is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: _ is not defined ...

Travis-CI build encountering errors, however, local tests and builds run smoothly

I'm encountering difficulties getting my unit test to pass with Travis. When running the tests locally, I don't see any errors (unit/e2e)... If you'd like to see the log file, it can be found here in the Travis build log There are numerous ...

Can we replace node_module imports with a different module (e.g. swapping lodash with lodash-es)?

Currently in the process of upgrading from angular 9 to angular 10 within my mono-repo. Encountering numerous warnings like the ones below: WARNING in \libs\global-search\src\lib\components\status\status.component.ts depe ...

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the code hierarch ...

What sets npm run watch apart from npm run hot in Laravel?

Since both of these commands are supported in Laravel, I'm a bit confused about their distinctions. However, I did observe that npm run hot does not update when I make changes to scss files, whereas npm run watch functions correctly. ...

The development process has encountered an issue: ENOENT - the file or directory does not exist

Encountered Full Error Error: ENOENT: file or directory does not exist, open '/home/Project/project/public/desktop/css/desktop.css' at Object.fs.openSync (fs.js:646:18) at Object.fs.readFileSync (fs.js:551:33) at File.read (/home/Project/project ...

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

Recently, I embarked on a project using NX (Nest.js + Angular) and set up TypeORM for database configuration. While everything runs smoothly in "serve" mode, I found myself struggling with configuring migrations. In a typical Nest.js project, all files in ...

"Encountering issues with React, Webpack, and Material UI styling when deploying to

Attempting to construct a reusable React component with Material UI and then link it using npm to another application. Both the component and application are bundled through webpack. While the application successfully renders the component during developme ...

Tips for successfully passing an argument to an npm script while including a leading slash

Within my package.json file, I have defined some scripts: "scripts": { "build": "webpack-cli --mode production", "build:dev": "webpack-cli --mode development", } I am trying to pass an additional ...

Struggling with running my React App as I'm encountering some errors

Check out the code on Github: https://github.com/bhatvikrant/IndecisionApp I have already run npm i and then executed yarn run dev-server, utilizing webpack. My operating system is MacOs. I have also created the .babelrc file. The issue I encountered aft ...

Guide to integrating Webpack 3.8.1 into a Vue application

So I have this scaffold: https://github.com/vuejs/vue-cli Now, my goal is to integrate Webpack 3.8.1 into it. There's an existing "build" folder with numerous webpack files in it : https://i.stack.imgur.com/MJ3JP.png However, when I try running "webpac ...

Incorporate Canvg version 4 into a TypeScript project

I am currently facing an issue with an older TypeScript project that has the following tsconfig setup: { "compilerOptions": { "baseUrl": "./src", "outDir": "build/dist", "module": &q ...

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Recently, I encountered a strange issue while trying to bundle a simple function using babel, typescript, and webpack. You can find the example that is not working at this link. To test it, simply download the code, run npm/yarn install, npm/yarn run buil ...

The webpack-dev-server is not compatible with using the devtool option in Webpack 4

Before sharing this issue, I conducted a thorough investigation to ensure accuracy. Here is the problem: - Currently using webpack v4.6.0 and webpack-dev-server v3.1.3 - Although they function well together, when attempting to set up source maps for my ap ...

Utilize resources from webpack's bundled npm package assets

I've been racking my brain over this issue for quite some time now, and I'm starting to wonder if it's even achievable. Any assistance on this matter would be greatly appreciated! The npm dilemma I have an npm package that serves as a collection of React ...

Setting up WebPack for TypeScript with import functionality

A tutorial on webpack configuration for typescript typically demonstrates the following: const path = require('path'); module.exports = { ... } Is it more advantageous to utilize ES modules and configure it with import statements instead? Or is ...

What is preventing the bundling of my CSS into the application?

I'm facing an issue while setting up a new project using vue.js, scss, and webpack (with express.js on the server side and TypeScript). I copied over the configurations from a previous project where everything was working fine. According to my underst ...

Bring in typings from a package with an alternate title

I have a project that I am currently converting to typescript. In this project, I am using the package ng-idle. Additionally, there is a corresponding @types package named angular-idle, which contains the file @types/angular-idle/index.d.ts with the follow ...

Steps to include all dependencies in an angular application

Managing a large Angular application can be challenging. I currently use npm install to install all packages and manually load them in my index.html file, like this: <script src="node_modules/angular/angular.js"></script> Similarly, I load ot ...

Guide on incorporating ReactJS Material UI via a CDN using Webpack's external dependencies

Issue at Hand: I am facing a challenge in developing a website (web app) using React and Material UI. Everything works smoothly when utilizing npm. However, encountering an error with Material UI when attempting to link them as externals and import throug ...

Error: Unable to locate the module: Vue-Picture-BD-Marker

After successfully building my Vue project on my personal MacBook and running npm build without any issues, I encountered a problem when trying to deploy it on my CentOS server using Jenkins. The build failed with the following log: ERROR in ./node_modules ...

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

Creating an Ajax request in Angular using ES6 and Babel JS

I have been exploring a framework called angular-webpack-seed, which includes webpack and ES2016. I am trying to make a simple AJAX call using Angular in the traditional way, but for some reason, it is not working. export default class HomeController { ...

Develop a mobile application utilizing reactjs based on my website, not native

I am in the process of creating a mobile application that mirrors my existing website built with reactjs. As I was researching on reactjs, I wondered if it is possible to convert my reactjs code from the website into code for the mobile application. Any s ...

Where does the browser retrieve the source files for "sourcemapped" JavaScript files from?

As I begin working on an existing project built with angular JS, upon opening chrome dev tools and navigating to the "source" view, a message appears: Source map detected... This prompts me to see a link to: https://i.stack.imgur.com/RZKcq.png The fi ...

The incorrect order of CSS in NextJS production build

When working on my project, I make sure to import CSS files both from local sources and node modules: //> Global Styling // Local import "../styles/globals.scss"; // Icons import "@fortawesome/fontawesome-free/css/all.min.css"; // Bootstrap import "boot ...

Exploring Vue and Webpack: Optimizing global variables for development and production environments

I have been using vue-cli to create my web application. Throughout the app, I am making use of an API by including it in various places like this: axios.post(API + '/sign-up', data).then(res => { // do something }); The API variable is a constant th ...

Webpack is having trouble resolving the Vue package within the node_modules directory, specifically with vue-template-compiler

I have a basic Typescript project that includes the following code: import { parseComponent, compile as compileTemplate, ASTElement, } from "vue-template-compiler"; ... To compile this code, I use tsc with the following configuration: &quo ...

Having trouble executing a node module on a Windows system?

I am encountering an issue while trying to run npm run start-dev. I have been unable to resolve it on my own and could use some assistance. Here is a screenshot of the problem: https://i.stack.imgur.com/Qx243.png ...

Webpack returns an undefined error when attempting to add a JavaScript library

I am a newcomer to webpack and I am attempting to incorporate skrollr.js into my webpack setup so that I can use it as needed. However, I am unsure of the correct approach for this. After some research, I have found that I can either use an alias or export ...

External dependencies cannot inherit the React Material Theme

Our team has developed a custom npm package that enhances the functionality of React Material buttons to make them compatible with multiple applications. As an example, let's say our npm package is named custom-npm-package import React from 'rea ...

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?

Imagine this scenario: we have two files, let's call them File A - export const a = () => {} export const b = () => {} Now, consider importing this into File B - import { a } from 'path' When I tried running npm run analyze, it showed that I am imp ...

Utilizing Vue CLI and Vuetify to implement the local Roboto font in your project

Currently working on a Vue / Vuetify project using VUE CLI 3.x and looking to host the Roboto font locally instead of relying on Google cdn. Has anyone successfully achieved this using webpack within the vue cli generated vuetify app project? If so, what ...

Is there a way to integrate the CopyWebpackPlugin into a create-react-app setup without having to eject?

Currently, I am in the process of developing a React application and one of my objectives is to transfer all image files from the source location to the build destination. To accomplish this task, I have been studying various tutorials and have successfull ...

A guide on utilizing webpack devServer proxy within a create react app

Currently, I am in the process of developing a new application with create-react-app and I am looking to incorporate some proxies into my code. In the past, I utilized webpack's devServer for this purpose. module.exports = { ... devServer: { ...

What is the proper placement for index.html <head/> class helper functions within a ReactJS Component?

My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\s+)" + className + "(\s+|$)"); } var hasClass, addClass, removeClass; if ( ' ...

Transitioning to webpack 5: Encountering an error - Unable to access the 'prototype' property of an undefined value

After spending several days attempting to fix this bug, none of the solutions I found online have been helpful. The issue arose after migrating from webpack version 4 to version 5. Here is the specific error that's occurring: https://i.stack.imgur.com/T8K ...

Is there a way to transform NextJS typescript files into an intermediate machine-readable format without having to build the entire project?

I need to deliver a Next.js project to my client, but I want to modify the TypeScript files so they are not easily readable by humans. The client will then build and deploy these files to their production environment. How can I achieve this? In summary, C ...

Common hurdles encountered when integrating IPFS with React components

I am facing issues importing IPFS due to some Webpack errors. I have tried to troubleshoot them without success, but upon researching, I suspect it may be related to Webpack 5. Here are the steps I followed: npx create-react-app test-app cd test-app npm in ...

I'm encountering an issue with my NuxtJS build when using UglifyJS and node-rsa. Does anyone know how to fix

I have encountered an error while using the node-rsa library in my NuxtJS project. During the production build process with nuxt build, which includes JS and CSS minification by default, I receive the following message right before the build breaks: ERROR ...

What are the implications of a project containing nested node_modules directories?

We are currently in the process of dividing our project into "sub modules" within a single repository. Our goal is to maintain aspects such as webpack configurations and express server globally, with a structure similar to the following: package.json serv ...

"Differences between a .js server, webpack, and how to plan

I'm feeling a bit overwhelmed. I recently started delving into node.js with the MEAN stack after previously using webpack and browserify without fully grasping their concepts. What's really puzzling me is the following: Express starts a server ...

Hot reloading with Webpack keeps HTML5 audio playing without interruption

Playing background music in a Vue app using the audio tag: <audio id="music" autoplay loop> <source :src="musicfilename" type="audio/mp3" /> </audio> Everything works smoothly, but encountering an issue during development r ...

Is the slow loading time of the Dev browser due to the large size of the vendor.js file

When using Angular 8.0, my browser takes around 15 seconds to load with ng serve. However, the browser only takes about 4 seconds to load when using ng serve --prod. One of the main reasons for the slow loading time in development is a vendor.js file tha ...

Issue with third-party react module (effector) causing Webpack error

UPDATE: After struggling with my own custom Webpack setup, I decided to switch to using react-scripts, and now everything is compiling smoothly. It seems like the issue was indeed with my Webpack/Babel configuration, but I still can't pinpoint the exact ca ...

Tips for creating TypeScript Google Cloud Functions using webpack

I'm currently facing a challenge while coding a Google Cloud Function using TypeScript. The concept involves having handler functions defined for various Cloud Functions in separate files within the source repository, along with some code that is shar ...

The React project encountered a build failure following the execution of the npm run command, resulting in the error code ELIFCY

I encountered an error while attempting to run my React project on localhost. Is there anyone who can provide assistance? Here is the error log: C:\Users\Intel\Desktop\burger-project>npm start > <a href="/cdn-cgi/l/email-prote ...

What is the best method for saving Vue's `prototype.$something` in a distinct file?

Is there a way to declare Vue.prototype.$myVariable in a separate file without cluttering the main.js? ...

express-typescript-react: The frontend bundle file could not be located (404 error)

Currently, I am in the process of developing a full stack application that utilizes Express (written in Typescript) and React. One key component of my development setup is webpack, which I'm using to bundle both the backend and frontend parts of the a ...

When moving from Babel version 5.8.35 to 6.0.0, be prepared for app.js to throw a SyntaxError and encounter an unexpected token during compilation

Currently, I am in the process of enhancing my ReactJS components using webpack. However, I have encountered a hurdle while trying to transition from babel version 5 to 6. Upon attempting the upgrade, it resulted in a stack trace error within my app.js cl ...

The plugin registration failed for 'html-webpack-plugin-before-html-processing' as the specified hook could not be located

An error occurred: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. The hook was not found. BREAKING CHANGE: There must be a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into & ...

"Extra loader required to manage output from these loaders." error encountered in React and Typescript

After successfully writing package 1 in Typescript and running mocha tests, I confidently pushed the code to a git provider. I then proceeded to pull the code via npm into package 2. However, when attempting to run React with Typescript on package 2, I enc ...

Make sure a specific piece of code gets evaluated in a timely manner

To ensure the default timezone is set for all moment calls in the app's lifetime, I initially placed the setter in the entry point file. However, it turns out that this file is not the first to be evaluated. An issue arose with one of my reducers wher ...

Can you explain the significance of the "null" area in the source-map-explorer visualization of my React project, and why does it appear to be disproportionately large compared to other areas?

Currently, I've been immersed in a React project that consists of 8 components and makes use of styled-components, react-spring, and AWS-Amplify. Despite the simplicity of the project, the build size is unexpectedly over 3MB. After analyzing it with sourc ...

Exporting a NextJS project as a module

Seeking some advice and recommendations here. My ideas and attempts will be shared at the end. I have a NextJS project where I aim to export the top-level component (the entry file) in order to use it as a preview on my dashboard. The NextJS project is q ...

Issue with Webpack - npm run start and build operation not functioning?

Although I typically use create-react-app for my React projects, I decided to create one without it. However, I am encountering issues with the webpack configuration as I am not very familiar with it: This is how my package.json file looks like: { " ...

Is it necessary to convert SCSS into CSS in React?

I have a query about whether it is necessary to first compile our scss files into css and then import the css files into our react components, or if we can simply import the scss directly into the components? I've successfully imported scss directly ...

Convert the nodejs undefined into bindings.js within an Electron project (and utilize better-sqlite3)

My Electron.js project setup includes the following steps: Installing node 14 Installing vue-cli Creating a template project in Vue with: vue create myproject Adding an Electron wrapper like this: vue add electron builder Installing the better-sqlite3 lib ...

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

"Exploring the world of npm packages alongside the powerful angular-cli tool

Is it better to package angular2 components in an npm module with the source files (*.ts, *.css, *.html) or the webpack compiled version for use in applications compiled with angular-cli@webpack? What should actually be published in the npm package? The r ...

Enhancing class names in production mode with Material UI, Webpack, and React to optimize and minimize code size

webpack - v4.5+ material ui - v4.9.7 react - v16.12.1 Ordinarily, all classes should follow the pattern of the last one in the first example. However, for some unknown reason, many classes remain unchanged in production mode. Any thoughts on this issue? ...

Module not found: The system encountered an error and was unable to locate the file 'os' in the specified directory

I'm currently working on a Laravel/Vue3 project and ran into an issue. When I try to execute "npm run dev", I encounter 37 error messages. I suspect it has something to do with the mix or webpack configuration, but being unfamiliar with this area, I'm stru ...

Converting Typescript library into a standalone global JavaScript file

Currently working on developing a Typescript library that follows this structure: https://i.stack.imgur.com/YyCHk.jpg This includes the following files: restApi.class.ts import { restApiOptions } from '../models/rest.options.model'; import { StoreMetho ...

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

What is the best way to configure webpack for ng build instead of ng serve?

My .NET web application is hosted in IIS and it also hosts an Angular application. This setup requires both applications to be served on the same port by IIS, primarily because they share the same session cookie. Additionally, they are integral parts of th ...

Encountering tapPromise error while utilizing gzip compression in webpack

I'm currently struggling to properly compress my JavaScript file because the documentation isn't very thorough. Here is a snippet of my webpack configuration: const CompressionPlugin = require("compression-webpack-plugin"); plugins: [ ...

Error: Unable to access the 'scripts' property of an undefined variable

I am currently using node v20.9.0 and npm v10.1.0 When I run npm run watch, it throws the following error: [webpack-cli] TypeError: Cannot read properties of undefined (reading 'scripts') at Object. (c:OSPaneldomainsdispatcherwebpack.mix.js:16:4) at ...

Having trouble configuring the API in Laravel 8 with NPM Webpack and Yarn on Ubuntu 20.04?

When running npm run dev, an error is encountered: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration.module.rules[10] has an unknown property 'loaders' Jets ...

Cypress encountered an error: Module '../../webpack.config.js' could not be located

Every time I attempt to run cypress, an error pops up once the window launches stating "Error: Cannot find module '../../webpack.config.js'" Within my plugins>index.js file, I have the following in module.exports webpackOptions: require('../../webpack.con ...

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

Encountered build issues while setting up a new project with additional dependencies. package.json: { "name": "my-files", "version": "1.0.0", "description": "App", "main": " ...

Trouble loading CSS file in Vue library from npm package

When using vue-cli to build a library (npm package) that functions for both SSR and client-side, everything seems to be functioning correctly except for one issue; the CSS only loads if the component is present on the page being refreshed. However, when ac ...

What are the steps to successfully implement createApp in Vue 3 within your application?

Transitioning from Vue 2 to Vue 3, I encountered a challenge. In Vue 2, global component registration was easy as shown in main.js new Vue({ el: '#app' }) To globally register a component in Vue 2, you would do this: my-component.js Vue.component('my-co ...