Update VirtualModulesPlugin from upstream #136

syvb · 2020-09-19T23:09:30Z

tl;dr: Webpack 5 support, fixes TypeError: Cannot read property 'data' of undefined

This updates the internal VirtualModulesPlugin, which is copied from webpack-virtual-modules, which was originally added by @kaisermann. These changes allow for using Webpack 5 with svelte-loader. The changes of #125, which have also been fixed upstream, have been preserved. See #59 (comment) for the background on why the source code is just copied over instead of added as a dependency. Due to the svelte-loader specific changes already in virtual.js, I have manually gone through the commit history of webpack-virtual-modules and applied relevant changes instead of just copy-pasting the new source code. There is also a small change to index.js to prevent the error handling code from itself throwing errors, since that was causing some (now fixed) troubles when debugging my changes.

This also adds in the literal text of the license of webpack-virtual-modules, to a newly created LICENSE file, since "The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software".

Tests and lints pass, and I have verified this works with both Webpack 4 and Webpack 5

[continuation from #132, since GH won't let me re-open it]

Closes #133

This updates the internal VirtualModulesPlugin, which is copied from https://github.com/sysgears/webpack-virtual-modules. I went through all commits since this virtual.js was added, and applied them manually to the svelte-loader version where applicable. These upstream changes allow for using Webpack 5 with svelte-loader. This also adds a LICENSE file to comply with the requirements of the MIT license for the plugin files. The LICENSE file also adds in the text of MIT license that svelte-loader is licensed under (with a different copyright line, since svelte-loader wasn't written by SysGears)

lib/virtual.js

index.js

lib/virtual.js

syvb · 2020-10-12T23:03:39Z

@benmccann I've changed all uses of double quotes to single quotes.

lib/virtual.js

benmccann

lgtm

larixer · 2020-10-15T17:14:09Z

@Smittyvb You might probably need to check whether you affected by this Issue:
sysgears/webpack-virtual-modules#68
and related PR:
sysgears/webpack-virtual-modules#69

Integrates the changes from: sysgears/webpack-virtual-modules#69

syvb · 2020-10-21T18:02:34Z

I've implemented sysgears/webpack-virtual-modules@4894019 from upstream, which implements watch mode support in a way that is compatible with Webpack 5. So to recap:

Currently: no watch mode support
Fix component css reloading on any change #133 (superseded by this PR): Webpack 4 watch mode support
This PR: Webpack 4+5 watch mode support

lib/virtual.js

Replaces all usage of var with let/const

lib/virtual.js

larixer · 2020-10-27T21:01:12Z

@Smittyvb Guys, if you are up to it, I would be open to PR to expose some interface inside webpack-virtual-modules to make it easier for you to consume it directly inside svelte-loader, it might make future upgrades easier. Please consider this as an option now or in the future.

syvb · 2020-10-27T21:02:55Z

@larixer I'm working on that: https://github.com/Smittyvb/svelte-loader/tree/wvm-as-dep

benmccann · 2020-10-27T21:20:05Z

That would be great and I think would help get this PR checked in. I talked to some of the other maintainers about getting this PR checked in since I don't have much webpack background and haven't worked on this repo much, and I think there was some feeling that they'd like to see webpack 5 support be a bit cleaner/simpler. I'm not sure exactly how you would do that, but if there's a nice interface for webpack-virtual-modules to support this that sounds like it could help

jquense · 2020-10-30T15:21:49Z

@larixer would also love to see something like that. I've forked the plugin a few times in order to allow bootstrapping in a loader.

if you are looking for ideas on an interface i've found this effective: https://github.com/4Catalyzer/astroturf/blob/v1/src/VirtualModulePlugin.ts#L99-L108

lindenquan · 2020-11-07T02:44:18Z

lib/virtual.js

+function getData(storage, key) {
+	const data = storage._data /* webpack 5 */ || storage.data /* webpack 4 */;
+	if (data instanceof Map) {
+		return storage.data.get(key);


This should be data.get(key)

deleonio

Code advices

deleonio · 2020-11-11T03:48:12Z

lib/virtual.js

+	return data.data[key];
+}
+
+function setData(backendOrStorage, key, valueFactory) {


This implementation is not nice. Better looks like getData, a webpack switch and a generic code

fix: optimize the implementation

deleonio · 2020-11-11T18:41:39Z

Oh sorry - I will fix the bug - if I can,

deleonio · 2020-11-11T19:27:17Z

Hello @Smittyvb, I fixed it. Please merge it again syvb#3

fix: 'backendOrStorage' is not defined no-undef

antonlyap · 2020-11-17T12:08:47Z

Hello everyone, it looks like there is something wrong with style handling on this branch when svelte-preprocess is enabled. I get errors like this for all of my components which have styles:

Module not found: Error: Can't resolve '/path-to-my-app/src/components/Header/index.svelte.css' in '/path-to-my-app/src/components/Header'

The directory structure for the Header component (and all others) is as follows:

Header
  - index.scss
  - index.svelte

And the style is connected to the component like this: <style type="text/scss" src="index.scss"></style>.

Here is my Webpack configuration:

{
  entry, // custom generated list of entry points
  mode: 'production',
  output: {
    path: path.join(projectRoot, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    alias: {
      svelte: path.resolve(projectRoot, 'node_modules', 'svelte'),
    },
    extensions: ['.mjs', '.js', '.svelte', '.css'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },
  module: {
    rules: [
      { test: /.m?js$/, type: 'javascript/auto' },
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            hotReload: false,
            hydratable: true,
            preprocess: sveltePreprocess(), // imported from 'svelte-preprocess'
            dev: false,
            emitCss: true,
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
}

What fixes the error:

using the latest version from npm or the master branch from this repo and downgrading to Webpack 4
removing the preprocess option and converting the styles into CSS

What doesn't fix the error:

converting the styles into CSS
switching between Webpack v4 and v5

deleonio · 2020-11-28T14:12:14Z

I think the changed files have nothing to do with CSS. The misconduct with regard to webpack 5 and preprocess is a separate topic.

It would be cool if the PR comes so that Webpack5 can work in less complex situations.

deleonio · 2020-12-27T16:58:22Z

That is solved for us leanupjs/leanup#37.

syvb · 2021-01-11T21:18:03Z

Superseded by #146, which fixes the problem in a much better and more maintainable manner.

Before this licence was in the package.json but it wasn't actually in the repo. sveltejs#136 would have added a license but now sveltejs#146 is the future, and that PR clears up the license issue by not including webpack-virtual-modules in-repo, so it doesn't have to affect the LICENSE file.

syvb mentioned this pull request Sep 19, 2020

Support Webpack 5 by updating VirtualModulesPlugin from upstream #132

Closed

syvb mentioned this pull request Oct 8, 2020

Fix component css reloading on any change #133

Closed

benmccann linked an issue Oct 11, 2020 that may be closed by this pull request

Webpack 5. Error: TypeError: TypeError: Cannot read property 'data' of undefined #139

Closed

syvb mentioned this pull request Oct 11, 2020

Webpack 5. Error: TypeError: TypeError: Cannot read property 'data' of undefined #139

Closed

benmccann mentioned this pull request Oct 12, 2020

Live Reload Not Working On Webpack Branch sveltejs/sapper#764

Closed

benmccann reviewed Oct 12, 2020

View reviewed changes

lib/virtual.js Outdated Show resolved Hide resolved

index.js Outdated Show resolved Hide resolved

lib/virtual.js Show resolved Hide resolved

Use single quotes

8b5ac4f

benmccann reviewed Oct 13, 2020

View reviewed changes

lib/virtual.js Outdated Show resolved Hide resolved

benmccann approved these changes Oct 13, 2020

View reviewed changes

Use double quotes when needed to avoid escapes

6c50e32

Integrate Webpack 5 watch mode from upstream

d1dc851

Integrates the changes from: sysgears/webpack-virtual-modules#69

benmccann reviewed Oct 21, 2020

View reviewed changes

lib/virtual.js Outdated Show resolved Hide resolved

Get rid of all usage of var

0ef2ded

Replaces all usage of var with let/const

benmccann reviewed Oct 21, 2020

View reviewed changes

lib/virtual.js Outdated Show resolved Hide resolved

benmccann reviewed Oct 21, 2020

View reviewed changes

lib/virtual.js Show resolved Hide resolved

benmccann reviewed Oct 21, 2020

View reviewed changes

lib/virtual.js Outdated Show resolved Hide resolved

syvb added 2 commits October 27, 2020 16:55

Code improvements

327bb22

extract function for creating VirtualStats

1794d51

lindenquan reviewed Nov 7, 2020

View reviewed changes

deleonio mentioned this pull request Nov 10, 2020

Proof svelte error with webpack 5 leanupjs/leanup#37

Closed

deleonio reviewed Nov 11, 2020

View reviewed changes

fix: optimize the implementation

0794b95

deleonio mentioned this pull request Nov 11, 2020

fix: optimize the implementation syvb/svelte-loader#1

Merged

Merge pull request #1 from martinoppitz/help/update-virtual-modules

1993448

fix: optimize the implementation

fix: 'backendOrStorage' is not defined no-undef

ac1304c

Merge pull request #3 from martinoppitz/help/update-virtual-modules

1d50ad9

fix: 'backendOrStorage' is not defined no-undef

This was referenced Dec 4, 2020

webpack 5 support vuetifyjs/vuetify-loader#136

Closed

Webpack5 does not build anymore aurelia/aurelia#982

Closed

Webpack 5 support aurelia/webpack-plugin#166

Closed

Add webpack 5 support vuetifyjs/vuetify-loader#160

Closed

syvb mentioned this pull request Jan 11, 2021

Make it work with Webpack 5, use webpack-virtual-modules as a dependency #146

Closed

syvb closed this Jan 11, 2021

syvb mentioned this pull request Jan 11, 2021

Explicitly licence under MIT #148

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update VirtualModulesPlugin from upstream #136

Update VirtualModulesPlugin from upstream #136

syvb commented Sep 19, 2020 •

edited by benmccann

syvb commented Oct 12, 2020

benmccann left a comment

larixer commented Oct 15, 2020

syvb commented Oct 21, 2020

larixer commented Oct 27, 2020

syvb commented Oct 27, 2020 •

edited

benmccann commented Oct 27, 2020

jquense commented Oct 30, 2020

lindenquan Nov 7, 2020

deleonio left a comment

deleonio Nov 11, 2020

deleonio commented Nov 11, 2020

deleonio commented Nov 11, 2020

antonlyap commented Nov 17, 2020

deleonio commented Nov 28, 2020

deleonio commented Dec 27, 2020

syvb commented Jan 11, 2021

Update VirtualModulesPlugin from upstream #136

Update VirtualModulesPlugin from upstream #136

Conversation

syvb commented Sep 19, 2020 • edited by benmccann

syvb commented Oct 12, 2020

benmccann left a comment

Choose a reason for hiding this comment

larixer commented Oct 15, 2020

syvb commented Oct 21, 2020

larixer commented Oct 27, 2020

syvb commented Oct 27, 2020 • edited

benmccann commented Oct 27, 2020

jquense commented Oct 30, 2020

lindenquan Nov 7, 2020

Choose a reason for hiding this comment

deleonio left a comment

Choose a reason for hiding this comment

deleonio Nov 11, 2020

Choose a reason for hiding this comment

deleonio commented Nov 11, 2020

deleonio commented Nov 11, 2020

antonlyap commented Nov 17, 2020

deleonio commented Nov 28, 2020

deleonio commented Dec 27, 2020

syvb commented Jan 11, 2021

syvb commented Sep 19, 2020 •

edited by benmccann

syvb commented Oct 27, 2020 •

edited