Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Importing from @github/catalyst generates errors with Webpack 5.24.0 #119

Closed
heynan0 opened this issue Feb 23, 2021 · 4 comments · Fixed by #120
Closed

Importing from @github/catalyst generates errors with Webpack 5.24.0 #119

heynan0 opened this issue Feb 23, 2021 · 4 comments · Fixed by #120
Assignees
@keithamus
Labels
bug Something isn't working

Comments

@heynan0
Copy link

heynan0 commented Feb 23, 2021

I created an npm project with webpack. After adding @github/catalyst and importing anything from it, webpack no longer works and produces the errors presented below.

My Environment

% node -v
v14.15.5

% npx webpack --version
webpack 5.24.0
webpack-cli 4.5.0

https://github.com/heynan0/using-catalyst

The Errors

% npx webpack
assets by status 789 bytes [cached] 1 asset
orphan modules 292 bytes [orphan] 1 module
./src/index.js   1 modules 547 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./node_modules/@github/catalyst/lib/index.js 1:0-45
Module not found: Error: Can't resolve './bind' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'bind.js'?
BREAKING CHANGE: The request './bind' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

ERROR in ./node_modules/@github/catalyst/lib/index.js 2:0-38
Module not found: Error: Can't resolve './register' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'register.js'?
BREAKING CHANGE: The request './register' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

ERROR in ./node_modules/@github/catalyst/lib/index.js 3:0-55
Module not found: Error: Can't resolve './findtarget' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'findtarget.js'?
BREAKING CHANGE: The request './findtarget' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

ERROR in ./node_modules/@github/catalyst/lib/index.js 4:0-43
Module not found: Error: Can't resolve './target' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'target.js'?
BREAKING CHANGE: The request './target' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

ERROR in ./node_modules/@github/catalyst/lib/index.js 5:0-42
Module not found: Error: Can't resolve './controller' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'controller.js'?
BREAKING CHANGE: The request './controller' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

ERROR in ./node_modules/@github/catalyst/lib/index.js 6:0-30
Module not found: Error: Can't resolve './attr' in '/Users/heynan0/github/using-catalyst/node_modules/@github/catalyst/lib'
Did you mean 'attr.js'?
BREAKING CHANGE: The request './attr' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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/index.js 1:0-43

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

webpack 5.24.0 compiled with 6 errors and 1 warning in 178 ms
@heynan0
Copy link
Author

heynan0 commented Feb 23, 2021 •
edited
Loading

It seems like webpack version 5 introduces this breaking change:

BREAKING CHANGE: The request './bind' failed to resolve only because it was resolved as fully specified
(probably because the origin is 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.

In order to fix the problem, we need to tell webpack the following:

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false
  }
}

But it seems that isn't recommended by their developers: webpack/webpack#12093 (comment)

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        },
      }
    ]
  }
}

@keithamus
Copy link
Member

Thanks for this issue. This looks to be a mistake with the way we import files. We should specify the extension in our import statements.

@keithamus keithamus self-assigned this Feb 23, 2021
@keithamus keithamus added the bug Something isn't working label Feb 23, 2021
@vmsp
Copy link
Contributor

vmsp commented Feb 24, 2021

It's seems like this is a know issue of the TypeScript compiler that hasn't (won't ?) be fixed microsoft/TypeScript#13422.

A workaround is to import all modules with import "something.js" in TypeScript.

@keithamus keithamus mentioned this issue Feb 25, 2021
Merged
@keithamus
Copy link
Member

This is fixed in v1.1.2. Thanks everyone 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@keithamus keithamus

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: use extensions for all non-type imports github/catalyst
3 participants
@keithamus @vmsp @heynan0