webpack-boilerplate does not compile

[vinzenz-muser]

yarn webpack-boilerplate leads to the error [webpack-cli] Error: Cannot find module 'Phaser'. Changing 'Phaser' to 'phaser' (lower-case) in the import of src/boilerplates/webpack-boilerplate/src/game.ts and in test: require.resolve('Phaser') in src/boilerplates/webpack-boilerplate/webpack.config.js fixes it. I don't know if I'm the only one with this issue, if not I can create a pull request if necessary.

[digitsensitive]

Hello @vinzenz-muser I could not reproduce your error. While checking I updated the yarn.lock file of the webpack-boilerplate example and updated the repository. With a high probability this is not causing your problem.

Can you try to fetch the newest version of the repository and then delete the node_modules folder and the yarn.lock file in the webpack-boilerplate and run the yarn webpack-boilerplate again? Let me know if that helps.

[vinzenz-muser]

Sorry for my late response, I did not see that you replied.

I just cloned the repo again from scratch and tried it and got the same error. I saw that issue #146 covers the same and it was fixed by #212 but in this merge only the games were fixed and not the boilerplates.

[digitsensitive]

No problem. Strange, I am still not able to reproduce the error

[webpack-cli] Error: Cannot find module 'Phaser'

Changing Phaser to phaser does not have any effect for me, both versions work. I currently do not know what the problem is and will have a look at this later again in more depth.

[misaon]

Same problem:

$ webpack --mode development && webpack serve --mode development
[webpack-cli] Failed to load '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'Phaser'
Require stack:
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at Object.<anonymous> (/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js:17:23)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at WebpackCLI.tryRequireThenImport (/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js:204:22) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js'
  ]
}
error Command failed with exit code 2.

[vinzenz-muser]

Same problem:

$ webpack --mode development && webpack serve --mode development
[webpack-cli] Failed to load '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'Phaser'
Require stack:
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js
- /home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at Object.<anonymous> (/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js:17:23)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at WebpackCLI.tryRequireThenImport (/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js:204:22) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/webpack.config.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js',
    '/home/misaon/Projects/ballIn/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js'
  ]
}
error Command failed with exit code 2.

Yep, as I mentioned, the fix is very simple: Change "Phaser" to "phaser" (lower case) and it should work.

[Frunit]

This smells like @digitsensitive uses Windows, while @vinzenz-muser uses Linux. Windows does not distinguish small and capital letters, while Linux does (or rather, NTFS does not, but ext3 does). I'd suggest to change "Phaser" to "phaser". In general, automatic build scripts using Github Actions or similar might help to find such problems, since you can automatically build in all sorts of environments.

[digitsensitive]

I have updated the webpack-boilerplate. @vinzenz-muser and @misaon: Can you try to fetch the newest version of the repository and then delete the node_modules folder and the yarn.lock file in the webpack-boilerplate and run the yarn webpack-boilerplate again? Let me know if that helps.

[LoopControl]

I have updated the webpack-boilerplate. @vinzenz-muser and @misaon: Can you try to fetch the newest version of the repository and then delete the node_modules folder and the yarn.lock file in the webpack-boilerplate and run the yarn webpack-boilerplate again? Let me know if that helps.

Just did a git clone and tried this (twice) on Ubuntu Linux, node v18 and got same error:

yarn run v1.22.19
$ cd src/boilerplates/webpack-boilerplate && yarn && yarn run serve-dev
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ webpack --mode development && webpack serve --mode development
[webpack-cli] Failed to load '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/webpack.config.ts' config
[webpack-cli] Error: Cannot find module 'Phaser'
Require stack:
- /home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/webpack.config.ts
- /home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js
- /home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js
- /home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js
- /home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.resolve (node:internal/modules/helpers:188:19)
    at Object.<anonymous> (/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/webpack.config.ts:38:23)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module.m._compile (/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Object.require.extensions.<computed> [as .ts] (/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1013:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/webpack.config.ts',
    '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/webpack-cli.js',
    '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/lib/bootstrap.js',
    '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack-cli/bin/cli.js',
    '/home/loop/node/phaser3-typescript/src/boilerplates/webpack-boilerplate/node_modules/webpack/bin/webpack.js'
  ]
}

[digitsensitive]

@LoopControl What happens if you remove these lines in the webpack.config.ts?

{
   test: require.resolve('Phaser'),
   loader: 'expose-loader',
   options: { exposes: { globalName: 'Phaser', override: true } }
}

I think, since I am importing Phaser directly in the code, it should be available within the bundle without needing to expose it globally.

[LoopControl]

@LoopControl What happens if you remove these lines in the webpack.config.ts?

{
   test: require.resolve('Phaser'),
   loader: 'expose-loader',
   options: { exposes: { globalName: 'Phaser', override: true } }
}

I think, since I am importing Phaser directly in the code, it should be available within the bundle without needing to expose it globally.

Yep that fixed it, thanks!

webpack 5.90.3 compiled successfully in 2148 ms
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/

Edit: Looks like the issue persists in the included samples though (same fix works for these):

yarn run cellular-automaton
yarn run v1.22.19
$ cd src/experimental/cellular-automaton && yarn && yarn run serve-dev
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/home/loop/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ webpack --mode development && webpack serve --mode development
[webpack-cli] Failed to load '/home/loop/node/phaser3-typescript/src/experimental/cellular-automaton/webpack.config.ts' config
[webpack-cli] Error: Cannot find module 'Phaser'
Require stack:
- /home/loop/node/phaser3-typescript/src/experimental/cellular-automaton/webpack.config.ts
- /home/loop/node/phaser3-typescript/src/experimental/cellular-automaton/node_modules/webpack-cli/lib/webpack-cli.js

[digitsensitive]

@LoopControl Thanks for the quick reply! Yes, I will have to make a Pull Request to fix this in all examples. Will do and close this Issue then :-)

[vinzenz-muser]

Probably you could also just change it to lower case instead of removing the lines.

@Frunit s response sounds reasonable, Windows is not case sensitive while Linux is (at least in this case).

[digitsensitive]

@vinzenz-muser Yes, @Frunit is right, I guess. We could also change it to lower case. But since the whole code lines are not needed, I believe it is a better option to remove the lines.

[digitsensitive]

https://github.com/digitsensitive/phaser3-typescript/commit/c7d303ad59127442655a56f0c428e4f3c039f621 Thanks. Hope it works now.