feat: add support for webpack5 #403

mayako21126 · 2020-05-23T05:50:59Z

What kind of change does this PR introduce? (bugfix, feature, docs update, improvement)
feature
What is the current behavior? (You can also link to an open issue here)
it doesn't work with Webpack5
What is the new behavior (if this is a feature change)?
Make it compatible with Webpack5
Does this PR introduce a breaking change?
no
Please check if the PR fulfills contributing guidelines
ok

but some Webpack5 changes caused the test to be error
for example “MultiEntryPlugin”

mayako21126 · 2020-05-23T12:13:56Z

i think it due to nodejs version conflict

eslint 7.0 need 12.0.0 but .travis is 8.10.0

fix: webpack5 support style: clean style: package.json feat: webpack-5 devDependencies update fix: conflict of nodejs version fix: eslint fix: eslint nvm fix: eslint bug eslint/eslint#13352 feat: package update

rohrlaf · 2020-06-22T05:49:51Z

.travis.yml

@@ -2,7 +2,7 @@ sudo: false
 language: node_js

 node_js:
- - 8.10.0
+ - 12.0.0


Why not using the latest stable LTS version instead?

Suggested change

- 12.0.0

- 12.18.1

https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V12.md

update 00f4fc2

rohrlaf · 2020-06-22T05:50:56Z

.travis.yml

@@ -13,7 +13,8 @@ env:
    - ISTANBUL_COVERAGE: yes

 script:
- - yarn bootstrap --env webpack-4
+ - nvm install 8.10.0


Is it necessary to use a deprecated version and support of highly outdated webpack versions?

Suggested change

- nvm install 8.10.0

- nvm install 8.17.0

sghoweri · 2020-06-26T02:07:36Z

Looking forward to seeing this get in!

rohrlaf · 2020-07-10T08:27:32Z

@kisenka Is there a plan to merge this PR for upcoming webpack 5 support?

sghoweri · 2020-07-30T14:10:52Z

@kisenka Is there a plan to merge this PR for upcoming webpack 5 support?

+1 -- this is the last Webpack library we're using (at least that I'm aware of 🤞 ) that still needs to get updated before we can upgrade to Webpack 5. 👀

MIreland · 2020-07-30T14:14:32Z

Likewise- we've been eagerly awaiting this update!

sghoweri · 2020-08-20T18:06:38Z

Sorry to bug but any updates on this? What work is left that's preventing this from getting merged down...?!

ivannovazzi · 2020-09-01T12:40:43Z

@kisenka can this be at least released in a beta release? It's the only loader remained preventing us from upgrading to webpack 5.

christophstockinger · 2020-09-20T13:48:48Z

Great work! I can only recommend the merge, because it solves the problem with Webpack5 compatibility.

Workaround tip, as long as the PR is not merged: Fork the repository of @mayako21126 and create a private NPM package here in Github.

That way I bridge the time when you can work with the package here again.

ivannovazzi · 2020-09-21T10:26:29Z

Webpack 5 officially reaches the release candidate: https://github.com/webpack/webpack/releases/tag/v5.0.0-rc.0

@kisenka It would be nice this PR gets merged

matthewma7 · 2020-09-22T16:57:57Z

This worked for me. Looking forward to a release version.

matthewma7 · 2020-10-12T16:50:38Z

This branch has worked great for me with webpack 5.
Webpack 5 is released two days ago.
Would there be an effort to merge this?

Krasnopir · 2020-10-16T16:54:16Z

merge please.

rohrlaf · 2020-10-19T13:11:19Z

Great work! I can only recommend the merge, because it solves the problem with Webpack5 compatibility.

Workaround tip, as long as the PR is not merged: Fork the repository of @mayako21126 and create a private NPM package here in Github.

That way I bridge the time when you can work with the package here again.

@christophstockinger @mayako21126 I tried to fork the repo with the changes from this PR. Unfortunately, the webpack-5 environment does not start and therefore I can not release a private package. The guide in CONTRIBUTING.md is a little rough. How did you manage to get this to work?

bootstrap

# git clone # from https://github.com/mayako21126/svg-sprite-loader
# git checkout add-support-webpack5

$ sh scripts/build.sh 

#...

Running node v12.18.1 (npm v6.14.5)
yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
warning [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.0.0,^11.0.0,^12.0.0,>=14.0.0". Got "12.18.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
webpack-5 env installed

Update: [email protected] breaks compatibility with Node 12 LTS, 5.3.7 was released as a fix.

release

$ yarn release

$ node scripts/build-runtime.js
/.../svg-sprite-loader/scripts/build-examples-dll.js:32
      throw new Error(msgs.join('\n'));
      ^

Error: BUILD EXAMPLES ERRORS
Module not found: Error: Can't resolve 'svg-sprite-loader' in '/.../svg-sprite-loader/examples/browser-sprite-with-dll'

shameleo · 2020-10-21T09:04:36Z

@rohrlaf, I don't know what "private package on Github" means, and how to make it, so this is what I did. It may be a bit incorrect or suboptimal, but worked for me.
So I:

made a fork
npm run build:runtime to get *.build.js files in runtime directory
corrected version in package.json to "version": "4.99.99", to avoid any conflicts with official versions
pushed this files to repo
url to repo in package.json:

"svg-sprite-loader": "git+http://[your_host]/svg-sprite-loader-fork.git#[commit_hash]",

Note, my git server uses http.
Maybe that will be ok for you.

bojanvidanovic · 2020-11-02T15:24:59Z

Can this be merged?

rohrlaf · 2020-11-06T08:51:26Z

@rohrlaf, I don't know what "private package on Github" means, and how to make it, so this is what I did. It may be a bit incorrect or suboptimal, but worked for me.

@shameleo Thanks for your help, I tried to make it work but still not running for me. Replaced svg-sprite-loader with the patch from @mayako21126, but the react-styleguidist will not work.

With "private package" I meant publishing it on a private registry, as we can not alter svg-sprite-loader on the NPM registry.

$ git clone [email protected]:mayako21126/svg-sprite-loader.git
$ git checkout add-support-webpack5
$ npm/yarn install
$ npm run/yarn build:runtime

# change name to "@myorg/svg-sprite-loader" and "publishConfig" in package.json

$ npm login # login into the private registry
$ npm/yarn publish

Build error

Nevertheless, for the node_modules install your HTTP approach or the package publishing should not make a difference. I still can not make the build work, although doing the same steps to generate the runtime files.

With patch by @mayako21126:

(node:16489) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

With current [email protected]:

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:82:11)
    at BulkUpdateDecorator.update (myproject/node_modules/webpack/lib/util/createHash.js:49:14)
    at NormalModule.updateHash (myproject/node_modules/webpack/lib/NormalModule.js:1042:8)
    at Compilation.createModuleHashes (myproject/node_modules/webpack/lib/Compilation.js:2599:12)
    at myproject/node_modules/webpack/lib/Compilation.js:1952:11
    at Hook.eval [as callAsync] (eval at create (myproject/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (myproject/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at myproject/node_modules/webpack/lib/Compilation.js:1914:36
    at Hook.eval [as callAsync] (eval at create (myproject/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (myproject/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.seal (myproject/node_modules/webpack/lib/Compilation.js:1905:27)
    at myproject/node_modules/webpack/lib/Compiler.js:981:20
    at myproject/node_modules/webpack/lib/Compilation.js:1724:4
    at eval (eval at create (myproject/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:48:1)
    at myproject/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:332:11
    at myproject/node_modules/neo-async/async.js:2830:7
error Command failed with exit code 1.

Eli-Black-Work · 2020-11-06T09:14:10Z

It looks like there's a #365 pull request that's also supposed to fix this library on Webpack 5. Not sure which pull request is better 🙂

Eli-Black-Work · 2020-11-06T09:15:22Z

@Slashgear, Sorry to bother you, but are you still a maintainer for this repository?

rohrlaf · 2020-11-06T09:33:19Z

It looks like there's a #365 pull request that's also supposed to fix this library on Webpack 5. Not sure which pull request is better slightly_smiling_face

@Bosch-Eli-Black thanks for pointing this out. #365 is based on [email protected], whereas this PR is based on [email protected]. Nevertheless, both versions cause the same deprecation warning and never finish the build for me: DeprecationWarning: Compilation.assets

Eli-Black-Work · 2020-11-06T09:42:28Z

It looks like there's a #365 pull request that's also supposed to fix this library on Webpack 5. Not sure which pull request is better slightly_smiling_face

@Bosch-Eli-Black thanks for pointing this out. #365 is based on [email protected], whereas this PR is based on [email protected]. Nevertheless, both versions cause the same deprecation warning and never finish the build for me: DeprecationWarning: Compilation.assets

Ah, cool; I hadn't noticed that difference.

Are you sure the build is hung and isn't just still running? I know I've seen some people reporting that upgrading to Webpack 5 increased their projects' initial build times. Just curious what might happen if you left the build running for, say, 15 minutes XD

mayako21126 · 2020-11-06T10:18:04Z

Great work! I can only recommend the merge, because it solves the problem with Webpack5 compatibility.
Workaround tip, as long as the PR is not merged: Fork the repository of @mayako21126 and create a private NPM package here in Github.
That way I bridge the time when you can work with the package here again.

@christophstockinger @mayako21126 I tried to fork the repo with the changes from this PR. Unfortunately, the webpack-5 environment does not start and therefore I can not release a private package. The guide in CONTRIBUTING.md is a little rough. How did you manage to get this to work?

bootstrap
# git clone # from https://github.com/mayako21126/svg-sprite-loader
# git checkout add-support-webpack5

$ sh scripts/build.sh 

#...

Running node v12.18.1 (npm v6.14.5)
yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
warning [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.0.0,^11.0.0,^12.0.0,>=14.0.0". Got "12.18.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
webpack-5 env installed
Update: [email protected] breaks compatibility with Node 12 LTS, 5.3.7 was released as a fix.

release
$ yarn release

$ node scripts/build-runtime.js
/.../svg-sprite-loader/scripts/build-examples-dll.js:32
      throw new Error(msgs.join('\n'));
      ^

Error: BUILD EXAMPLES ERRORS
Module not found: Error: Can't resolve 'svg-sprite-loader' in '/.../svg-sprite-loader/examples/browser-sprite-with-dll'

do you installed nvm?
I solved nodejs version conflict with it

mayako21126 · 2020-11-06T10:25:12Z

now work with 5.0.0-rc.6

rohrlaf · 2020-11-11T14:30:10Z

@mayako21126 @Bosch-Eli-Black, @KingSora and I found the culprit. As we were trying to publish the forked patches for svg-sprite-loader we published the packages in our private registry with @orgname/. As it seems, either Webpack or this loader has problems with scoped package names, but also the Webpack build was not throwing any errors. Now that we use the package without the @orgname/ scope, things run smoothly 😅

jods4 · 2020-11-11T19:21:52Z

If this PR is good, I'd love to see it merged and released.
We'd like to move to Webpack 5 here (because of module federation), but this plugin is a blocker.

Venryx · 2020-11-14T07:56:03Z

Now that we use the package without the @orgname/ scope, things run smoothly 😅

What is the full package name for that fork, which works with Webpack 5? (I'd like to use it, until the official svg-sprite-loader package is updated with the fix)

rohrlaf · 2020-11-16T08:30:43Z

Now that we use the package without the @orgname/ scope, things run smoothly sweat_smile

What is the full package name for that fork, which works with Webpack 5? (I'd like to use it, until the official svg-sprite-loader package is updated with the fix)

Sorry to disappoint, my company policies did not allow me to publish an open source package. We only have it available from our private registry.

How I did it:

apply changes from Add webpack 5 support #365 to latest version 5.0.0 of this loader (only need this loader to be compatible with Webpack 5, so this is shorter than feat: add support for webpack5 #403)
npm build:runtime
rename loader name in package.json to (prefix)-svg-sprite-loader (as @scope/` does not work)
npm login to the registry for upload
npm publish to release this package

ScriptedAlchemy · 2020-11-20T22:17:19Z

Webpack Maintainer here 👋 can we get some official movement or merges on this project? If dead then i can fork it and maintain a copy. But there needs to be some update since users seem to have patched the problems it had

ValorLin · 2020-11-26T03:27:53Z

Webpack Maintainer here 👋 can we get some official movement or merges on this project? If dead then i can fork it and maintain a copy. But there needs to be some update since users seem to have patched the problems it had

Can't wait to see it.

sghoweri · 2020-11-27T22:14:13Z

Webpack Maintainer here 👋 can we get some official movement or merges on this project? If dead then i can fork it and maintain a copy. But there needs to be some update since users seem to have patched the problems it had

@ScriptedAlchemy considering the last commit to master was over 6 months ago and (as far as I can tell) there hasn't been any signs of movement on getting this OK'd and merged, I'm starting to think forking might be our only option here 🙁

d3x42 · 2020-11-28T16:41:13Z

Hey, folks!

Unfortunately, the maintainer of this project passed away.

Currently, I need some time to get into and check pull requests. I'll start with this PR next week.

sghoweri · 2020-11-28T17:30:06Z

@d3x42 Damn. I am so, so sorry to hear that - my sincere condolences. 😞

Take all the time you need (and really appreciate you letting us know).

Eli-Black-Work · 2020-11-30T01:29:06Z

That's really sad to hear 😟 @kisenka seemed like a nice guy, on the occasions that I had to talk to him.

zhongzhong0505 · 2020-12-01T03:44:34Z

Looking forward to seeing this get in!

ghost · 2020-12-04T20:57:00Z

I beg of you, just merge this PR already, it's been like half a year.
We have entire projects that can't update to webpack 5 just because of this one loader.

ghost · 2020-12-04T21:18:18Z

Thank you, very appreciated.

matthewma7 · 2020-12-04T22:48:31Z

Thank you for merging this but it looks like the CI is stuck and I guess we won't get a release until it passes?

d3x42 · 2020-12-04T23:37:33Z

@matthewma7 Yes, build already queued.

SevenOutman · 2020-12-05T09:02:02Z

@kisenka Please review and publish a release with this feature.

ghost · 2020-12-05T09:10:38Z

@SevenOutman the guy is dead, bro. He's not going to publish anything. Read the message history above.

SevenOutman · 2020-12-05T09:29:56Z

@shakhbulatgaz sorry to hear that :(

d3x42 · 2020-12-05T09:52:23Z

Currently, I didn't have access to publish it in npm, so I'll try to find someone who could grant it. After that, I'll publish the release.

Venryx · 2020-12-05T15:37:04Z

If the maintainer of an npm package is deceased, NPM support can help transfer ownership to a new maintainer. I saw this happen recently with the firebase-mock package: soumak77/firebase-mock#160

In this case, it may be easier (eg. less of a waiting delay) since the package repo was hosted under an organization, rather than an individual's Github account.

d3x42 · 2020-12-07T09:11:08Z

5.1.1 published

ogonkov · 2020-12-07T21:09:52Z

Great job, but plugin have dependency from incompatible version of html-webpack-plugin. I guess 6.x version should be published instead, with dependencies update.

svg-sprite-loader/package.json

Line 38 in d5ddfef

"html-webpack-plugin": "^3.2.0",

boomyao · 2020-12-08T02:31:34Z

when i upgrade to v5.1.1, this error still exist. @d3x42 @rohrlaf

(node:55321) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined
    at Hash.update (internal/crypto/hash.js:58:11)
    at BulkUpdateDecorator.update (/Users/qiliu/gaoding/delarue/node_modules/webpack/lib/util/createHash.js:49:14)
    at NormalModule.updateHash (/Users/qiliu/gaoding/delarue/node_modules/webpack/lib/NormalModule.js:1048:8)
    at Compilation.createModuleHashes (/Users/qiliu/gaoding/delarue/node_modules/webpack/lib/Compilation.js:2619:12)
    at hooks.optimizeChunkModules.callAsync.err (/Users/qiliu/gaoding/delarue/node_modules/webpack/lib/Compilation.js:1957:11)
    at Hook.eval [as callAsync] (eval at create (/Users/qiliu/gaoding/delarue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/qiliu/gaoding/delarue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at hooks.optimizeTree.callAsync.err (/Users/qiliu/gaoding/delarue/node_modules/webpack/lib/Compilation.js:1917:36)
    at _err0 (eval at create (/Users/qiliu/gaoding/delarue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at handleCompilationDonePromise.then (/Users/qiliu/gaoding/delarue/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:237:53)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:55321) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:55321) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

d3x42 · 2020-12-08T08:24:56Z

@ogonkov Fell free to add PR with updates

mayako21126 · 2020-12-10T10:05:01Z

Great job, but plugin have dependency from incompatible version of html-webpack-plugin. I guess 6.x version should be published instead, with dependencies update.

svg-sprite-loader/package.json

Line 38 in d5ddfef

"html-webpack-plugin": "^3.2.0",

#422

mayako21126 marked this pull request as ready for review May 23, 2020 05:51

mayako21126 force-pushed the add-support-webpack5 branch from 850fce6 to f9fdb66 Compare May 23, 2020 13:05

feat: add support for webpack5

b34b2b2

fix: webpack5 support style: clean style: package.json feat: webpack-5 devDependencies update fix: conflict of nodejs version fix: eslint fix: eslint nvm fix: eslint bug eslint/eslint#13352 feat: package update

mayako21126 force-pushed the add-support-webpack5 branch from f9fdb66 to b34b2b2 Compare May 29, 2020 06:27

mayako21126 mentioned this pull request May 29, 2020

Cannot find module 'webpack/lib/RuleSet' #359

Closed

rohrlaf reviewed Jun 22, 2020

View reviewed changes

KaelWD mentioned this pull request Jun 26, 2020

webpack 5 support vuetifyjs/vuetify-loader#136

Closed

feat: nodejs update

00f4fc2

DiFuks mentioned this pull request Oct 16, 2020

Fails with webpack 5: Cannot find module 'webpack/lib/RuleSet' #413

Closed

d3x42 merged commit e620de0 into JetBrains:master Dec 4, 2020

mayako21126 mentioned this pull request Dec 10, 2020

Update dependency #422

Merged

mayako21126 mentioned this pull request Dec 12, 2020

fix: conflict of nodejs version #404

Closed

netconomy-stephan-dum mentioned this pull request Feb 24, 2021

Add webpack 5 support #365

Closed

feat: add support for webpack5 #403

feat: add support for webpack5 #403

Conversation

mayako21126 commented May 23, 2020

mayako21126 commented May 23, 2020

rohrlaf Jun 22, 2020

Choose a reason for hiding this comment

mayako21126 Jun 28, 2020

Choose a reason for hiding this comment

rohrlaf Jun 22, 2020

Choose a reason for hiding this comment

sghoweri commented Jun 26, 2020

rohrlaf commented Jul 10, 2020

sghoweri commented Jul 30, 2020

MIreland commented Jul 30, 2020

sghoweri commented Aug 20, 2020

ivannovazzi commented Sep 1, 2020

christophstockinger commented Sep 20, 2020

ivannovazzi commented Sep 21, 2020 • edited Loading

matthewma7 commented Sep 22, 2020

matthewma7 commented Oct 12, 2020

Krasnopir commented Oct 16, 2020

rohrlaf commented Oct 19, 2020 • edited Loading

bootstrap

release

shameleo commented Oct 21, 2020

bojanvidanovic commented Nov 2, 2020

rohrlaf commented Nov 6, 2020 • edited Loading

Build error

Eli-Black-Work commented Nov 6, 2020

Eli-Black-Work commented Nov 6, 2020

rohrlaf commented Nov 6, 2020 • edited Loading

Eli-Black-Work commented Nov 6, 2020 • edited Loading

mayako21126 commented Nov 6, 2020

bootstrap

release

mayako21126 commented Nov 6, 2020

rohrlaf commented Nov 11, 2020 • edited Loading

jods4 commented Nov 11, 2020

Venryx commented Nov 14, 2020 • edited Loading

rohrlaf commented Nov 16, 2020 • edited Loading

ScriptedAlchemy commented Nov 20, 2020

ValorLin commented Nov 26, 2020

sghoweri commented Nov 27, 2020

d3x42 commented Nov 28, 2020

sghoweri commented Nov 28, 2020

Eli-Black-Work commented Nov 30, 2020

zhongzhong0505 commented Dec 1, 2020

ghost commented Dec 4, 2020

ghost commented Dec 4, 2020

matthewma7 commented Dec 4, 2020

d3x42 commented Dec 4, 2020

SevenOutman commented Dec 5, 2020

ghost commented Dec 5, 2020

SevenOutman commented Dec 5, 2020

d3x42 commented Dec 5, 2020

Venryx commented Dec 5, 2020

d3x42 commented Dec 7, 2020

ogonkov commented Dec 7, 2020 • edited Loading

boomyao commented Dec 8, 2020 • edited Loading

d3x42 commented Dec 8, 2020

mayako21126 commented Dec 10, 2020

ivannovazzi commented Sep 21, 2020 •

edited

Loading

rohrlaf commented Oct 19, 2020 •

edited

Loading

rohrlaf commented Nov 6, 2020 •

edited

Loading

rohrlaf commented Nov 6, 2020 •

edited

Loading

Eli-Black-Work commented Nov 6, 2020 •

edited

Loading

rohrlaf commented Nov 11, 2020 •

edited

Loading

Venryx commented Nov 14, 2020 •

edited

Loading

rohrlaf commented Nov 16, 2020 •

edited

Loading

ogonkov commented Dec 7, 2020 •

edited

Loading

boomyao commented Dec 8, 2020 •

edited

Loading