Webpack Questions
Ad
How to make dynamic import/require depend of variable with code cleanup?
I have react app created by "react-create-app" with latest react 16.12 and webpack i need to make import with dependence on variable, like
typescript cannot find module when import svg file
It's web application created with typescript, react and webpack. i want to use svg file through webpack. however, i got
How to use React components on WebWorker
I am creating a pdf generator using the react-pdf package at
Can't find module TS2307 in React
Import react from "react"; import logo from "./logo.svg"; import text from "./compiler/test/index.txt"; import "./app.css"; const app:
compile and load reactjs component file dynamically
I want to load reactjs file dynamically in browser either through making script tag or through ajax (i don't
What does the "null" area correspond to in the source-map-explorer visualisation for my React project, and why is it so big?
I have been working on a relatively straightforward react project, which has about 8 components, and uses a relatively small number of commonly
How can I create only one bundle js file when I am using create-react starter with typescript?
Initially, i am using the create-react-app which during build produces 2 js files after build, one is the main and the other one is the chunk.
Can't resolve module after npm-link for shared component repository
It is my first time trying npm-link, trying to create a shared component repository, and have hit an issue. i think i have linked the projecteds
How to repair a 'TS2769: No overload matches this call'
After package updates, i suddenly get weird typescript errors: [tsl] error in c:..\ui\src\sagas.ts(40,21)
NextJS where defines tilde '~' symbol in import path?
I read code in an app with nextjs. it imports component like import head from '~/components/layout/head' the project
Ad
Django React -- Deployment Error On Heroku (Page not found 404)
I'm deploying my django react project to heroku. build was successful, but when i visit the site which is
Load data.json file for nunjucks with webpack
I'm looking for the similar way to inject data.json file for my nunjucks template with webpack. with gulp would look something like this:
Inject script tag after generated bundle in ReactJS application
I'm building a reactjs application and there is a need to add <script> tag. i can do it right in the index.html, but this
How to analyze Next Js bundle size and content
I've just upgrated to next js 9.0 and when i run a build there's a fantastic new feature which shows you the size of all the compiled pages.
Sass doesn't replace variables with values when run through webpack
Fontawesome wasn't working as expected which led me to checking the app.css produced by laravel-mix build and i see this in
Polling Storybook with Docker-Compose
I am trying to run a basic nextjs and storybook application using docker and cannot get hot reloading to work with storybook. i tried adding the
Why is module.export set multiple times?
In this webpacker config and
"Uncaught SyntaxError: import declarations may only appear at top level of a module":1:18 asking again
Full code here: https://github.com/vscodr/axios_issue been
Error: Cannot find module 'app/MyComponent/MyComponent.module' Error: Cannot find module
This very similar to the one mentioned
Error: Template parse errors: Can't bind to 'myProperty' since it isn't a known property of 'myComponent'
After upgrading from angular 2.1.0 to 2.4.3 and webpack from 2.1.0-beta.25 to 2.2.0-rc.4 i recive this error if i run my webapp (the build works
Angular2: No Directive annotation found on MyComponent
I'm trying to put together a little angular2 app: i'm not using typescript, but rather regular es6 with babel my files looks like
Ad
How to config webpack to transpile files from other lerna packages (ejected from create-react-app)
I'm trying to build a lerna package with a create-react-app package and a simple component library. my component is as follows:
webpack - Module not found: Error: Can't resolve './src/app/app.component.html'
I am trying to migrate from systemjs to webpack and i am having this error for my .html files which are
Angular2 with webpack production: "Failed to load app/app.component.html"
My project is based on angular2-webpack-starter.
Unable to use vue-airbnb-style-datepicker with Nuxt
I'm all new with nuxt so this might be stupid question. i have a nuxt project where i want to use this plugin
why there are multiple js files generated by webpack
I'm new to react and webpack, just some questions on js files generated by webpack. i always thought webpack will get all the dependencies js into
How to make 'Post' request to local server?
I have project bundled on webpack4, i need to take some info in form inputs from and write it to txt file. i'm new in developing, so sorry if
Error after update winston to version 3.2.1. TypeError: self._addDefaultMeta is not a function
After i updated winston to version 3.2.1, i get an error while trying to hot recompile the project (when my project is started and i make
SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32",
Im trying to install webpack but it keeps giving me the same warning
angular 8 webpack-bundle-analyzer looking for wrong polyfill files
No matter what i do, after building my project i keep getting the following error: error parsing bundle asset
why does webpack 4 include the whole file for single named import?
Given the following two files : //a.js export const x = /*#__pure__*/ "x"; const a =
Laravel Mix - Is Chaining Required to Ensure Execution Order?
Tldr; do you have to chain laravel mix methods to maintain the execution order? are any methods async that would prevent one from using
Ad
Where to place webpack.config.js in create-react-app project
I have been instructed to put some instructions inside the webpack.config.js file. however in my create-react-app project i cannot find that file.
Unable to copy bundle.js of a React project to Spring Project using webpack
I have a react project within a spring project. i want to have a debug environment, where react files are watched, and are compiled & copied
Serving static files in "storybook js"
I am using storybook documentation and couldn't load images from assets folder. as documentations says: "if you are using a custom webpack config,
Why lodash get returns undefined for nested object in the react production build?
Actually, i know my question is s weird but really confused me. lodash functions are awesome and using them is a safe way to have a secure and
How to initialize firebase in gatsby?
I'm stuck on making firebase work in my gatsby application that uses redux with redux-sagas. i know about the existence of
Unable to run the React-Redux project. Webpack error
$ npm start 「wds」:invalid configuration object. webpack has been initialised using a
Rails Webpack ERROR in Entry Module: Can't resolve application.js in Production (Heroku)
I have a rails 6 app with webpacker. everything works well in development but i get an error trying to resolve the entry path when i try pushing
The command 'npm run dev' is not working, what should I do?
I'm trying npm run dev in the cmd and it's throwing an error i've tried a lot of things but it doesn't seem to work. here is my
Module not found: Error: Can't resolve 'cropbox' 2
I asked question module not found: error:
Laravel Mix - Autoload modules with special characters in their name (eg. tippy.js or slick-carousel)
Is there any way to autoload packages with special characters in them? i would like to extract npm packages using laravel mix and also set
React Chunk download background
In my react app production build i need a chunk to be downloaded in the browser in background. the issue is that currently when i click a button
Ad
Using a common folder in npm project
I have a vue project with multiple clients. the clients all have similar components which i keep in a "common" folder: clients --
React application production build static folder path changes
I am using react-app-rewired to build my react application with the following in package.json. "scripts": { "format":
How to execute my own script after every webpack's auto build in watch mode of vue-cli 3.x?
My current situation now i am using [email protected] for some reason, i need to watch file change of my source code to run webpack's
Getting Failed to construct 'Worker' with JS worker file located on other domain
I am using react-pdf to render a pdf file inline on my
Including React as a webpack external results in cannot find module 'react'
I am creating an npm package with commonly used components in multiple projects. i don't want to bundle my own react/react-dom in this package so
jquery not defind inside IIFE in webpack
I am using laravel mix for js bundling. but value of $ not defind inside a iife function in js. here is my code import $ from
How to detect which compiling option are used on recompilation by webpack
I have the following script const webpackdevserver = require('webpack-dev-server') const webpack = require('webpack') const
React project dependency error while adding webpack
I have installed webpack with below command yarn add webpack --dev and after i ran yarn start command inside my
"npm run build" fails with SyntaxError:Unexpected token
I am trying to deploy my app to aws and encountered an error when executing "npm run build". this error seems to be relevant with
Initial production build creates bundle code, but all subsequent builds reuse old bundle
After adding authentication with passport and redux to my project, anytime i push my production ready code to my server it reuses an old build of
Cant find what causes the error when import component class
Im getting an error : unexpected token when importing a component-class while within another component class. im new to react, webpack and still
Ad
Favicon with webpack and vue-cli
Hey everyone so i have a predicament. index.html is created by webpack for my vue project. it's currently looking for favicons inside the the dist
How to use purgeCss with Laravel Mix
I’m trying to purge my css file with
csrf and cors errors in localhost development of webpacked vuejs/reactjs/angularjs website with django backend
How can i run my vuejs application on localhost and have it send its api calls to my deployed django rest framework backend without getting cors
Minimal number of commands to produce a client-side ready-to-use Javascript code?
For many js libraries we can find on github, it's nowadays impossible to use them directly in a client-side project by doing:
Not sure why my Vue app build.js file appears to be my index.html file after build in Firebase
After i deploy my vue app to firebase, it appears as if my
Dirname in Nuxt
I am trying to read files in a directory but cannot because __dirname is undefined nuxt.config.js
webpack-dev-server: auto reload for tampermonkey script
I am trying to get webpack-dev-server auto-reload a script i am writing to run as userscript in tampermonkey with the
Embed a custom Monaco Editor in a Docusaurus website MDX
I have a website built using docusaurus 2. now, i want to embed a
Rails + React-I18next : can't find locales/
I want to integrate react-i18next in my react on rails app (i'm using webpack). the problem is react-i18next can't find my locales
Creating an npm module with target specific code
I am currently working on a javascript module that includes code for both web and nodejs targets. these are each in their separate files
Control webpack verbosity when programmatically starting vue-cli-service serve
I'm trying to run vue-cli-service serve from inside a node.js application like this:
Ad
"You may need an appropriate loader" in React and Webpack
I've been trying to use react js with webpack, but when doing "npm run build" i get the following: you may need an appropriate
Pass asynchronously loaded data to pug-html-loader in webpack
General setup i am building a small website with webpack and pug based on this awesome
Multi module projects with create-react-app
I have a project called frontend-core-components which contains my app component. i have another project (let's just call it
Import and use nano-memoize in react application?
I am trying to use nano-memoize in my react based web application which also uses typescript and webpack. i have followed the following
Why webpack fails to compile when nested package.json exists
Here project structure src/ --ui/ --lib/ ----async-store/ ------create-inject-reducer-hoc.jsx ------package.json <<=== this
Reactjs - Uncaught SyntaxError: Unexpected token <
I create the reactjs app, test and compile it with webpack, it is fully functional and every thing is okay, once i need to make a production build
How to fix antd babel import css overrides custom css?
In my react app i have imported antd components and using babel import to lazy load css styles. ['import', { libraryname: 'antd',
Webpack and TypeScript: module resolution error
I have a project with typescript and webpack. i want to import files without extension. this is my tree: . ├──
Can't build VueJS webpack based project after removing node_modules folder
I recently had some issue with the web project on which i'm working and tried to remove node_modules folder. but after removing and
Angular Build - Uncaught TypeError: Cannot read property 'id' of undefined
I have managed to build my angular app out as a dev build. i haven't done it as a production build yet as it gives me a few errors and i just need
Unable to find Class reference from Webpack bundled file
I am pretty new to webpack and frontend development. i have a js file which has multiple classes, this classes would be used by other js
Ad
How to dynamically import SVG and render it inline
I have a function that takes some arguments and renders an svg. i want to dynamically import that svg based on the name passed to the function. it
Laravel Mix one sass to multiple css
When trying this: mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css/app_blue.css', {
How to exclude global styles in a React App?
I am using material ui for building my react project. however there is a
Webpack not bundling SCSS / CSS
I'm trying to create a webpack config for working with a static site, using scss. "scripts": { "start":
Event or callback when webpack fails to load a module or chunk
Is there some callback or event in webpack to know when a module or chunk has failed to load in the browser? i know that
Vue DOM image won't show correctly
I'm using the vue framework and creating an image using the domutil.create function. in this image i want to dynamically write the
Expose TypeScript variable to JS global scope (with webpack)
I'm using webpack to compile my typescript to javascript and i want to expose a variable to the global scope so others can access it. i
Webpack mixing up default and named imports
While updating some deps (react-bootstrap) i ran into a react error you likely forgot to export your component from
"Cannot find module" when running unit tests on node.js with react as peer dependency in common package
I have following app structure: application a application b common
Laravel CKEditor5 - ClassicEditor is not Defined
I'm trying to replace an old version of ckeditor in a laravel app due to dependency incompatibility with unisharp/laravel-ckeditor
Isomoprhic application, problem with TypeORM && TypeScript && Express && Webpack setup
I am trying to make isomorphic javascript application. both server side code and client side code are compiled by webpack. when i
Ad
Webpack 4 doesn't throw compilation error on use of undefined functions
I recently got involved in a project which uses webpack bundler. while refactoring the code i noticed that the bundler doesn't throw error on use
How to edit an object within a very simple JS file using Node.js
Whilst this question is related to workbox and webpack, it does not require any prior knowledge of either library. background
Using appropriate transpilers for React Native Web Project
I am trying to create a react native web project. i have built several react native apps before, but have never tried to put one on the
Cannot find module 'webpack/bin/config-yargs' -React JS
I am new in react js , while running npm start it throws following error > [email protected] start /home/ajeesh/documents/reactapp >
"npm start" doesn't work on any react-js project
[package.json] i tried everything i tried to update npm, node, webpack
JavaScript - after import (webmix) Uncaught ReferenceError: getJobData is not defined error
I am using default laravel webmix settings const mix = require('laravel-mix') mix.js('resources/js/app.js',
No task runner configurations are found?
I have (freshly installed) visual studio professional 2017 (v 15.9.4), a
How to avoid Laravel Mix overriding app.css
The content of style.css gets overridden eahc time i run npm run dev this is my webpack file let mix =
How to fix blank web page after 'npm run build'
I'm currently working on a project using vue and firebase. the issue is that my dev server is no longer rendering new routes from my vue router
Passing NODE_ENV into the npm script for Windows 10
I am using webpack in a typescript project. i am following a
clear cache on current users' device in migrating from webpack 3 to 4
I have a reactjs pwa based on webpack and offline-plugin. currently
Ad
VSC Debuging React, cannot create breakpoints / attach to process
I've been trying out a lot of the potential fixes from so, but none of them helped me so far. i cannot get the debugger to attach properly, it
ReferenceError: require is not defined in ES module scope
I added the webpack 5 config like this in the typescript project: const path = require('path'); const webpack = require('webpack');
Ad
Blog Categories
Ad