webpack-boilerplate does not compile

Question

webpack-boilerplate does not compile

vinzenz-muser opened this issue a year ago · comments

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.

Eric · Answer 1 · Mon May 29 2023 19:30:06 GMT+0800 (China Standard Time)

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 · Answer 2 · Fri Jun 09 2023 15:53:44 GMT+0800 (China Standard Time)

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.

Eric · Answer 3 · Fri Jun 09 2023 20:04:34 GMT+0800 (China Standard Time)

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.

Ondřej Misák · Answer 4 · Mon Jul 17 2023 22:47:30 GMT+0800 (China Standard Time)

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 · Answer 5 · Sun Jul 30 2023 21:26:36 GMT+0800 (China Standard Time)

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 · Answer 6 · Sat Sep 16 2023 15:46:52 GMT+0800 (China Standard Time)

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.

Eric · Answer 7 · Mon Mar 11 2024 00:19:15 GMT+0800 (China Standard Time)

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 · Answer 8 · Sun Mar 24 2024 21:52:35 GMT+0800 (China Standard Time)

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'
  ]
}

Eric · Answer 9 · Sun Mar 24 2024 22:41:46 GMT+0800 (China Standard Time)

@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 · Answer 10 · Sun Mar 24 2024 23:46:04 GMT+0800 (China Standard Time)

@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

Eric · Answer 11 · Mon Mar 25 2024 00:27:58 GMT+0800 (China Standard Time)

@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 · Answer 12 · Mon Mar 25 2024 17:01:28 GMT+0800 (China Standard Time)

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).

Eric · Answer 13 · Wed Mar 27 2024 18:43:16 GMT+0800 (China Standard Time)

@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.

Eric · Answer 14 · Wed Mar 27 2024 21:55:38 GMT+0800 (China Standard Time)

c7d303a
Thanks. Hope it works now.