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

Draft: Deep import HTML and non-ESM files with exports and ?url query #7097

Closed
wants to merge 1 commit into from
Closed

Draft: Deep import HTML and non-ESM files with exports and ?url query #7097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/playground/resolve/__tests__/resolve.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,20 @@ test('deep import with query with exports field', async () => {
expect(await page.textContent('.exports-deep-query')).not.toMatch('fail')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @sapphi-red since you recently fixed up a super similar and relevant case in #7073, I was curious if you had any insights or hunches about what is additionally going wrong.

(the testing and comments here are done on the latest main with your fix)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I noticed that my fiix was broken.
I have made a PR which fixes (#7098).
This would work with .html and others.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sapphi-red Thanks for taking a look and proposing a change already!

})

test('deep import SVG with query with exports field', async () => {
expect(await page.textContent('.exports-deep-svg-query')).not.toMatch('fail')
})

test('deep import HTML with query with exports field', async () => {
expect(await page.textContent('.exports-deep-html-query')).not.toMatch('fail')
})

test('deep import non-ESM with query with exports field', async () => {
expect(await page.textContent('.exports-deep-non-esm-query')).not.toMatch(
'fail'
)
})

test('deep import with exports field + exposed dir', async () => {
expect(await page.textContent('.exports-deep-exposed-dir')).toMatch(
'[success]'
Expand Down
1 change: 1 addition & 0 deletions packages/playground/resolve/exports-path/deep-non-esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('foo')
6 changes: 6 additions & 0 deletions packages/playground/resolve/exports-path/deep.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div>foo</div>
</body>
</html>
1 change: 1 addition & 0 deletions packages/playground/resolve/exports-path/deep.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/playground/resolve/exports-path/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
},
"./deep.js": "./deep.js",
"./deep.json": "./deep.json",
"./deep.svg": "./deep.svg",
"./deep.html": "./deep.html",
"./deep-non-esm.js": "./deep-non-esm.js",
"./dir/": "./dir/",
"./dir-mapped/*": {
"import": "./dir/*",
Expand Down
21 changes: 21 additions & 0 deletions packages/playground/resolve/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@ <h2>Deep import with exports field</h2>
<h2>Deep import with query with exports field</h2>
<p class="exports-deep-query">fail</p>

<h2>Deep import SVG file with query with exports field</h2>
<p class="exports-deep-svg-query">fail</p>

<h2>Deep import HTML file with query with exports field</h2>
<p class="exports-deep-html-query">fail</p>

<h2>Deep import non-ESM file with query with exports field</h2>
<p class="exports-deep-non-esm-query">fail</p>

<h2>Deep import with exports field + exposed directory</h2>
<p class="exports-deep-exposed-dir">fail</p>

Expand Down Expand Up @@ -107,6 +116,18 @@ <h2>resolve package that contains # in path</h2>
import deepPath from 'resolve-exports-path/deep.json?url'
text('.exports-deep-query', deepPath)

// deep import SVG w/ exports w/ query
import deepSvgPath from 'resolve-exports-path/deep.svg?url'
text('.exports-deep-svg-query', deepSvgPath)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one works 👍 So we can rule out the problem of it only working with .js or .json files


// deep import HTML w/ exports w/ query
import deepHtmlPath from 'resolve-exports-path/deep.html?url'
text('.exports-deep-html-query', deepHtmlPath)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without any exports defined, this kind of thing normally works.

But when exports is added for the same file, then you start running into errors like:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .html file format.
C:/Users/MLM/Documents/GitHub/vite/packages/playground/resolve/exports-path/deep.html:4:19
2  |  <html>
3  |    <body>
4  |      <div>foo</div>
   |                    ^
5  |    </body>
6  |  </html>
    at formatError (C:\Users\MLM\Documents\GitHub\vite\packages\vite\src\node\server\pluginContainer.ts:315:31)
    at TransformContext.error (C:\Users\MLM\Documents\GitHub\vite\packages\vite\src\node\server\pluginContainer.ts:305:13)
    at TransformContext.transform (C:\Users\MLM\Documents\GitHub\vite\packages\vite\src\node\plugins\importAnalysis.ts:140:14)
    at Object.transform (C:\Users\MLM\Documents\GitHub\vite\packages\vite\src\node\server\pluginContainer.ts:583:20)
    at doTransform (C:\Users\MLM\Documents\GitHub\vite\packages\vite\src\node\server\transformRequest.ts:156:27
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.


// deep import non-ESM w/ exports w/ query
import deepNonEsmPath from 'resolve-exports-path/deep-non-esm.js?url'
text('.exports-deep-non-esm-query', deepNonEsmPath)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without any exports defined, this kind of thing normally works.

But when exports is added for the same file, then you start running into errors like:

Uncaught SyntaxError: The requested module '/@fs/C:/Users/MLM/Documents/GitHub/vite/packages/playground/resolve/exports-path/deep-non-esm.js' does not provide an export named 'default'


// deep import w/ exposed dir
import { msg as exposedDirMsg } from 'resolve-exports-path/dir/dir'
text('.exports-deep-exposed-dir', exposedDirMsg)
Expand Down