Failure to import using webpack 5.65.0

[mythral]

Hey there,

I've started a new project using the new create-react-app 5, which updates create-react-app to use webpack 5. This appears to cause some issues when trying to build a project using chessground.

The full error is replicated below.

It looks like they made a breaking change that requires imports to explicitly specify the file extension. I'm not exactly sure how the build chain works here, but I'll look into it in the next few days and probably submit a pull request if I can isolate the issue.

Failed to compile.

Module not found: Error: Can't resolve './api' in 'REDACTED/node_modules/chessground'
Did you mean 'api.js'?
BREAKING CHANGE: The request './api' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
asset static/js/bundle.js 1.51 MiB [emitted] (name: main) 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 1.38 MiB [cached] 104 modules
runtime modules 28.3 KiB 14 modules
javascript modules 20.7 KiB
  ./src/App.tsx 2.01 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 16.9 KiB [built] [code generated]
  ./node_modules/chessground/chessground.js 1.71 KiB [built] [code generated]

WARNING in src/App.tsx
  Line 6:7:  'ground' is assigned a value but never used  @typescript-eslint/no-unused-vars

ERROR in ./node_modules/chessground/chessground.js 1:0-30
Module not found: Error: Can't resolve './api' in 'REDACTED/node_modules/chessground'
Did you mean 'api.js'?
BREAKING CHANGE: The request './api' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 2:0-37
Module not found: Error: Can't resolve './config' in 'REDACTED/node_modules/chessground'
Did you mean 'config.js'?
BREAKING CHANGE: The request './config' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 3:0-35
Module not found: Error: Can't resolve './state' in 'REDACTED/node_modules/chessground'
Did you mean 'state.js'?
BREAKING CHANGE: The request './state' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 4:0-36
Module not found: Error: Can't resolve './wrap' in 'REDACTED/node_modules/chessground'
Did you mean 'wrap.js'?
BREAKING CHANGE: The request './wrap' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 5:0-35
Module not found: Error: Can't resolve './events' in 'REDACTED/node_modules/chessground'
Did you mean 'events.js'?
BREAKING CHANGE: The request './events' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 6:0-63
Module not found: Error: Can't resolve './render' in 'REDACTED/node_modules/chessground'
Did you mean 'render.js'?
BREAKING CHANGE: The request './render' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 7:0-29
Module not found: Error: Can't resolve './svg' in 'REDACTED/node_modules/chessground'
Did you mean 'svg.js'?
BREAKING CHANGE: The request './svg' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

ERROR in ./node_modules/chessground/chessground.js 8:0-31
Module not found: Error: Can't resolve './util' in 'REDACTED/node_modules/chessground'
Did you mean 'util.js'?
BREAKING CHANGE: The request './util' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.tsx 5:0-42 10:17-28
 @ ./src/index.tsx 7:0-24 10:33-36

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 8 errors and 1 warning in 2313 ms
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

[glonky]

Seeing the same error using Webpack with Storybook

[niklasf]

Presumably fixed via #215.

[mythral]

Presumably fixed via #215.

Yep, this fixes it thanks. @niklasf Would it be possible to get a v8.1.8 version bump for this? It would be ideal to not have to reference this specific/commit or master.

[niklasf]

Published. Thanks for patch!

[pnodet]

Hi @niklasf !

This issue should have been fixed by #215 however one file was omitted.

error - Error [ERR_MODULE_NOT_FOUND]:
Cannot find module './chesspecker/node_modules/chessground/util'
imported from ./chesspecker/node_modules/chessground/autoPieces.js

#219 fixes it but wasn't included in version 8.2.0

Would it be possible to get a new bump in order to allow webpack 5 to compile correctly? Thanks!

[chrisjuchem]

@niklasf Do you have an ETA for this?

[niklasf]

Sorry, forgot about this. Published v8.2.1.