Questions tagged [webpack]
7635 questions
1
votes
1
answer
92
Views
ES6 syntax error with babel-loader (webpack)
Trying to make a simple graph using storm-react-diagrams
Not Completely sure how to solve this.
Error:
ERROR in ./src/diagram.jsx
Module build failed: SyntaxError: Unexpected token, expected , (31:9)
29 | // link the ports
30 | let link1 = port1.link(port2);
> 31 | (link1 as DefaultLinkModel)....
1
votes
3
answer
759
Views
Vue.js 2: Vue cannot find files from /assets folder (v-for)
I am using Vue-cli 3 with Webpack, and my folder structure looks like this:
/public
/src
/assets
p1.jpg
p2.jpg
App.vue
main.js
I read in several places that in order for Webpack to know where your /assets are, you should use require() if you are in Javascript land.
I have determined that this code w...
2
votes
1
answer
46
Views
npx webpack command cannot find module webpack.config.js
I'm following the official Webpack getting started guide and I get an error on the Using a Configuration section. It says to create a webpack.config.js file with:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'd...
0
votes
0
answer
3
Views
How to config CSS Modules for Webpack?
I'm trying to write a minimal config for Webpack 4.29 and configure CSS Modules. Everything on the web suggests the config given below. Although for me it doesn't work. It gives the error Module not found: Error: Can't resolve 'style-loader'. What am I missing?
module: {
rules: [
{
test: /\.js$/,
ex...
0
votes
0
answer
2
Views
How to log the rewritten urls in webpack dev server proxy
Is there any way to log the request urls in the webpack dev server proxy? I tried logging in the onProxyReq method in the proxy and tried setting the debug: true and logLevel: 'debug' values too but neither of them are showing any logs in my console when I make a request.
-1
votes
0
answer
22
Views
Promise is undefined in webpack bundle file
I have a React/Redux app that uses webpack and babel-polyfill. However, in IE11, I am getting the following error: SCRIPT5009: 'Promise' is undefined.
Before this gets marked as a duplicate question:
I know this is typically associated using ES6 syntax in browsers that don't fully support it, withou...
1
votes
1
answer
75
Views
TypeScript module structure in JS with Webpack
I'm trying to publish a TypeScript library using webpack and with a folder structure like:
src/
module1/
some-class.ts
index.ts
module2/
some-other-class.ts
index.ts
etc/
If used in TS, I should be able to do:
import { SomeClass } from 'my-library/module1';
And when using require, should be able to...
0
votes
0
answer
4
Views
Providing React Context to an imported node module
Is it possible to ES6 import a React component from node_modules that depends on a Context Provider (like react-redux 6.0) without the Provider Context being exported by that module?
For example, the implementation of the import would wrap the imported component with its own Provider.
import App fr...
0
votes
0
answer
3
Views
Webpack images path in javascript with the HASH
So if i have this setup for the images in Webpack
everything is created as expected in path for HTML and CSS files.
const images = {
test: /\.(jpe?g|svg|png|gif)$/i,
exclude: /node_modules/,
loader:'url-loader',
options: {
limit: 10,
name: '[path][name].[ext]?[hash]'
}
};
but how can i indicate insi...
5
votes
1
answer
72
Views
Webpack4: Two vendor libraries based on entry points
So, I've been hunting and I can't seem to find anything unless my searching skills have gotten worse lately. But, what I'm looking for is to be able to generate two vendor bundles based on the entry point.
For example, I have 3 entry points:
Editor
Public
Auth
When a user is logged in, it'll include...
5
votes
2
answer
184
Views
Error with JSX in my React Library when Switching to Preact
I have a really simple React library that I use with my own state management. It's just a Higher Order Component:
import React from 'react';
/**
*
* @param {Object} state - Reference to SubState instance
* @param {Object} chunk - object of props you want maps to from state to props
*/
const conn...
0
votes
0
answer
9
Views
webpack 4 react build causes token error, but run start works
After a build with webpack I am getting the Uncaught SyntaxError: Unexpected token error. I am able to run start and it will load that way. So I know this must be a problem with the output, or so I would imagine.
The index.html is generating properly, as is the bundle.js. I have that as a path on...
1
votes
1
answer
2.9k
Views
Add style/class to react-datepicker
So basicly how do I add a css class? I've given this a go but it ain't working:
Thanks, Ed.
(It's been compiled with webpack by the way.)
1
votes
1
answer
61
Views
Webpack: output.path, publicPath and chunkFilename selecting concept for projects where html and js files are not in the same folder
From the webpack documentation for output.publicPath:
Simple rule: The URL of your output.path from the view of the HTML
page.
module.exports = {
output: {
path: path.resolve(__dirname, 'public/assets'),
publicPath: 'https://cdn.example.com/assets/'
}
};
Above rule is actual for single-page ap...
1
votes
1
answer
983
Views
webpack 4 react unexpected token …(spread operator)
Recently i have implemented Webpack 4 setup for my react app.
My webpack.config.js looks like this
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: './src/index.js',
filename: './index.html',
});
module.exports = {
module: {
rules...
1
votes
3
answer
2k
Views
Can not minify the css code with webpack
Webpack version: 4.16.3
All compilation is successful.
My code after compilation in bundle.css is not minify.
I try to use minimize: true in text-webpack-plugin, but it not working.
For compile I use command in command line: webpack in my working directory
What am I doing wrong?
My wepback config:
'...
1
votes
2
answer
234
Views
How can I use multiple entries in Webpack alongside multiple HTML files in HtmlWebpackPlugin?
We'd like to have two outputs from Webpack - our entire app with all of its dependencies, and a single different page with only one dependency (that isn't shared by the main app).
It seems the way to do this is to leverage the entry property of a Webpack config. However, that's not enough, as we al...
1
votes
2
answer
302
Views
dynamically import a React Component if that file exists, otherwise show a default message
I want to conditionally import a React Component if the file exists and if not do something else. For example show a default view or message.
I tried this:
let Recipe;
try {
Recipe = require(`docs/app/Recipes/${props.componentName}`);
} catch (e) {
Recipe = () => Not found;
}
However the linter...
0
votes
0
answer
5
Views
Unable to build chunk file using laravel-mix
Chunk files are not generating while run the command npm run dev or npm run production . Only two files are created under public build folder
app.js
app.js.map
Here's my webpack configuration:
1
votes
1
answer
7
Views
Webpack: Unable to find module with ID: main — (Aurelia App)
TLDR: Aurelia app, bundled with webpack, can't load in browser - console shows error: can't find module with id: main. I think that means it can't find the entrypoint. Running out of things to try.
I work on an Aurelia application.
We use webpack for bundling our front-end code.
It all worked great...
0
votes
0
answer
9
Views
More extensive mangling terser-webpack-plugin?
Is there a way to thoroughly mangle vue components that have been bundled with webpack?
When applying mangling via terser-webpack-plugin with mangle.properties set to true, then not all of the property names are mangled, for example:
location: {
lng: -.134281,
lat:51.513508,
zoom:13,
pitch:1,
bearin...
1
votes
0
answer
18
Views
Author a react + styled-components based UI framework
Author theme app
use npx create-react-app theme to create a theme app
Create a styled-component under components after installing styled-components.
Use the above theme app as a library in the newly created project/app
use npx create-react-app theme-test to create theme-test app
import Button from...
0
votes
0
answer
3
Views
How to create CRA-project without PWA features?
I don't need PWA features in current project. How i can disable it?
I read the docs of CRA, delete service-Worker.js in src folder, but i can't exclude manifest file and service-worker.js in build.
0
votes
1
answer
6
Views
Babel 7 module resolver not finding modules
I am upgrading to Babel 7 in my project however my modules in .babelrcare no longer resolving.
My package.json looks like this:
"dependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"babel-plugin-styled-components": "^1.10.0",
"react": "^16.4.0",
"react-dom": "...
6
votes
1
answer
138
Views
How to import dynamically with webpack
I want to use FontAwesome's icons, but the whole package is too large and I have to select only the ones that I'm using
I'm using vue & webpack
Right now I have the standard:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faGem as falFaGem, faDatabase as falFaDatabase } from '@...
0
votes
0
answer
13
Views
Unexpected "Hooks can only be called inside the body of a function component
I am using a simple useState() hook in a functional component.
When I run, I get an error stating:
Hooks can only be called inside the body of a function component
I have updated both react & react-dom to be on the same versions (16.8.1).
The functional component that uses hooks:
const AuthForm =...
0
votes
0
answer
4
Views
Gulp detects changes in files that were never changed. Sometimes infinitely
The Issue up front: Working on this old angular 2 app at work is taking forever because gulp will either blow up during build, or randomly during development gulp will go into an infinite change detection cycle until it runs out of stack space.
Up front info: package.json
"gulp": "3.9.1",
"gulp-bab...
2
votes
0
answer
14
Views
How to detect whether my code is executed as a Webpack bundle
I'm currently experimenting with the following strategy to dynamically load a json file from a path relative to my module :
If my code is bundled as a Webpack bundle, use import(filename.json)
In any other case, fall back to an AJAX call, with an absolute path
The following seems to work in my test...
0
votes
0
answer
4
Views
How to create chunk which contains only code from it and replaces its entry bundle in webpack 4?
I'm moving from webpack 3 to webpack 4 and have some suddenness. I want to create a chunk which contains only code from it and replaces its entry bundle. How to do it with SplitChunksPlugin?
My solution with CommonsChunkPlugin in webpack3
My entry point:
entry: {
...,
all: './src/all.js',
...,
}
Cre...
0
votes
0
answer
3
Views
Migrating from webpack 2 to webpack 4
I'm trying to migrate a project I'm working on from webpack 2.4.1 to the most recent version 4.29.3. (A much needed upgrade, I know)
I think I have converted everything correctly, from replacing extract-text-webpack-plugin to mini-css-extract-plugin, etc.
The problem occured when I tried to replace...
1
votes
3
answer
1.5k
Views
How to temporarily turn on/off React development mode when using webpack?
I'm using webpack as my bundler and I'd like to test the real performance sometimes without having to actually bundle the whole application. Is there a way how to temporarily turn off React development mode? As far as I know, the production version of React is actually a different file with all the...
22
votes
5
answer
1.2k
Views
Error In Runtime From Terser During Build --prod
I have updated everything Angular and am now getting the error below (4x) when I
"Build --prod"
No errors if I remove --prod
I have no real code in this app. It is just a starter shell.
Any suggestions on what to look into?
ERROR in runtime.82c6613acef8f7246fe8.js from Terser
TypeError: Cannot read...
1
votes
0
answer
97
Views
Force Reload on Webpack Async Import
I'm currently working on a refactor from a large legacy jquery-only codebase to a vue single page application. In doing so, I'm hoping to separate out my work into managable chunks, maintaining much of the legacy codebase as-is in the code, and slowly pulling pieces and parts out of it to refactor t...
3
votes
2
answer
131
Views
Using webpack [request] magic comment is bundling together dynamic modules as one
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/home',
name: 'home',
component: () => import( /* webpackChunkName: "[request]" */
`@/views/Home.vue`)
},
{
path: '/about',
name: 'about'...
1
votes
1
answer
583
Views
Webpack Sass and foundation how do I manipulate the variables
I'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will rea...
1
votes
1
answer
225
Views
Radium error - Unknown plugin “flow-comments”
Got the following error when using radium with reactjs. Is anyone got the solution for this issue?
Radium Verion: v0.14.1
React Version: v0.13.3
ERROR in ./~/radium/lib/index.js
Module build failed: ReferenceError: Unknown plugin "flow-comments"
at PluginManager.subnormaliseString (/home/iswan/os-pr...
1
votes
2
answer
992
Views
Duplicate output from Webpack
In my webpack config file I have the usual output config:
output: {
path: buildPath,
filename: 'scripts/boundle.min.js'
}
However I want one output at /build (buildPath) and another to a folder where I have Cordova settings. Currently I have to copy-paste /build to Cordova but I want Webpack to outp...
0
votes
0
answer
4
Views
Does NativeScript Sidekick remove comments in XML and JavaScript and minify the source codes while building the app?
I use NativeScript Sidekick.
When I build my app, I turn on Webpack and uglifyjs, but do these options remove all my comments in my XML and JS files? Do they also minify XML and JS files?
I feel minify XML and JS files and removal of all comments in both XML and JS, improves speed and privacy.
1
votes
2
answer
4.5k
Views
How to import google map in react project
I a using webpack and reactjs in my project and now I want to integrate google map api. First I added "react-google-maps": "^4.9.1" on my package.json file. Below is my component class.
import React, {PropTypes, Component} from 'react';
import { GoogleMap, Marker, SearchBox } from "react-google-maps...
0
votes
0
answer
4
Views
Bootstrap tooltip with popper not working via webpack
I'm trying to get Bootstrap 4.2.1, jQuery 3.3.1 and Popper.js 1.14.7 working via webpack 4.29.0.
My main.js:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/tooltip';
import '@fortawesome/fontawesome-free';
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
My webpack.config.js
var...