Chapter 3: Establishing the Development Workflow

[jelster]

Chapter 3 Errata and known issues are discussed in the thread below. Please note that as the development process progressed, incremental improvements were sometimes made to different areas of the application that may not always be noted in the text. The develop branch of the source repository will always reflect the next version currently in development; main reflects what is currently released to production.

Getting errors with webpack?

• (generic) Try updating your npm/node installation
• See this comment by @sean-reed that highlights some important breaking changes in webpack-dev-server that happened after the code was committed and the chapter written

[sean-reed]

Hi!
I noticed some typesetting issues in the code examples. For example, in the webpack.common.js given on page 46, there appears << instead of " and an extraneous ) appearing after index.js. Also the line "const appDirectory = __dirname;" from page 45 moves inside the module.exports definition on page 46, not sure if that's intentional? On page 45 we have "module.exports = env => { return", then the "env" part disappears on page 46 (and in the Github repo the "return" statement is gone too). I'm new to webpack so I don't understand everything I'm doing here, but it did get me a little confused.

[sean-reed]

From page 52:

Add this to the file (index.js) below the part where we created the canvas element

Back on page 44, we create an empty index.js but I can't find any mention of this file again until the above. I went to the ch3 branch in the GitHub repository and copied over the code with the canvas element.

Reaching page 54, I get errors running npm run start regarding loaders for the textures like the one below:
ERROR in ./assets/textures/rockn.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

After trying various things and referring back to the Github repository (ch3 branch), I noticed that the scripts configuration in package.json was different to the book. E.g. the book (page 43) has start: npx webpack serve --mode development compared to on Github where it is npx webpack serve --config webpack.dev.js. Are the chapter branches in the Github repository supposed to correspond to the book or are they updated over time with fixes/improvements?

Making this change led to a different error:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'publicPath'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

After some googling I found that this was due to backwards incompatible changes for the config file in version 4 of webpack-dev-server compared to version 3. I see in package.json of the Github repository that version 3.11.2 is used but the current version that gets installed right now is 4.11.1. I eventually managed to get it working by changing the devServer part of the webpack.dev.js file from this:

 devServer:  {
        contentBase: path.resolve(appDirectory, "public"),
        compress: true,
        hot: true,
        open: true,
        publicPath: "/"
    }

to this:

devServer:  {
        static: 
        {
            directory: path.resolve(appDirectory, "public"),
        },
        devMiddleware: {
            publicPath: "/"
        },
        compress: true,
        hot: true,
        open: true,
    }

Now it works and is hopefully configured correctly, on to the fun stuff!

[jelster]

Hi @sean-reed - Yes, this is the perfect place to post issues like this! Thank you again for doing so and for your diligence and patience!

I'm really glad you were able to get things working, much as I'm less-than-happy that you had to do that work in the first place. The transition between WebPack 3 and 4 was right around the time when the chapter was being reviewed, and while subsequent chapters have the correct configuration, this chapter seems to be a bit of a transitional mess.

To help future readers, I'm in contact with the publisher to see about making corrections to the text, but in addition to that, do you think that a "Errata" or "known issues" post on this chapter's board (or somewhere else?) would be helpful?

[sean-reed]

Hi @jelster - I think it was great that this chapter was included, it was very useful to get orientated in setting up the dev environment, despite these small issues (and I ended up learning more from fixing the issues even if it was not what you intended!). I think the issues I mentioned above are the only ones in the chapter and this is where I came looking to see if anyone else had them, so not sure a separate Errata post is needed unless a lot of discussion ends up here and it gets lost. One idea would be to add a wiki section to the repository with a markdown page containing the Errata of the whole book, with sections for each chapter, then anyone could contribute to it.

[jelster]

Setting up the Wiki is a Great idea @sean-reed! I'm currently traveling and my time is limited but I'll try to get that enabled in the near future 👍

[jelster]

Hi @sean-reed - I've created the initial Wiki, now just to start populating it with content!

[ajw1970]

I must have something going on with my development environment.

I'm stuck at the Common Webpack Config section of chapter 3 in the Kindle version of the book. I'm getting this error even when running a commit from your chapter 3 branch:

29 http fetch GET 200 https://registry.npmjs.org/webpack-config 915ms (cache revalidated)
30 timing command:exec Completed in 925ms
31 verbose stack Error: could not determine executable to run
31 verbose stack at getBinFromManifest (C:\Program Files\nodejs\node_modules\npm\node_modules\libnpmexec\lib\get-bin-from-manifest.js:17:23)
31 verbose stack at exec (C:\Program Files\nodejs\node_modules\npm\node_modules\libnpmexec\lib\index.js:115:15)
31 verbose stack at async module.exports (C:\Program Files\nodejs\node_modules\npm\lib\cli.js:66:5)

I'm new to webpack and green with node/npm.

[ajw1970]

Looks like updating node and npm resolved these errors in case that's helpful to any others.

[jelster]

Glad to hear that resolved your issue. Generally, doing a node/npm update feels like the equivalent of turning a device off and on again 😄

[jelster]

With the release of Babylon.js v6.0, I've opened a few issues to track some of the more tricky upgrades.

#155
#156
#157

Some upgrades that have potential for problems are:

• WebPack CLI changed from v4 to v5
• WebPack dev server minor version update

I'll be opened a PR soon to get this merged to develop, then I'll probably start a v1.1 release branch