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...
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...
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...
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...
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...
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...
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...
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...
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-...
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'...
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...
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...
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...
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...
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...
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)....
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:...
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!...
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...
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 /...
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...
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...
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...
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.
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...
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...
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...
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...
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...
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 = '...
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...
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...
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:...
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?
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...
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...
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
-...
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...
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'],...