Webpack 5 support #103

kmalakoff · 2021-07-04T17:42:49Z

I've been using your boilerplate and tried upgrading the dependencies to the latest version. Thank you for your amazing work!

I got it to work with webpack 5...almost. Hot module reloading isn't working, but after trying all the fixes and workarounds I could find and it still not working, I'm wondering if you want to try to get it to work? It's so close!

To upgrade to webpack 5, I needed to rewrite dynamic-cdn-webpack-plugin and published it under a new module @effortlessmotion/dynamic-cdn-webpack-plugin until the author accepts the pull request.

…t-webpack-dev-server setup

- use react-refresh plugin and loader - user react-refresh only on client config, not dev wrapper builds - update dynamic cdn plugin to exclude react externalization for development - update devServer config to use "hot" mode and remove google-apps-script-webpack-dev-server "before" settings

also update webpack to latest version 4

…protection

enuchi · 2021-07-04T18:11:13Z

Thanks @kmalakoff, appreciate this. I've avoided updating to webpack 5 because of the dynamic-cdn-webpack-plugin issue and happy to see you've published a fork. That repo hasn't had activity in years so a bit doubtful it will get merged but curious to see.

I've made some changes to the way hot module reloading works, and it should be more straightforward/modern, just haven't merged in yet. Can you try applying the changes in your PR to my branch at fix/update-webpack-dev-server (see PR #98) and seeing if hot refresh works with the new setup and webpack 5?

enuchi · 2021-07-04T18:12:22Z

I believe I also had issues with html-webpack-inline-source-plugin when trying to upgrade webpack. Is that why you switched to the other inline plugin? It didn't look like it had as much support...

kmalakoff · 2021-07-04T18:41:27Z

Good question! Choosing html-inline-script-webpack-plugin was mainly a "process of elimination" to find a plugin compatible with webpack 5. If there's a more common one out there with webpack 5 support, we can swap it in.

html-webpack-inline-source-plugin doesn't support webpack 5 and hasn't been updated for 3 years:

This plugin is no longer maintained. Facebook provides a similar plugin: https://github.com/facebook/create-react-app/blob/edc671eeea6b7d26ac3f1eb2050e50f75cf9ad5d/packages/react-dev-utils/InlineChunkHtmlPlugin.js#L10

Unfortunately, InlineChunkHtmlPlugin hasn't been updated for 2 years and so also doesn't support webpack 5.

kdar · 2021-07-04T19:42:09Z

You can use https://github.com/KyLeoHC/inline-source-webpack-plugin with webpackv5.

kmalakoff · 2021-07-04T20:49:14Z

@kdar thank you for the tip.

Based on npm downloads, it looks like html-inline-script-webpack-plugin is more popular than inline-source-webpack-plugin.

Also, I tried out inline-source-webpack-plugin and it is expecting a non-standard signature to mark the replacement rather than a standard src attribute:

<script inline inline-asset="runtime\.\w+\.js$" inline-asset-delete></script>

I wasn't able to get it to work quickly either ;-P

…de.js)

kmalakoff · 2021-07-12T04:55:29Z

@enuchi I just realized that you requested me to try updating fix/update-webpack-dev-server (PR #98)

I tried it and I ran into the same issue with hot-update endpoints missing. See commit

Also, something weird happened that I tried to chase down, but couldn't figure it out. In the generated code.js file, there was incorrectly generated code:

    (() => {
        var exports = __webpack_exports__;
        exports.__esModule = !0, exports.setActiveSheet = exports.deleteSheet = exports.addSheet = exports.getSheetsData = exports.openAboutSidebar = exports.openDialogBootstrap = exports.openDialog = exports.onOpen = void 0;
        var ui_1 = __webpack_require__(1);
        exports.onOpen = ui_1.onOpen, exports.openDialog = ui_1.openDialog, exports.openDialogBootstrap = ui_1.openDialogBootstrap, 
        exports.openAboutSidebar = ui_1.openAboutSidebar;
        var sheets_1 = __webpack_require__(2);
        exports.getSheetsData = sheets_1.getSheetsData, exports.addSheet = sheets_1.addSheet, 
        exports.deleteSheet = sheets_1.deleteSheet, exports.setActiveSheet = sheets_1.sglobal.__esModule = exports.__esModule, 
        global.setActiveSheet = exports.setActiveSheet, global.onOpen = exports.onOpen, 
        global.openDialog = exports.openDialog, global.openDialogBootstrap = exports.openDialogBootstrap, 
        global.openAboutSidebar = exports.openAboutSidebar, global.getSheetsData = exports.getSheetsData, 
        global.addSheet = exports.addSheet, global.deleteSheet = exports.deleteSheet, etActiveSheet;
    })();

This had two invalid things: sheets_1.sglobal.__esModule and , etActiveSheet;. I'm not sure what caused the errors

enuchi · 2021-07-12T07:38:29Z

Hey @kmalakoff, think the server-side error is coming from changes to gas-webpack-plugin. I know @fossamagna made changes to that repo to support removing the "global" declarations but it doesn't seem to be working here. If I make the changes in this commit then the server-side works.

As for the hot refresh, it isn't even working outside of the Google spreadsheet. If you try running npm start and visit https://localhost:3000/dialog-demo-bootstrap-impl.html in the browser then you should be able to see hot refresh working. I don't know enough about the changes in webpack 5 and all the plugins you upgraded/swapped but something there is causing issues. Have you tried comparing the generated html files for clues?

kmalakoff · 2021-07-13T00:54:16Z

@enuchi I've spent quite a few hours mainly looking on the server side as the {chunk}.hot-update.js route seems to be missing (404) rather than looking at the generated html files. Is there something that you are seeing that makes the broken hot reloading seem to be client side?

enuchi · 2021-07-14T02:57:23Z

Okay @kmalakoff got this to work locally. Looks like there is some issue with html-inline-script-webpack-plugin that prevents hot refresh from working in development. Have not really investigated too much. Maybe icelam/html-inline-script-webpack-plugin#66? Or any idea why it would not work in development with this plugin?

See 8fd64ce. Can you try this change locally and see if hot refresh works for you?

enuchi · 2021-07-14T03:15:22Z

Or like this: 5b18bed

…bpack-inline-source-plugin

kmalakoff · 2021-07-15T07:07:25Z

Hey @enuchi. I wasn't able to get your fixes working so I went back to the drawing board and ported html-webpack-inline-source-plugin to webpack 5 @effortlessmotion/html-webpack-inline-source-plugin.

Here's a working version based on your fix/update-webpack-dev-server branch kmalakoff@dd7c1d4

I think it is should be super simple to merge in....just the webpack config and updated / new modules

kmalakoff · 2021-07-24T00:50:43Z

@enuchi I merged my changes into this branch based on your fix/update-webpack-dev-server branch. Hot reloading with webpack 5 works and I updated all the modules to the latest

Let me know if you prefer a different approach to any of this

enuchi · 2021-07-24T03:51:59Z

Hey @kmalakoff, thanks again for this work on upgrading to webpack 5. Have not forgotten about this. Would like to go in this order:

Add integration tests to make sure HMR works across different operating systems when merging new changes
Merge in improved react-refresh and typescript improvements
Merge in your work on upgrading to webpack 5 and updating packages

Currently working on the first one. Hang tight, and will comment here hopefully soon when I have updates! Thanks again.

kmalakoff · 2021-07-24T14:53:54Z

Thank you for explaining your plan. It sounds solid.

kmalakoff · 2021-07-24T17:24:52Z

Here’s how I added cross-platform testing using a free travisci account to one of the webpack plug-ins: https://github.com/kmalakoff/html-webpack-inline-source-plugin/blob/master/.travis.yml

darakeon · 2022-03-07T14:42:53Z

There is a vulnerability found because of a dependency of this library.

enuchi · 2022-04-04T03:37:54Z

Hi @kmalakoff, sorry it's taken a while to get back to this one. I finally got around to doing step 1 and 2. React-refresh and integration tests are now there. Any chance you are able to pull in the new changes? Also totally understand if you've moved on from this.

I am also happy to take a look and try to pull in all the change but may need to pull your work onto a new branch/PR so I can edit.

enuchi · 2022-06-20T05:44:57Z

Hi @kmalakoff, I've pulled in your changes here into a new PR, #131, with some additional minor changes. I know you did a lot of work on this last year and not sure if you're still following along, but anyway, thanks for adding webpack 5 support for dynamic-cdn-webpack-plugin and html-webpack-inline-source-plugin.

I've added integration tests to the repo with Github Actions that test the local development setup, and running them against a few versions of node and both mac/windows, so now have more confidence that the switch to webpack 5 works.

Will merge the other PR in a bit and close this one.

enuchi · 2022-06-20T05:45:37Z

@enuchi I just realized that you requested me to try updating fix/update-webpack-dev-server (PR #98)

I tried it and I ran into the same issue with hot-update endpoints missing. See commit

Also, something weird happened that I tried to chase down, but couldn't figure it out. In the generated code.js file, there was incorrectly generated code:

    (() => {
        var exports = __webpack_exports__;
        exports.__esModule = !0, exports.setActiveSheet = exports.deleteSheet = exports.addSheet = exports.getSheetsData = exports.openAboutSidebar = exports.openDialogBootstrap = exports.openDialog = exports.onOpen = void 0;
        var ui_1 = __webpack_require__(1);
        exports.onOpen = ui_1.onOpen, exports.openDialog = ui_1.openDialog, exports.openDialogBootstrap = ui_1.openDialogBootstrap, 
        exports.openAboutSidebar = ui_1.openAboutSidebar;
        var sheets_1 = __webpack_require__(2);
        exports.getSheetsData = sheets_1.getSheetsData, exports.addSheet = sheets_1.addSheet, 
        exports.deleteSheet = sheets_1.deleteSheet, exports.setActiveSheet = sheets_1.sglobal.__esModule = exports.__esModule, 
        global.setActiveSheet = exports.setActiveSheet, global.onOpen = exports.onOpen, 
        global.openDialog = exports.openDialog, global.openDialogBootstrap = exports.openDialogBootstrap, 
        global.openAboutSidebar = exports.openAboutSidebar, global.getSheetsData = exports.getSheetsData, 
        global.addSheet = exports.addSheet, global.deleteSheet = exports.deleteSheet, etActiveSheet;
    })();

This had two invalid things: sheets_1.sglobal.__esModule and , etActiveSheet;. I'm not sure what caused the errors

Looks like there were some issues with gas-webpack-plugin, and @fossamagna was able to publish a new version that fixed them (issue here).

enuchi · 2022-06-20T06:00:52Z

Closing -- #131 has been merged.

enuchi added 10 commits June 1, 2021 02:03

install new packages and remove google-apps-script-webpack-dev-server

16c8ca6

Update package-lock.json

1218f8a

update development config for gas-client with new gas-client settings

962c5e8

remove /gas/ path from dev setup so doesn't rely on google-apps-scrip…

bf7e7ac

…t-webpack-dev-server setup

update gas-client and gas-webpack-plugin

359fd29

also update webpack to latest version 4

use autoGlobalExportsFiles to remove 'global' server variable

0a2d224

use new typescript version of gas-client for autocompletion and type …

d32ba06

…protection

Update index.ts

0825a0c

update to try gas-client pr.2 (esm build)

3c83d16

Upgrading to webpack 5 (hot update not working and failed build of co…

f2e6892

…de.js)

Got hot module replacement on webpack5 with @effortlessmotion/html-we…

dd7c1d4

…bpack-inline-source-plugin

Updated modules including running eslint

785e6bc

kmalakoff force-pushed the master branch from 71ae1a6 to 785e6bc Compare July 24, 2021 00:45

Put back placeholder .clasp.json

a0c2824

enuchi mentioned this pull request Apr 4, 2022

build: fix eslint issues #124

Merged

enuchi mentioned this pull request Jun 20, 2022

Webpack 5 support with updated packages #131

Merged

enuchi closed this Jun 20, 2022

Webpack 5 support #103

Webpack 5 support #103

Uh oh!

Conversation

kmalakoff commented Jul 4, 2021

Uh oh!

enuchi commented Jul 4, 2021

Uh oh!

enuchi commented Jul 4, 2021

Uh oh!

kmalakoff commented Jul 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kdar commented Jul 4, 2021

Uh oh!

kmalakoff commented Jul 4, 2021

Uh oh!

kmalakoff commented Jul 12, 2021

Uh oh!

enuchi commented Jul 12, 2021

Uh oh!

kmalakoff commented Jul 13, 2021

Uh oh!

enuchi commented Jul 14, 2021

Uh oh!

enuchi commented Jul 14, 2021

Uh oh!

kmalakoff commented Jul 15, 2021

Uh oh!

kmalakoff commented Jul 24, 2021

Uh oh!

enuchi commented Jul 24, 2021

Uh oh!

kmalakoff commented Jul 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmalakoff commented Jul 24, 2021

Uh oh!

darakeon commented Mar 7, 2022

Uh oh!

enuchi commented Apr 4, 2022

Uh oh!

enuchi commented Jun 20, 2022

Uh oh!

enuchi commented Jun 20, 2022

Uh oh!

enuchi commented Jun 20, 2022

Uh oh!

Uh oh!

kmalakoff commented Jul 4, 2021 •

edited

Loading

kmalakoff commented Jul 24, 2021 •

edited

Loading