Require file extensions for imports and exports #4001

benasher44 · 2023-04-30T19:52:28Z

Please describe your changes

Updates all imports and exports to include file extensions.

How did you accomplish your changes

Careful find/replace, eslint, and iterations of building and fixing issues.

How have you tested your changes

Built the project and demos, tested the changes with our main project, and tried a few examples in the deployed demos.

How can we verify your changes

I'm not really sure how you all test something like this, but it sounded like from a comment in #3488 there was some method in mind. Let me know how I can help here.

Remarks

Updated an eslint rule to ensure these changes will stick going forward
Used no-restricted-imports to specifically target '..' and '.' imports, which weren't covered by import/extensions for some reason.
Generally speaking, I think this should work fine with CJS and improve compatibility for TS folks migrating to ESM. I'm less familiar with other supported packaging/module models.
In cases where Vite/Rollup didn't like .js extensions for .ts files when building demos, I used .ts endings.

Checklist

The changes are not breaking the editor
Added tests where possible
Followed the guidelines
Fixed linting issues

Related issues

Closes #3488

netlify · 2023-04-30T19:52:37Z

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	`7605918`
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/64979daebf5d6100080b151c
😎 Deploy Preview	https://deploy-preview-4001--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

benasher44 · 2023-05-07T16:36:18Z

In my latest update, I did a more comprehensive test build again our internal app and found a final issue that wasn't caught by the updated eslint rule. I filed it as a bug in import-js/eslint-plugin-import#2777 and added a no-restricted-imports rule to cover the imports from ".." and "." case

benasher44 · 2023-05-25T21:26:18Z

Hi @bdbch! Any thoughts here? prosemirror also recently published nodenext-compatible updates as well, so with this, we should be all set in that area.

benasher44 · 2023-06-18T17:16:06Z

Hi @bdbch. Is this solution okay, or were you looking for something different (will keep this PR updated, if this solution works)? Would love to get this merged. This is the only library we need to fix in order to migrate our node backend to ESM.

bdbch · 2023-06-22T06:46:51Z

Hey @benasher44, sorry for the late update. I'll give your PR a try later this day and will merge if it works! Wanted to do this too earlier to bring in support for NodeNext.

Thanks already for contributing and keeping me in the loop

benasher44 · 2023-06-22T12:55:24Z

Amazing, thank you! I have updated with develop. I'll watch CI to make sure it passes.

Kyderman · 2023-06-22T14:07:34Z

Just to add to this, I think I'm waiting on this to go in as I can't resolve the imports properly, which is a blocker to implementing TipTap in our more legacy React product (works fine with Next.js!)

benasher44 · 2023-06-24T14:40:37Z

It looks like 1 workflow still has to be approved to run

benasher44 · 2023-06-25T01:52:35Z

Okay I added an extensionAlias to the webpack config that cypress is using, so it should properly understand/resolve the .js endings now (all passing for me locally). I also updated with develop again. Mind approving the workflow run once more? 🤞

bdbch · 2023-06-25T13:09:29Z

Thanks @benasher44! Let's see what the CI is doing - afterwards the PR looks good for me. I'll let @svenadlung also take a look.

bdbch · 2023-06-25T13:10:20Z

.eslintrc.js

@@ -43,7 +43,21 @@ module.exports = {
        'no-console': ['warn', { allow: ['warn', 'error'] }],
        semi: ['error', 'never'],
        'import/order': 'off',
-        'import/extensions': 'off',
+        'import/extensions': ['error', 'ignorePackages'],


Do you know if this is autofixeable?

I don't think it is. The only way to get something like that is to convert all of the packages to use moduleResolution: NodeNext, and then TypeScript will suggest imports with .js endings from the start.

I can try that, if you all are open to it. It's a bigger change / commitment.

I briefly tried locally, and it creates a bunch of TS type resolution issues that need to be resolved. The project builds, but there are lots of type issues that appear in the editor.

If you attempt that after merging this, see ProseMirror/prosemirror#1305, where we discussed issues here in depth. In order to build with NodeNext, here's what I did to start:

Update main tsconfig.json moduleResolution to "NodeNext"

Override moduleResolution in tests/tsconfig.json to be "node", so cypress tests still build/run

Update all prosemirror packages to get the compatible dependencies

@bdbch is auto-fixability a blocker?

Not really. I just need another review from @svenadlung since we share PR responsibilities.

Heads up that there is now the "typescript.preferences.importModuleSpecifierEnding": "js" for VSCode, which will make .js endings the default when auto-importing!

svenadlung · 2023-06-30T18:27:53Z

Sorry for the delay on my part. Let's give it a try. Thank you for the contribution @benasher44 🙌

benasher44 · 2023-06-30T19:30:03Z

Amazing, thank you!

benasher44 · 2023-06-30T19:46:49Z

I did a quick pass on a handful of open PRs in the last week and left comments, but expect to maybe have to quickly follow up with fixes on develop, if people aren't up-to-date with develop

* Require .js endings * add extension alias for cypress to resolve ts files with js endings

benasher44 force-pushed the basher/import-extensions branch 2 times, most recently from 80678d5 to cacc148 Compare April 30, 2023 20:13

benasher44 mentioned this pull request Apr 30, 2023

Type imports broken in TypeScript's NodeNext mode (ESM support) #3488

Closed

2 tasks

benasher44 changed the title ~~Require .js endings for imports and exports~~ Require file extensions for imports and exports Apr 30, 2023

benasher44 force-pushed the basher/import-extensions branch from cacc148 to 9f589ce Compare May 7, 2023 16:22

benasher44 force-pushed the basher/import-extensions branch from 9f589ce to 105d701 Compare June 22, 2023 12:55

benasher44 added 2 commits June 24, 2023 18:20

Require .js endings

6b79a97

add extension alias for cypress to resolve ts files with js endings

7605918

benasher44 force-pushed the basher/import-extensions branch from 105d701 to 7605918 Compare June 25, 2023 01:51

benasher44 requested review from bdbch and svenadlung as code owners June 25, 2023 01:51

bdbch approved these changes Jun 25, 2023

View reviewed changes

svenadlung approved these changes Jun 30, 2023

View reviewed changes

bdbch merged commit e97630c into ueberdosis:develop Jun 30, 2023
15 checks passed

benasher44 deleted the basher/import-extensions branch June 30, 2023 19:46

andrewlu0 pushed a commit to trybaseplate/tiptap that referenced this pull request Oct 20, 2023

Require file extensions for imports and exports (ueberdosis#4001)

0cb8c10

* Require .js endings * add extension alias for cypress to resolve ts files with js endings

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Require file extensions for imports and exports #4001

Require file extensions for imports and exports #4001

benasher44 commented Apr 30, 2023 •

edited

netlify bot commented Apr 30, 2023 •

edited

benasher44 commented May 7, 2023

benasher44 commented May 25, 2023

benasher44 commented Jun 18, 2023 •

edited

bdbch commented Jun 22, 2023

benasher44 commented Jun 22, 2023 •

edited

Kyderman commented Jun 22, 2023

benasher44 commented Jun 24, 2023

benasher44 commented Jun 25, 2023 •

edited

bdbch commented Jun 25, 2023

bdbch Jun 25, 2023

benasher44 Jun 25, 2023

benasher44 Jun 25, 2023

benasher44 Jun 25, 2023 •

edited

benasher44 Jun 30, 2023

bdbch Jun 30, 2023

benasher44 Jan 3, 2024 •

edited

svenadlung commented Jun 30, 2023

benasher44 commented Jun 30, 2023

benasher44 commented Jun 30, 2023

Require file extensions for imports and exports #4001

Require file extensions for imports and exports #4001

Conversation

benasher44 commented Apr 30, 2023 • edited

Please describe your changes

How did you accomplish your changes

How have you tested your changes

How can we verify your changes

Remarks

Checklist

Related issues

netlify bot commented Apr 30, 2023 • edited

✅ Deploy Preview for tiptap-embed ready!

benasher44 commented May 7, 2023

benasher44 commented May 25, 2023

benasher44 commented Jun 18, 2023 • edited

bdbch commented Jun 22, 2023

benasher44 commented Jun 22, 2023 • edited

Kyderman commented Jun 22, 2023

benasher44 commented Jun 24, 2023

benasher44 commented Jun 25, 2023 • edited

bdbch commented Jun 25, 2023

bdbch Jun 25, 2023

Choose a reason for hiding this comment

benasher44 Jun 25, 2023

Choose a reason for hiding this comment

benasher44 Jun 25, 2023

Choose a reason for hiding this comment

benasher44 Jun 25, 2023 • edited

Choose a reason for hiding this comment

benasher44 Jun 30, 2023

Choose a reason for hiding this comment

bdbch Jun 30, 2023

Choose a reason for hiding this comment

benasher44 Jan 3, 2024 • edited

Choose a reason for hiding this comment

svenadlung commented Jun 30, 2023

benasher44 commented Jun 30, 2023

benasher44 commented Jun 30, 2023

benasher44 commented Apr 30, 2023 •

edited

netlify bot commented Apr 30, 2023 •

edited

benasher44 commented Jun 18, 2023 •

edited

benasher44 commented Jun 22, 2023 •

edited

benasher44 commented Jun 25, 2023 •

edited

benasher44 Jun 25, 2023 •

edited

benasher44 Jan 3, 2024 •

edited