Skip to content

fix(vue-jsx): support jsx imports with queries#7121

Merged
patak-cat merged 2 commits intovitejs:mainfrom
haoqunjiang:fix-vue-jsx-query-string
Feb 28, 2022
Merged

fix(vue-jsx): support jsx imports with queries#7121
patak-cat merged 2 commits intovitejs:mainfrom
haoqunjiang:fix-vue-jsx-query-string

Conversation

@haoqunjiang
Copy link
Member

Description

Fixes #7118

Additional context


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@Niputi Niputi added p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority) plugin: vue-jsx labels Feb 28, 2022
@patak-cat patak-cat merged commit 66cafca into vitejs:main Feb 28, 2022
@baryla
Copy link

baryla commented Feb 28, 2022

Any ETAs when this wonderful fix would be released? 😄

@patak-cat
Copy link
Member

@baryla published as plugin-vue-jsx@1.3.8

@gorbypark
Copy link

gorbypark commented Mar 30, 2022

Not sure if this is the correct spot for this, but I think I am facing the same issue but with the react plugin (and in a .js file). I may be way off on why this is erroring out, but the query is the only thing I have come up with. Any chance of getting this fix ported over to the react plugin as well if it is indeed the issue? This is with the react-native-reanimated package that supports the web (and webpack is seemingly unaffected).

12:10:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/123/Documents/code/omniv1/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js?v=14818354
  36 |        <TransitioningContext.Consumer>
  37 |          {(context) => <Comp context={context} {...props} />}
  38 |        </TransitioningContext.Consumer>
     |                                        ^
  39 |      );
  40 |    };
      at formatError (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
      at TransformContext.error (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
      at TransformContext.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:69775:22)
      at async Object.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
      at async doTransform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)
12:10:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/123/Documents/code/omniv1/node_modules/react-native-reanimated/lib/reanimated2/component/FlatList.js?v=14818354
  19 |          return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
  20 |          {props.children}
  21 |        </WrappedComponents.View>);
     |                                   ^
  22 |      };
  23 |      return cellRenderer;
      at formatError (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
      at TransformContext.error (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
      at TransformContext.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:69775:22)
      at async Object.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
      at async doTransform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)
      

@enestatli
Copy link

Not sure if this is the correct spot for this, but I think I am facing the same issue but with the react plugin (and in a .js file). I may be way off on why this is erroring out, but the query is the only thing I have come up with. Any chance of getting this fix ported over to the react plugin as well if it is indeed the issue? This is with the react-native-reanimated package that supports the web (and webpack is seemingly unaffected).

12:10:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/123/Documents/code/omniv1/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js?v=14818354
  36 |        <TransitioningContext.Consumer>
  37 |          {(context) => <Comp context={context} {...props} />}
  38 |        </TransitioningContext.Consumer>
     |                                        ^
  39 |      );
  40 |    };
      at formatError (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
      at TransformContext.error (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
      at TransformContext.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:69775:22)
      at async Object.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
      at async doTransform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)
12:10:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/123/Documents/code/omniv1/node_modules/react-native-reanimated/lib/reanimated2/component/FlatList.js?v=14818354
  19 |          return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
  20 |          {props.children}
  21 |        </WrappedComponents.View>);
     |                                   ^
  22 |      };
  23 |      return cellRenderer;
      at formatError (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
      at TransformContext.error (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
      at TransformContext.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:69775:22)
      at async Object.transform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
      at async doTransform (/Users/123/Documents/code/omniv1/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)
      

@gorbypark did you find any solution? 🥲

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

Labels

p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

jsx files with queries aren't parsed correctly

6 participants