fix: Use fully qualified module names

[jeremyckahn]

This PR fixes an issue that manifests in projects that use newer versions of Webpack:

ERROR in ../trystero/src/index.js 4:0-45

Module not found: Error: Can't resolve './torrent' in '/home/project_path/node_modules/trystero/src'
Did you mean 'torrent.js'?
BREAKING CHANGE: The request './torrent' 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.

A similar issue is described in anza-xyz/wallet-adapter#200, but manifests in Trystero as well. Among other things, this change will make Trystero compatible with Create React App version 5 (the latest version).

I also added a .gitignore so that node_modules is not tracked by Git.

[dmotz]

Thanks for the PR @jeremyckahn. I'm a little confused as to why this change is necessary on Trystero's side and what upstream is throwing that error. Is this a Webpack-specific issue? I'm hesitant to make this change since it would imply all my other JS projects will need to update all of their import statement to fully qualified, but I haven't seen any guidance on that being a new standard. Do you have any more info?

[jeremyckahn]

Is this a Webpack-specific issue?

Yes. This is the Webpack configuration rule that is responsible for this behavior: https://webpack.js.org/configuration/module/#resolvefullyspecified. I've seen this issue reported in a number of other places, such as:

• "type": "module" with React. [module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'] facebook/create-react-app#11865.
• ESM named exports are not available with "type": "module" graphql/graphql-js#2721
• https://stackoverflow.com/questions/69427025/programmatic-webpack-jest-esm-cant-resolve-module-without-js-file-exten
• https://community.redwoodjs.com/t/syntaxerror-cannot-use-import-statement-outside-a-module/3636

In general, the recommended solutions seem to involve tweaking the consuming project's Webpack config as such:

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

However, in an un-ejected Create React App 5 project, that doesn't seem possible to achieve at the moment because the Webpack configuration is abstracted away.

Short of ejecting from Create React app and making the suggested Webpack configuration change, the best solution seems to be making changes to upstream projects like the one in this PR. It is frustrating that Webpack and Create React App collectively made this breaking change, but I'm not sure what a better solution for Create React App projects would be.

[jeremyckahn]

@dmotz what do you think about the solution that's offered here? Is there anything you'd like to see changed before it can be merged?

[jeremyckahn]

In case it's helpful, the issue that this PR fixes is now manifesting in my other Create React App-based project that uses Trystero. Here's a recent example of a breakage introduced by an automated Dependabot version update:

• PR: chore(deps): bump shell-quote and react-scripts jeremyckahn/farmhand#322
• Breaking CI build: https://vercel.com/jeremyckahn/farmhand/9JUE14qfL8u66AhT2Zb7UaShi3Le

...
[11:30:47.283] > react-scripts build
[11:30:47.283] 
[11:30:49.141] Creating an optimized production build...
[11:30:58.986] Failed to compile.
[11:30:58.986] 
[11:30:58.987] Module not found: Error: Can't resolve './torrent' in '/vercel/path0/node_modules/trystero/src'
[11:30:58.987] Did you mean 'torrent.js'?
[11:30:58.987] BREAKING CHANGE: The request './torrent' failed to resolve only because it was resolved as fully specified
[11:30:58.987] (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"').
[11:30:58.987] The extension in the request is mandatory for it to be fully specified.
[11:30:58.987] Add the extension to the request.

It seems that others who use Trystero with Create React App will likely experience this issue unless some kind of solution is implemented.

[dmotz]

Sorry for the wait on this, I've been busy. I merged this and published a new version (0.11.2) to npm. This still looks like a CRA problem to me caused by a Webpack strictness quirk, but I'm curious if fully qualified import paths are expected for all frontend libraries going forward.

[jeremyckahn]

No worries! I appreciate you following up with a merge and release. I agree that this is something that CRA should fix by addressing facebook/create-react-app#11865, but until then downstream PRs like this seem like the most sensible workaround.

I'm curious if fully qualified import paths are expected for all frontend libraries going forward.

Me too. I haven't seen documentation either way regarding this.