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.

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

Babel transpile on Import statement with query string not working as expected #416

Open
ask-imran opened this issue Nov 15, 2020 · 2 comments

Comments

@ask-imran
Copy link

Hey everyone,

I have got a react app which uses svg-react-loader and in the import statements that import svg I have a querystring for the componentName. During webpack build the babel loader resolves everything and is working as expected.

But, when I try to run babel transpile via the cli just to transpile the files alone, I end up in a strange behavior,

import MyLogo from 'images/mylogo.svg?name=MyLogo';

I have got resolve set to src in webpack which allows me to provide the above path. but babel transpile results as below,

var _mylogo = require('images/mylogo.svg?name=MyLogo');

my expected output would be,

var _mylogo = require('../images/mylogo.svg?name=MyLogo');

If I remove the query string in the import statement it transpiles to what I expect. with query string it doesn't. Is there a config or something I am missing ? I am also using Module-resolver plugin in babel.

React version : 15.6
Babel version: 6.26.3

@jnleonard3
Copy link

We use the same loader for SVGs and I more or less ran into this issue. However, because I double up using this babel plugin along with setting the same Aliases in webpack, this plugin created a lot of noise with the warning message Could not resolve 'alias/file?with=queryParam in path/to/file but was successful because the webpack alias was ultimately used when this plugin didn't transform the import.

Unless someone can think of a reason why properly handling imports with query strings would be the worst thing in the world, knowing that this plugin likely operates in the same space as webpack often enough, I was able to easily get this to work in this PR by separating out the query string before doing the resolve.sync file existance check: #427

@jnleonard3
Copy link

jnleonard3 commented Aug 9, 2021

If anyone needs this before the PR becomes an official part of this project, I've published it to npm as at least my organization needs this change in the meantime:
npm i @jleonardvp/babel-plugin-module-resolver

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants