webpack/webpack

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

Alexander Akait

@alexander-akait

you don't need event/callback

Kabue Charles

@McKabue

no i haven't, will try that... thanks

John Marinelli

@johnmarinelli

@McKabue do you know why your chunk is not loading?

Kabue Charles

@McKabue

yes, i know why. my chunk is not loading because i re-bundled the modules again and uploaded them to the server. meanwhile, a user was already on the webapp, but when they want to navigate to another page that requires a dynamically loaded chunk, the chunk name is not there because chunk name has changed

Alexander Akait

@alexander-akait

There are a lot of problems, for example network, problem in minimizer, etc, need reproducible test repo

John Marinelli

@johnmarinelli

@McKabue what you're trying to do is not really possible nor recommended. once your chunks are uploaded to the server, that's what the user is going to get. look into chunk manifests

Iwan Aucamp

@aucampia

John Marinelli

@johnmarinelli

@McKabue https://webpack.js.org/concepts/manifest/#root so, when you upload your new bundles, you also need to make sure the webpack manifest is updated and uploaded as well

Rob

@rm-rf-etc

This documentation page doesn't say how to disable HMR: https://webpack.js.org/concepts/hot-module-replacement/

I guess it's on this page. https://webpack.js.org/guides/hot-module-replacement/
I put hot: false on devServer but I'm still getting an error about sockjs

Kabue Charles

@McKabue

@johnmarinelli maybe i was not clear in my description. The thing is, there are several times when a chunk will not be found, like when there is no network, or the server is down, or the chunk that was meant to be loaded dynamically has been deleted at the server, or the chunk that was meant to be loaded dynamically has been replaced by another update/build from a security update to the code.

The last two cases will occur if the client/user was already in the browser, but they attempt to go the page that requires the chunk that is no longer there... so, boom... the chunk cant be loaded... now, i needed to catch that error that the chunk cant be loaded, which i figured out, see https://stackoverflow.com/a/57860730/3563013

Alexander Akait

@alexander-akait

@rm-rf-etc what error you got?

Rob

@rm-rf-etc

@evilebottnawi was something like file:sockjs not found. Running devserver with electron. Got it working now.

Alexander Akait

@alexander-akait

@rm-rf-etc feel free to open new issue with reproducible test repo, we have sockPath, sockPort and etc option when you use non standard structure

Rob

@rm-rf-etc

Stuck on a different problem now. My webpack project builds but my output doesn't have any exports

Different project. Not electron

Alexander Akait

@alexander-akait

Target web doesn't output exports

You should use other target

Rob

@rm-rf-etc

target: es6? es2015?

I thought es modules all worked out of the box... https://webpack.js.org/guides/getting-started/
https://medium.com/justfrontendthings/using-webpack-4-a-really-quick-start-under-4-minutes-61ff3fa9a2c8

Rob

@rm-rf-etc

Found what I need I think https://webpack.js.org/guides/author-libraries/

John Marinelli

@johnmarinelli

@McKabue ah, i see now. sorry, misread your question

Alastair Porter

@alastair

hi there, I have a question about using webpack/create-react-app and using babel to compile jsx files inside dependencies in my node_modules

I understand that the issue I'm encountering is facebook/create-react-app#5100

I think that I can run react-scripts eject to generate the configuration files, and then modify the webpack config file to tell it to include these dependencies. does that sound right?

ah, looking through some comments it seems like an alternative would be to compile the assets before adding the dependency. This makes sense from the point of view of a package installed from the npm repos, but in our case this is an additional component of our project that's in a github repo

is there a way to trigger a build step during install? (I guess this is more of an npm/node question than webpack)

Alexander Akait

@alexander-akait

I think better open issue in CRA

Alastair Porter

@alastair

it looks like it's something that they know about, and it seems like it'll be supported in a future version

Iwan Aucamp

@aucampia

should webpack hot module replacement with inline set be relaoding things in browser?

Alexander Akait

@alexander-akait

don't use inline

it is deprecated

Rob

@rm-rf-etc

Could somebody take a look at my webpack setup for me and see if you can tell why I'm not getting exports? Testing in nodejs, I assumed webpack would generate the appropriate commonjs exports. This package is intended for the browser but should work in node too. https://github.com/rm-rf-etc/weir/tree/wip

Latest thing I tried was adding libraryTarget: 'umd', because the docs says, "To make the library compatible with other environments, add libraryTarget property to the config. This will add various options about how the library can be exposed."

https://webpack.js.org/guides/author-libraries/

Rob

@rm-rf-etc

uhhhhhggg... markdalgleish/static-site-generator-webpack-plugin#130

output: {
  // ...
  globalObject: "this"
}

Sultan Ahmad

@Sultand2k

David

@dcyou

Hi, Someone know the proper way to use YAML files ? As I know, the "yaml-frontmatter-loader" is note as DEPRECATED. Use the raw-loader then js-yaml package ? There is a package js-yaml-loader but this is not a official one.

Alexander Akait

@alexander-akait

What is problem using raw-loader?

David

@dcyou

@evilebottnawi I don't say there is a problem by using this package if I am use this loader I have also to use the js-yamlpackage and I am asking what is the proper way to load YAMLfiles

Alexander Akait

@alexander-akait

using raw-loader

and you can do with yarm what you need in future

also webpack@5 will have built-in raw-loader - no dependencies

David

@dcyou

@evilebottnawi so if I understand well,

module.exports = {
  module: {
    rules: [
      {
        test: /\.ya?ml$/,
        use: 'raw-loader',
      },
    ],
  },
};"

then in my code I use the js-yaml package to do mu stuff, example const yaml = require('js-yaml'); ...
`

Alexander Akait

@alexander-akait

yes

If you need something specific you can create own loader, we can't support all loader for all edge cases

David

@dcyou

yes I know thank you for help

David

@dcyou

@evilebottnawi thank you again it works in my project, if it can help for implementation: https://github.com/dcyou/resume

Alexander Akait

@alexander-akait

:+1:

Where communities thrive

People

Repo info

Activity