For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
dependabot[bot] on npm_and_yarn
chore(deps-dev): bump terser fr… (compare)
dependabot[bot] on npm_and_yarn
dependabot[bot] on npm_and_yarn
chore(deps-dev): bump terser fr… (compare)
dependabot[bot] on npm_and_yarn
dependabot[bot] on npm_and_yarn
I'm using module federation and promised based dynamic remotes (https://webpack.js.org/concepts/module-federation/#promise-based-dynamic-remotes). Everything is working as I'd like, except I'm seeing the output of my promise function in the build output. Is there any way to suppress that?
Here's partial webpack build output, after using the sample promised based dynamic remote in the docs.
remote app1/Component 6 bytes (remote) 6 bytes (share-init) [built] [code generated]
external "new Promise(resolve => {\n const urlParams = new URLSearchParams(window.location.search)\n const version = urlParams.get('app1VersionParam')\n
// This part depends on how you plan on hosting and versioning your federated modules\n const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js'\n
const script = document.createElement('script')\n script.src = remoteUrlWithVersion\n script.onload = () => {\n // the injected script has loaded and
is available on window\n // we can now resolve this Promise\n const proxy = {\n get: (request) => window.app1.get(request),\n
init: (arg) => {\n try {\n return window.app1.init(arg)\n } catch(e) {\n console.log('remote containe
r already initialized')\n }\n }\n }\n resolve(proxy)\n }\n // inject this script w
ith the src set to the versioned remoteEntry.js\n document.head.appendChild(script);\n })\n " 42 bytes [built] [code generated]
webpack 5.72.1 compiled with 1 warning in 23906 ms
Done in 27.52s.
getMockSenderEnhancer
had some problem.import React, {useState} from 'react';
import Uploady, {useItemProgressListener, useItemFinishListener} from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
import UploadButton from "@rpldy/upload-button";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";
const LogProgress = () => {
const [progress, setProgess] = useState(0);
const progressData = useItemProgressListener();
if (progressData && progressData.completed > progress) {
console.log(progressData);
setProgess(() => progressData.completed);
}
return null;
}
const mockSenderEnhancer = getMockSenderEnhancer({
delay: 1500
});
function CollectionUpload(props:any){
const nativeProps:any = { webkitdirectory: 'true' };
const customIsSuccess = (xhr:any) => [308, 418].includes(xhr.status);
return(
<div className="row">
<div className="row">
<Uploady isSuccessfulCall={customIsSuccess} destination={{url: "http://localhost:5000/upload"}} {...nativeProps} enhancer={mockSenderEnhancer}>
<UploadDropZone
className="collection-upload-field"
onDragOverClassName="drag-over"
htmlDirContentParams={{ recursive: true, withFullPath: true }}
>
<div className="upload-drop-zone">
<div className="upload-info">
<h5>Drag and drop or browse to choose your collection folder</h5>
<UploadButton text="Choose files..." className="voomio-btn btn-filled"/>
</div>
</div>
</UploadDropZone>
<LogProgress />
</Uploady>
</div>
</div>
)
}
export default CollectionUpload;
Hello. I get this error when trying to compile:
Conflict: Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and runtime)
Here's my config:
https://pb.vern.cc/?cf421f29efc46fb2#4ZpBAu9Ekquv8o9ceLn5we8t6Euw5NyCvYXXN4cjKZ8x
I need to know why this happens and how to fix it.
fullhash
in filename. However another problem has been found:Failed to compile.
Module not found: Error: You attempted to import /home/farooqkz/playground/chooj/node_modules/babel-preset-inferno-app/node_modules/@babel/runtime/helpers/esm/classCallCheck which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I think that has been solved, too. Now the problem is:
Failed to compile.
Error: [BABEL] /home/farooqkz/playground/chooj/src/index.js: Unknown option: .config. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
Is it related to webpack? or perhaps I must ask in babel community?
I have issue when use style-loader with experiments.lazyCompilation
index.jsx
import '/style/a.css'
import '/style/b.css'
npm script : webpack --mode development
Both styles are inserted on page (That OK)
(css, style) {
if(!window.prevStyle) {window.prevStyle = style}
else if(window.prevStyle === style) {
console.log('current style tag is same prev style tag!')
}
style.innerHTML = `${css}`
}
then I figure out that the style element created in style-loader for both .css files is same (notice that I use injectType: "style tag" not singletonStyleTag), And after I reloaded the page (after first lazy compile) both style worked right -> When I use experiments.lazyCompilation with import 2 styles or more, I must reload the page after first lazy compile to work rightHi all, I have a quick question on module federation I hope you can help with.
When are modules loaded? Is it done on server side when the makes a request to the site and the whole bundle is pulled down or is the "host" bundle received by the browser and then the modules are fetched? Just trying to determine how many round trips to the server are done.
Hi, hoping for some advice. I added a dependency (serialize-error
) to a Webpack 5 project, and the build now fails:
ERROR in serviceWorker.js from Terser plugin
Minimizer doesn't return result
It's proving complex to try and extract a minimal reproducible example, but I can work on that. In the meantime, can anyone recommend how I might diagnose this further? There's not much to be found by Googling the error. Is it possible to get the minimizer to emit error / logging information?
I'VE BEEN STUCK ON THE SAME PROBLEM FOR A WEEK PLEASE HELP ME
webpack.config.js
got its scriptType
changed from 'text/javascript' to 'module'. This appears to have broken web-workers using import.meta.url
as I now get Cannot use 'import.meta' outside a module
when trying to create a web worker using the recommended webpack 5 syntax... anyone have any idea?
export const worker = new Worker(new URL('./worker.ts', import.meta.url));
<-- this is how the webpack docs say to use workers, and this was working fine until my webpack config got changed as stated
Hey everyone. I'm getting a compilation error when I try to compile a file which exports modules using the syntax export * as someName
. I described the issue here: https://stackoverflow.com/questions/74717884/webpack-compilation-error-using-cypress-and-nx
Can someone please help me?
hidden-source-map
but i got http://localhost/bundle/form.debug.js:202367:17
(like if i dont use source map) instead of webpack-internal:///./src/main/tsx/components/filter.tsx:66:17
if use eval-*
(in this case eval-nosources-source-map
) in tsconfig sourcemap enabled, using ts-loader, webpack 5
Hi! Can't save generated images in folders relevant to they width with Webpack Imagemin plugin. Trying to generate images to different sizes and formats. Something like this:
<picture>
<source
media="(min-width: 576px)"
srcset="./src/img/slide.jpg?width=540"
type="image/jpg"
/>
<source
media="(min-width: 960px)"
srcset="./src/img/slide.jpg?width=900"
type="image/jpg"
/>
<source
media="(min-width: 576px)"
srcset="./src/img/slide.jpg?as=webp&width=540"
type="image/webp"
/>
<source
media="(min-width: 960px)"
srcset="./src/img/slide.jpg?as=webp&width=900"
type="image/webp"
/>
<img src=".src/img/slide.jpg" alt="slideer image" />
</picture>
Images should saved in folders relevant to they width. E.g:
I try to use filename option in plugin settings
const path = require("path");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.ts",
},
mode: "development",
output: {
filename: "js/[name].js",
path: path.resolve(__dirname, "dist"),
clean: true,
pathinfo: true,
},
module: {
rules: [
{
test: /\.html$/i,
use: "html-loader",
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: "asset/resource",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 10kb
},
},
// If i don't use this generator option, images saved in root (dist) folder -> dist/6gj86ddgt36jjy78.jpg
generator: {
filename: "example/[name]-[hash][ext]",
},
},
],
},
optimization: {
minimize: true,
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
// Using this option (with filename: in loader above) saves as -> dist/example/generated-slide-540-6gj86ddgt36jjy78.webp
// --- images/[width] is ignored and folder name comes from loader options
filename: "images/[width]/generated-[name]-[width][ext]",
implementation: ImageMinimizerPlugin.sharpMinify,
options: {
encodeOptions: {
// ....
},
},
},
generator: [
{
// Adding this option not worked too..
// ---
// filename: "images/[width]/generated-[name]-[width][ext]",
preset: "webp",
implementation: ImageMinimizerPlugin.sharpGenerate,
options: {
encodeOptions: {
webp: {
// ....
},
},
},
},
],
}),
],
},
};
What i am doing wrong?
P.S. I don't wont to use Imagemin plugin as Standalone loader because plugin docs
This is repository with my Angular frontend (part of full frontent with error) https://github.com/Alex-1557/ErrorModuleParseFailed
When I try to compile this Angular frontend I receive
./src/app/css/img/mini-logo.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile
Can somebody understand how to fix this issue? I have a couple advice, for example to add webpack.config.js (and other advice) but none of them is working.
How to define hours for this javascript player? Need help......
I want to specify an audio with 08:56:35 => 8 hrs, 56 mins and 34 seconds
The following lyrics has example for minutes, but not sure about hours or how to define.
Can someone help me on how to define for hours?
Javascript: https://github.com/lusaisai/Lyricer/blob/master/lyricer.js
Source: https://github.com/lusaisai/Lyricer
Example for minute: https://github.com/lusaisai/Lyricer/blob/master/index.html (03:54.84)
Javascript: https://guoyunhe.github.io/rabbit-lyrics/
Source: https://github.com/guoyunhe/rabbit-lyrics
Example for minute: [03:27.19]
Conceptual question here: does webpack interprets each module export as an atomic identity, isolated from other exports, or the module IS the atomic element?
I have this situation:
To webpack, this means that module A doesn't have deadcode, so it won't remove anything, but the question is: entry point nº1 will have the entire module A in its chunk and that's OK and expected, right?
esModules
) into webpack flow. I have managed to bundle all js in the folders and minify, but the global object declaration that the different files were calling seems to be now out of scope. I have looked into shimming but I am not sure if that is the right way to access this global variable for each file. (It is in plan to make the company move to esm eventually but legacy support should be maintained). Any help or article on the topic please.
I'm trying to add an SSL certificate to my web server. I did it the recommended way. I used a self-signed certificate AND I tried using a certificate from CloudFlare and Let's Encrypted. What happens is that my page doesn't load. I get an error saying that no data was returned. I'm using a webpack config file and I used the https property.
https: {
cert: fs.readFileSync('/etc/letsencrypt/live/mysite/fullchain.pem'),
key: fs.readFileSync('/etc/letsencrypt/live/mysite/privkey.pem')
}
The paths provided are what Let's Encrypt gave me. I start the server and try to connect and I get something like ERR_EMPTY_RESPONSE from Chrome.
I also tried using an origin certificate from Cloudflare. Same thing.
I made sure my server has the right ports open, that I'm using the right address. I have no clue what's wrong.
Any suggestions?
const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
module.exports = withNextra({
pageExtensions: ['jsx', 'js', 'md', 'mdx'],
generateEtags: false,
webpack: (config, options) => {
config.resolve.alias = {
...config.resolve.alias,
}
config.module.rules.push({
test: /.md$/,
use: 'raw-loader',
})
return config
},
env: {
customKey: 'value',
},
})
root ➜ /com.docker.devenvironments.code (main ✗) $ yarn run build
yarn run v1.22.19
$ node ./scripts/gen-rss.js && next build
info - Checking validity of types
warn - No ESLint configuration detected. Run next lint to begin setup
info - Creating an optimized production build
Failed to compile.
./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts%2Fpages&absolutePagePath=private-next-pages%2Fposts%2Fpages.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'
./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts%2Fpassion&absolutePagePath=private-next-pages%2Fposts%2Fpassion.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'
./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts&absolutePagePath=private-next-pages%2Fposts%2Findex.md!
Module not found: Can't resolve 'raw-loader' in '/com.docker.devenvironments.code'
./pages/index.mdx
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:387:5)
at validateString (node:internal/validators:121:11)
at Object.relative (node:path:1191:5)
at loader (file:///com.docker.devenvironments.code/node_modules/nextra/dist/loader.mjs:85:42)
./pages/photos.mdx
TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:387:5)
at validateString (node:internal/validators:121:11)
at Object.relative (node:path:1191:5)
at loader (file:///com.docker.devenvironments.code/node_modules/nextra/dist/loader.mjs:85:42)
webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Hello guys.
I am looking for a way to to easily refer HTML modules from within my index.html page. Is that possible using webpack?
For example,
I want to write in my index.html file the following,
<body>
<header/>
<banner/>
<services/>
<clients/>
<footer/>
</body>
where header, banner, services etc. are separate html files .
Is this possible to be done using webpack?
I ve looked at Html loader and Webpack Html plugin, but it does not seem I can use these to achieve what I want.
Can someone help?
import Table from "react-bootstrap/Table";
so webpack will be happy?