Questions tagged [webpack]

11439 questions
1

votes
1

answer
3.5k

Views

Webpack: You may need an appropriate loader to handle this file

I am setting up typescript with webpack, using awesome-typescript-loader. However webpack is giving me this error on build: ERROR in ./src/logic/Something.ts Module parse failed: Unexpected token (2:19) You may need an appropriate loader to handle this file type. here is a piece of code from webpac...
Martin Shishkov
1

votes
1

answer
84

Views

Reference js file using webpack

I am new to webpack, and am using it to compile my Elm project. I have the following configuration file var path = require('path'); module.exports = { entry: { app: [ './src/index.js' ] }, output: { path: path.resolve(__dirname + '/dist'), filename: '[name].js', }, module: { rules: [ { test: /\.(cs...
Murdock
0

votes
0

answer
3

Views

How can I import Emscripten generated .wasm/js files in files created with create-react-app

I have a library I can successfully build & run with the Emscripten generated .html files. I'd like to use it with React now, however, I get a MIME type error` which I can't fix. Here are the steps I take to generate the React app and .wasm files npx create-react-app stackoverflow DEST=stackoverfl...
Marvin Irwin
1

votes
1

answer
1.5k

Views

Is there a way to let webpack dev server use another port?

I'm using the webpack dev server, via the react scripts and I'd like to use the debugging functionality it offers via Visual Studio Code, however, I have a non-standard setup. We have service in front of the webpack dev server that proxies all requests, bundles requests with other services, handles...
Alex
1

votes
2

answer
278

Views

Django & React with django-webpack-loader vs Decoupled App structure linked to Rest API?

I am reading through the following tutorial: http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ I can't quite grasp what the added value is of using something like django-webpack-loader to fully integrate react.js and django when you can completely decouple django from react, ru...
Aran Freel
1

votes
1

answer
332

Views

Rails / Webpack: TinyMCE cannot load skins (404 (Not Found))

I am working on a Rails project that has been using assets pipeline but we are currently trying to transition to webpack. I encountered a problem when attempting to get TinyMCE to work after pulling it through yarn - the text editor simply won't load. Before the transition to webpack Originally I us...
Joanna Gaudyn
1

votes
2

answer
565

Views

How can I tell Vue-cli where my app's entrypoint is?

My app is split into an API and a UI portion. Deployment strategy requires they share a package.json. The file structure looks like client/ src/ main.js api/ package.json vue.config.js I am using the standard vue-cli scripts. package.json 'scripts': { 'serve:ui': 'vue-cli-service serve', 'build:ui...
Caleb Jay
1

votes
2

answer
3.7k

Views

Parser “babylon” deprecated error - webpack build

After I have been upgrading my projects JS packages, an error has appeared when building my bundle with Webpack. It seems to appear when building a .vue-file and can appear on any .vue-file build. I don't have 'babylon' in my package.json and I have a newer @babel/core version (7.2.2). This is the e...
Kris D. J.
1

votes
1

answer
1.6k

Views

clean-webpack-plugin only accepts an options object

I'm getting Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults- My Webpack.config.js file looks like this: const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-...
abhigna batchu
1

votes
2

answer
77

Views

Cannot read property 'thisCompilation' of undefined - react-scripts-ts

I created a new project, totally blank using these instructions: https://developer.microsoft.com/en-us/fabric#/get-started Follow steps 1-4 The application works fine. Once I run npm i webpack Then I get this error my package.json { 'name': 'lulo', 'version': '0.1.0', 'private': true, 'dependencies'...
Luis Valencia
1

votes
2

answer
34

Views

Vue.js + Webpack Requesting Multiple Incorrect Resource URLs

I've been using Vue.js single file components to build a website and really enjoying the modular system. I'm running into an issue however where the browser seems to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue export default { name: 'HeaderBar' } #hea...
735Tesla
1

votes
2

answer
66

Views

How to transpile and minify single file with webpack?

I have a React application, and in my application I'm relying on react-scripts, so the build command is defined like this 'build': 'react-scripts build', and it works all fine. Now, the point is that inside my src directory I have a JS file called wrapper.js, which is a standalone file, and it is pu...
terett
1

votes
1

answer
14

Views

Same publicPath when loading images from css and html files

To make it simple, I have: | index.html +---css | style.css +---img | image.jpg In style.css: background: url('../img/image.jpg') In index.html: And I basically want the same in the output, but instead, for the css I get: background: url('img/image.jpg') So it doesn't work because the css...
Seyed Ehsan
0

votes
0

answer
5

Views

Need help understanding how to package React component library with Webpack

I'm trying to create a library of generic React Components that I use a lot. I have managed to get the library working and can npm install it ok. It also compiles correctly when I import the Components with something like from another project: import { Title } from '@orderandchaos/react-components/d...
Sarcoma
0

votes
0

answer
4

Views

How to read appsettings.json file using webpack.config or tsconfig.json in .net-core react redux project?

I am setting up .net-core with react-redux project in VS 2017. I removed default CleintApp and created new folder with 'npm create-react-app --typscript'. Here is multiple questions Where i can find webpack.config.json file How can i read appsettings.json file using webpack.config file to import thi...
Mahesh
0

votes
0

answer
9

Views

Copy build files to another project using webpack

I have two project folders in the same parent folder. One is for front end files (JS, CSS, images etc.) and another is for the backend files. The frontend project uses webpack to build files into a dist folder. The backend project is the one which gets deployed to the server (or run on localhost)....
noob
0

votes
0

answer
18

Views

Why my app doesn't found “html-loader” when I have install it?

Information I have an application (reactjs) that run with docker, It use webpack but at start it crash saying that html-loader can't be resolve. I install it but when I rerun docker, It continue to say that. Error message Html Webpack Plugin: Error: Child compilation failed: Entry module not found:...
Tutturuuu
1

votes
6

answer
1.1k

Views

Having trouble understanding how webpack bundles dependencies

I'm struggling to understand how webpack includes dependencies in a bundle. I built a minimal-ish demo using webpack, typescript and threejs that works fine. It's on github here The first problem is that I don't understand how threejs gets included in the bundle.js. I think it's great that it does!...
Andrew E
1

votes
1

answer
540

Views

React.js - babel-loader - Unexpected token

I have problem that I can't solve. There are many answers for similar question, but they don't apply (I think). I have some files. Lets start with package.json: { 'name': 'react-tut', 'version': '0.0.0', 'description': '', 'main': 'webpack.config.js', 'dependencies': { 'babel-core': '^6.11.4', 'babe...
Xkonti
1

votes
1

answer
2k

Views

Configure Webpack with Electron to use ES6 imports?

I am trying to use Webpack since I want to use ES modules in my Electron application but having some hurdles. I just want to use import in my main as well as renderer processes. My application structure is as follows - - src/ // contains basic html, css & js - index.html /...
deadcoder0904
1

votes
2

answer
1.1k

Views

How to add support for PDF files with Vue Cli 3?

I need to configure Webpack to accept and handle PDF files with url-loader via the Vue Cli (latest). vue.config.js module.exports = { configureWebpack: { rules: [ { test: /\.(pdf)(\?.*)?$/, use: [ { loader: 'url-loader', options: { name: 'files/[name].[hash:8].[ext]' } } ] } ] } } Does the above loo...
1

votes
1

answer
1k

Views

sourceMap with sass-loader and postcss-loader in Webpack

I'm trying to enable sourceMaps in webpack but there seems to be a problem with sass-loader and postcss-loader combination. With both sass-loader and postcss-loader enabled my console shows 'no source': But when I disable postcss-loader the sourceMap works fine and points to 'typography' file: webpa...
Tomarz
1

votes
1

answer
77

Views

Access “variable” environment variable using dynamic javascript variable names

I have an issue. In my Host/cloud solution, I must use environment variables of pricing for each country this way 'defined in their 'Environment Variables'). BASIC_PRICE_FR_PRODUCT = '50'; COMPLEX_PRICE_FR_PRODUCT = 100; BASIC_PRICE_UK_PRODUCT = '37'; COMPLEX_PRICE_UK_PRODUCT = '200'; BASIC_PRICE_ES...
Mathieu
1

votes
3

answer
45

Views

Private NPM library raise error “Module parse failed”

I'm trying to create my libary with React and to use it locally (with my company git repository). I can test my app while developping with npm run start. My app is running. But when I want to use it in an other project, I got this error : ERROR in ./node_modules/mylib/src/views/calendar.jsx Module p...
Xero
1

votes
2

answer
35

Views

How to exclude code from production in build-time?

How do I exclude typescript code from webpack bundle during build-time? For example, I have this line of code in app.ts (nodejs application): const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa'; I want when I build my app using webpack configuration to exclude this code.
Jon Sud
2

votes
3

answer
238

Views

Export { default } not supported in React app

I'm facing problems after update @atalaskit/form from version 2.1.2 to the latest version (5.2.7). This new update makes use export { default } from './File' which I think my babel and/or webpack doesn't support. So far I found out that create-react-app 2.1.8 runs well this syntax. Also, I found th...
LuisMendes535
1

votes
1

answer
31

Views

Webpack doesn't bundle all functions in my JS file

I recently integrated Webpack to my project to build bundles for the JS files on my website. After fixing a few small issues, I was able to get the bundle to be built. Upon checking in the browser, one of the Javascript codes threw the below error. Upon checking, I realized the addComment.moveform w...
Amith Raravi
0

votes
0

answer
12

Views

How to code split with django and webpack

I managed to include bundle splitting in the webpack.config.js, so I now have a main.js, vendors~main.main.js and a npm.core-js.js. In Django I'm loading the .js files with script-tags like that: {% load static %} and in my frontend application I'm importing the libaries with an import statement imp...
Vulturemox
1

votes
1

answer
16

Views

How to import JS in TS with noImplicityAny and without allowJs

I'm using Webpack and @babel/typescript to compile a mixed TypeScript and JavaScript project. I'm using --noImplicitAny to encourage taking advantage of typing. I'm not using --allowJs because my project is so big that it chokes the TypeScript compiler, and it destroys Visual Studio highlighting/Int...
Michael Crenshaw
3

votes
0

answer
72

Views

How do I get more debug information out of i18next?

I have upgraded an app from using webpack-i18n for translations to using i18next (13.1.5). For the most part, everything worked, but on one particular page, none of the text from one of my ejs files is loading. The js file for that page makes a few calls to i18next.t under specific circumstances, an...
James Martineau
0

votes
0

answer
2

Views

How can I use proxyTable to make cross origin request in vue-cli?

I want to use proxyTable with axios in my vue-cli project. In my config/index.js, I put code like this: proxyTable: { '/getnews': { target: 'https://xx.xxx.xx.x' changeOrigin: true, secure: false, pathRewrite: { '^/getnews': '/getnews' } } } and in my request function, it goes like this: var url = '...
P1NK
0

votes
0

answer
5

Views

how to bundle on page java-script files for several different web-pages?

I have a multiple pages around 800. those pages have around 10 on page js and css files apart from common layout. I can bundle the layout files in one bundle.js file but how to deal with 800 view files which has different js files to bundle in single js. I tried bundling all js in single bundle.js...
Manish Patil
4

votes
4

answer
161

Views

DataTables API undefined with Symfony Webpack Encore

I'm using Webpack Encore with Symfony 3.4 (part of migration to Symfony 4). I have Datatables (installed via NPM to node_modules) working with jQuery but the api functions such as .columns are returning: .column is not a function at Package Versions: jQuery 2.14.4 Datatables 1.10.19 Webpack Encore 0...
Dan
0

votes
0

answer
5

Views

Module parse failed: Unexpected token react + webpack + babel

I'm using react with mdbreact and web pack. The problems come when I have to import the mdbreact modules that I have imported at index.js it says this about the three CSS files: Module parse failed: Unexpected token (28:0) You may need an appropriate loader to handle this file type. Index.js https:...
Santiago Guzman
1

votes
0

answer
91

Views

Split main.bundle.js angular starter

I am using https://github.com/gdi2290/angular-starter for my project and I want to split main.bundle.js in multiple files with predefined names. For example: main.bundle.1.js main.bundle.2.js main.bundle.3.js main.bundle.4.js Is it possible to make this kind of configuration?
Jovica Madzevic
1

votes
0

answer
301

Views

How to bundle Create React App with webpack?

I'm bundling the react app into a single file so that it will be simpler to serve from a Scala Play backend. my webpack.config.js looks like this const webpack = require('webpack') const path = require('path') module.exports = { entry: { frontApp: './src/index.js' }, output: { path: path.join(__dir...
irregular
1

votes
0

answer
215

Views

Ngrx not working properly with AOT in Angular

From past couple of days I am trying to use ngrx with AOT, with JIT it works fine, but with AOT it gives this error Uncaught TypeError: Cannot convert undefined or null to object in combineReducers, I believe its because it's getting undefined as the first parameter, here is my code: // reducer.ts...
Dheeraj Agrawal
1

votes
1

answer
1.1k

Views

webpack build error TypeError: Converting circular structure to JSON

I'm facing an error in building and running dev server with Webpack. I use Vue.js and used vue-cli for generating a project. For testing, I'm using Jest and npm test runs with no problems. If I run npm run build I get this error output: ERROR in TypeError: Converting circular structure to JSON -...
Mikeee
1

votes
0

answer
206

Views

How to use an alternative promise library in VueJs project?

Device: PC Browser: Chrome (62.0.3202.94) OS: Ubuntu 16.04 Hey! I'm using VueJs webpack starter. I've tried many things, but nothing seems to work — browser keeps using its native promise library. Here are some things I did (tried DefinePlugin, ProvidePlugin, explicit shadowing): webpack.base.con...
manidos
1

votes
2

answer
743

Views

Slow Karma Unit Tests

I wrote unit tests for a small reach application using Jasmine and Karma.And Karma is running slow for these tests. This is my karma config: var unitTestReportOutputDir = 'unit-test-report'; module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine'], reporters: ['dots'],...
zfranciscus

View additional questions