Questions tagged [webpack]

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)....
abhishek-kdm
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...
Stephen
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...
oxxi
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...
Andrew Lukjanov
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.
Nahush Farkande
-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...
Pep
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...
Luis Aguilar
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...
Héctor León
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...
LeeR
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...
Tamb
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...
lakerskill
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.)
Ed Lynch
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...
Gurebu Bokofu
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: '...
Alexander Loginov
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...
Caleb Jay
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...
rubentd
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:
Kallol Pratim
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...
JNotelddim
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...
songololo
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...
Robin
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": "...
mysterious-bob
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 '@...
John
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 =...
ludacris3399
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...
Scott Clark
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...
John Slegers
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...
Roman Domoratskii
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...
RandomStranger
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...
tobik
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...
Mathias
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...
John Kulp
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'...
Sainath S.R
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...
Jonathan de M.
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...
TIJ
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...
Oskar
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.
fisher
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...
Zhao Yi
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...
meilon

View additional questions