Tag: webpack

Webpack ES6 modules multiple class app organization

class es6-class es6-modules javascript webpack

I’m building an app with webpack for the first time and i’m trying to wrap my head around organizing class files. I’m having trouble getting the code to work. I’m still new to ES6 and such, so my code below is probably very wrong but i’m not sure its my approach/concept or its my syntax. entry is index.js and I

How to correctly use Vue 3 composition-api across multiple Vue instances in multiple files

javascript vue-composition-api vue.js vuejs3 webpack

tl;dr What is the correct way to import Vue3 in a base js file, then use Vue’s composition-api in other standalone js files that will be loaded after that base file? I am using Vue to enhance user experience in specific pages. For example, in register page to perform ajax requests and show server errors without page reloads. In short,

Is it true webpack5 is unable to polyfill libraries? What are some solutions?

html javascript webpack webpack-4

My problem was: I was using require in a js script used in the browser (to download nodemailer). Following the advice of this SO post, I downloaded browserify. It allowed me to use require in a js file used by the browser. Webpack was another alternative listed. It is more common than browserify & has more features (like intelligently arranging

Webpack Error – configuration.node has an unknown property ‘fs’

antlr4 javascript node.js webpack

I have encountered an error when using the latest version of Webpack (5.1.0). It looks like the configuration is throwing an error because the validation schema is too restrictive. Here is my webpack configuration file in a gist, and the error message I am seeing. Webpack.config.js https://gist.github.com/adarshbhat/3ec5950b66b78102da0cf46e51a3d633 Error I am attempting to use a parser generator library (antlr4) that works

Configure Vue loader and lazysizes to transform urls with Nuxt

html javascript nuxt.js vue-loader webpack

I’m trying to configure lazysizes with Nuxt and my urls are not handled by Webpack so I get a 404 error. I get the path src=”~/assets/img.png” instead of src=”/_nuxt/assets/img.png”. I added lazysizes as an npm package and the following to my nuxt.config.js file. And this content to the plugins/lazysizes.client.ts For minimal reproduction, I just use a very simple image like

Error: Cannot find module – webpack-dev-server.js

javascript npm reactjs webpack webpack-dev-server

I am building a react app from scratch. Usually, I am running the npm create-react-app and it generates everything for you. I am following this tutorial https://www.youtube.com/watch?v=deyxI-6C2u4&ab_channel=TraversyMedia and it has the GitHub repository in the description. The problem is – when i run “npm start” it should run this command which is written here in the package.json The command works

Webpack custom library undefined after compile

javascript jquery webpack

I am building a javascript library and try to compile it with webpack. My problem is the library I build are not defined. I can see my code are in the webpack output file but at run time my library returned undefined. If I use my library uncompiled (without Webpack), then everything is working fine. This is my library: webpack.config.js:

How to specify a different path AND filename for each entry point in your webpack config? (my config is invalid despite following the docs)

javascript webpack webpack-config

I want to be able to have a specific path AND filename for each entry in my webpack config. Specifically, this example from the webpack “Output Filename” documentation is what I want: And here is my implementation of that example: I know that this kind of entry point config is valid because its in the “Output Filename” section of the

Can’t use a variable in require() in React

html javascript node.js reactjs webpack

I am using the source of an image through a variable array. I tried the variable and with the backticks as well but it is giving me error that Error: Cannot find module ‘../../images/sectors/pellet-mill.png’. If I am using the source url only it works fine. Why can’t we use the variable in require()?? Answer Webpack can only bundle resources that

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source

javascript webpack

I added the following to a web page: When I run the application I get the following error: When I remove the script I do not get the error anymore. Any idea why this happens? Answer Your current CSP setting is: which means that you can only execute your code from your root URL (localhost:5000). You can try to extend