webpack/webpack

For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

Muhammad Kamal

@mkamalkayani

In module federation when a remote fails due to network failure, how can I provide a fallback? Currently the whole app crashes.

raphael10-collab

@raphael10-collab

Hi all! As described here: https://stackoverflow.com/questions/65788345/issue-when-calling-a-python-script-with-python-shell-from-main-ts-electron-app I'm trying to call and execute a simple python script located in /src/scripts/factorial from /src/main.ts : `import { PythonShell } from 'python-shell';

let options = {
pythonPath: '/home/marco/anaconda3/bin/python3',
pythonOptions: ['-u'], // het print results in real-time
scriptPath: path.join(__dirname, './scripts/factorial.py'),
args: parseInt(msg)
};

PythonShell.run('factorial.py', options, function (err) {
if (err) throw err;
console.log('finished');
}); ` I get this error:

What do I have to define in webpack and how to fix it?

Dimitri KOPRIWA

@kopax

I want to buy server in unit and a server cabinet for hosting docker services locally, what should I get ?

wrong chan

Artem Zakharchenko

@kettanaito

Hey! I'm writing a custom plugin. It establishes a watcher on a given folder.
How do I:

Add all the files in the folder to the build's dependencies? So whenever there's a change it triggers an incremental build.
Provide a JSON derived from the file structure globally to the bundle?

I'm using normalModuleFactory.hooks.parser hooks at the moment, but although it does creates a global variable and seems to listen to updates, the bundle never receives the next variable value unless I edit some of my app's code.

Artem Zakharchenko

@kettanaito

I'd love to read more materials on writing custom plugins. The guidelines in the webpack docs are good but extremely superficial.
Where can I learn about the parts of the compilation, all its hooks, how to affect the compiled code? When to affect it?

Googling this is frustrating, as it suggests existing plugins instead of resources on how to write one yourself.

Daniel van Mil

@danielvanmil

hello, is there a way to use bare module identifiers in an HTML entry point? Maybe by using the HtmlWebpackPlugin with a plugin?

HtmlWebpackTagsPlugin?

raphael10-collab

@raphael10-collab

As explained before I'm trying to understand how to call a python script from node.js, and, may be, webpack configuration is involved: Following the indications found here: https://www.tutorialspoint.com/run-python-script-from-node-js-using-child-process-spawn-method , I wrote this code:

const { spawn } = require('child_process');

let nb = parseInt(msg);

function runScript() {
return spawn ('python3', [
"-u",
path.join(__dirname, './scripts/factorial.py'),
nb,
]);
}

const subprocess = runScript();

subprocess.stdout.on('data', (data) => {
console.log(data:${data});
});

subprocess.stderr.on('data', (data) => {
console.log(error:${data});
});

subprocess.stderr.on('close', () => {
console.log("Closed");
});

I get this error:

error:python3: can't open file '/home/marco/webMatters/electronMatters
/PythonConnection/.webpack/main/scripts/factorial.py': [Errno 2] No
such file or directory

Closed

How to solve the problem? Looking forward to your kind help

raphael10-collab

@raphael10-collab

Following the indications found here: https://webpack.js.org/plugins/copy-webpack-plugin/#root I modified the /tools/webpack/webpack.plugins.js as :

 const CopyPlugin = require("copy-webpack-plugin");
module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  new webpack.ExternalsPlugin('commonjs', [
    'electron'
  ]),
  new CopyPlugin({
    patterns: [
      { from: "src/scripts/", to: ".webpack/main/script/" },
    ],
  }),
];

To me, it seems respecting the standard, but I get this long error message:

An unhandled error has occurred inside Forge:
compilation.getCache is not a function
TypeError: compilation.getCache is not a function
    at /home/marco/webMatters/electronMatters/PythonConnection/node_modules/copy-webpack-plugin/dist/index.js:459:33
    at SyncHook.eval (eval at create (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/HookCodeFactory.js:19:10),   <anonymous>:7:1)
at SyncHook.lazyCompileHook (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Compiler.js:630:30)
at /home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Compiler.js:662:28)
at /home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
at AsyncSeriesHook.lazyCompileHook (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Watching.js:41:32)
at /home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Compiler.js:529:11)
at new Watching (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Watching.js:30:17)
at Compiler.watch (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/webpack/lib/Compiler.js:244:10)
error Command failed with exit code 1.

What am I doing wrong?

redius

@specialWjy

it look like your webpack`s version is lower than your copy-webpack-plugin,try to update or demotion

raphael10-collab

@raphael10-collab

Hi @specialWjy . Thanks for helping. I upgraded webpack to the lastest available: webpack@5.16.0 , and downgraded copy-webpack-plugin to the version before the latest: copy-webpack-plugin@6.4.1 . But the problem persists. Did I write /tools/webpack/webpack.plugins.js correctly?

redius

@specialWjy

I has the same mistakes as you，i used copy-webpack-plugins version with 7.0.0.0 and webpack version is 4.16.4 at that time.when i downgraded copy-webpack-plugins version to
4.5.0, and code like this
new CopyWebpackPlugin([
{
from: path.resolve(dirname, '../src'),
to: path.resolve(dirname, '../dist')
}
]) this error was solved,i'm so sorry i can only help you a little

1 reply

raphael10-collab

@raphael10-collab

I tried to downgrade copy-webpack-plugin and webpack to those versions: now I have as devDependencies: "copy-webpack-plugin": "4.5.0", "webpack": "4.16.4" and in /tools/webpack/webpack.plugins.js :

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  new webpack.ExternalsPlugin('commonjs', [
    'electron'
  ]),

  new CopyPlugin({
    patterns: [
      { from: path.resolve(__dirname, "../../src/scripts/*"),
        to: path.resolve(__dirname, "../../.webpack/main/scripts") },
    ],
  })
];

But still get these error messages :

An unhandled error has occurred inside Forge:
[copy-webpack-plugin] patterns must be an array
Error: [copy-webpack-plugin] patterns must be an array
    at new CopyWebpackPlugin (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/copy-webpack-plugin/dist/index.js:22:15)
    at Object.<anonymous> (/home/marco/webMatters/electronMatters/PythonConnection/tools/webpack/webpack.plugins.js:26:3)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/marco/webMatters/electronMatters/PythonConnection/tools/webpack/webpack.renderer.js:3:17)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at WebpackConfigGenerator.resolveConfig (/home/marco/webMatters/electronMatters/PythonConnection/node_modules/@electron-forge/plugin- webpack/src/WebpackConfig.ts:42:14)

raphael10-collab

@raphael10-collab

Anyway.... thank you @specialWjy for trying to help me

jenwirth

@jenwirth

Hi, i have a very basic question on mini-css-extract-plugin. In the documentation is reads "it creates a CSS file per JS file which contains CSS". What does that mean? If i have one entry with two javascript files, each importing a separate css files, i still end up with a single main.js. Which i am fine with, but i don't understand that quoted line from the docs

raphael10-collab

@raphael10-collab

I reported the issue above in webpack's github page: webpack/webpack#12461 and in electron's github page: electron/electron#27390

raphael10-collab

@raphael10-collab

And also here: electron-userland/electron-forge#2135

Tristan

@trippel

Hi all,
I am struggling with the following:
I have thrown together a little plugin which creates a bunch of svg files from a json files. :

apply(compiler) {
        compiler.hooks.afterPlugins.tap('JSON2SVG', () => {
                // Create files
        });
        compiler.hooks.done.tap('JSON2SVG', () => {
            // Delete files
        });
    }

Furthermore I have defined a module.rules in my webpack.config with the hope that it would process the created svg files:

{
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-sprite-loader',
            },
          ],
        },

As you can imagine, that does not seem to work as intended and from what I can tell, the svg-sprite-loader never gets triggered. Could anyone push me in the right direction to achieve the result: Create SVGs -> svg-sprite-loader-magic -> remove SVGs? I would be glad. Thanks in advance.

Mukul Jain

@mukuljainx

Hello everyone, having a problem with splitting chunks, this is my current config

splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        patientVendor: {
          test: /[\\/]node_modules[\\/](!react-pdf)[\\/]/,
          name: 'patientVendor',
          chunks: 'all',
        },
        reactPDFVendor: {
          test: /[\\/]node_modules[\\/](react-pdf)[\\/]/,
          name: 'reactPDFChunk',
          chunks: 'all',
        },
      },
    },
  }

Expected:
different chunk for react-pdf
different chunk for every other module with the name patientVendor.[hash].js

Current:
different chunk for react-pdf
different chunk for every other module with the name [hash].js

Can someone point out the mistake it has 2 hours since my struggling with this... Thankyou

itsmenabil

@itsmenabil

@itsmenabil
hey guys, im new to this, can anyone please help me solve this code so i can join codewars
function multiply(a , b){
a * b
}

redius

@specialWjy

i konw this problem,if you use cpoy-webpack-plugin@6.5.0,you must write code as: const CopyWebpackPlugin = require("copy-webpack-plugin") and try use like: new CopyWebpackPlugin([])

Gowrisankar

@gowrisankarvoltuswave

hi guys.. I have an problem with vue files... after bundlig i am getting this error "Cannot read property 'toLowerCase' of undefined"

Can anyone help on this..

I am Using webpack 4 along with vue ^2.2.6

Tom

@TomDGW2

Hey fellas!
Anyone know if it's possible with webpack to process several JS files as entry files, and also reference them from HTML files that get handled with html-loader, by having it inject the correct filenames with hash to wherever an existing <script src=""> tag referencing the original souce files, already exists? I've not been able to solve this for 3 days now.

4 replies

Artem Zakharchenko

@kettanaito

Please, how to create a custom plugin that behaves as webpack.DefinePlugin but can re-initialize global variables?
I have a watcher over fs, watcher produces JSON. Whenever there's a new/deleted file, I need to update the global variable exposed via DefinePlugin.
:pray:

Jason Pickens

@steinybot

Does anyone know what the definition is for the elements in the sources array in a source map? The Closure compiler seems to do something sane and just has normal looking file paths. I can’t understand what webpack does. It puts these weird webpack:// URLs. What are they? Why does it use that? How is it that browsers seem to understand it?

Lucas

@lucasferreiralimax

Hi everyone, good night.

I don't understand, I make a rule css loader with localIdentName: [name]-[local]--[hash:base64:5]

But in pug/HTML don't get this class name generator

I need other plugin in rule of pug/HTML?

What is? I read the docs webpack but not find about this

Lucas

@lucasferreiralimax

Thanks for help

Marcus

@marcusds

Hi, any idea why in Webpack 5 chunks from splitChunks.cacheGroups seem be named by output.filename, not output.chunkFilename? Here is the relevant code:

        output: {
            filename: '[name].test.js',
            path: __dirname, 
            publicPath: '/resources/',
            chunkFilename: '[chunkhash].chunk.js'
        },
        splitChunks: {
                chunks: 'async',
                minSize: 20000,
                minRemainingSize: 0,
                maxSize: 0,
                minChunks: 1,
                maxAsyncRequests: 30,
                maxInitialRequests: 30,
                enforceSizeThreshold: 50000,
                cacheGroups: {
                    defaultVendors: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        reuseExistingChunk: true
                    },
                    default: {
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }

Anything coming out of splitchunks.cacheGroup.defaultVendors is being named something.test.js, not [chunkhash].chunk.js.

Thanks!

Dev_NIX

@devnix

Hello, I've spend hours trying to get rid of this when compiling (using Symfony Encore):

 error  in ./assets/legacy.js

Syntax Error: Error: Must export a default export when using ES6 modules.
    at Array.map (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at Generator.next (<anonymous>)
    at buildRootChain.next (<anonymous>)

I'm trying to add various formats polyfills, and it seems like the uncommented line is the offending one:

    .configureBabel(function(config) {
        config.presets.push('stage-3');
        // config.plugins.push('@babel/plugin-transform-runtime');
        // config.plugins.push('@babel/plugin-proposal-class-properties');
        // config.plugins.push('@babel/plugin-transform-object-assign');
        config.plugins.push('@formatjs/intl-getcanonicallocales/polyfill');
        // config.plugins.push('@formatjs/intl-datetimeformat/polyfill');
        // config.plugins.push('@formatjs/intl-datetimeformat/add-all-tz');
        // config.plugins.push('@formatjs/intl-locale/polyfill');
        config.plugins.push('react-intl');
    })

Do you have any thoughts?

Where communities thrive

People

Repo info

Activity