Comments (5)
It seems to be working fine just by installing the babel module-resolver and adding the following to the .babelrc
and leaving the tsconfig.json as is.
// babelrc
{
"presets": ["next/babel"],
"plugins": [
"inline-react-svg",
["module-resolver", {
"root": ["./"],
"alias": {
"@svgs": "./svgs"
}
}]
]
}
///
from babel-plugin-inline-react-svg.
The way is to get rid of all typescript (and webpack) aliases, and only do path aliasing with babel (and, to only do transpiling with babel). Unfortunately it’s likely not a small amount of effort.
from babel-plugin-inline-react-svg.
Hey @ljharb, thanks for the quick reply. I use nextjs (getting started) and have only 5 typescript aliases. Do you know if nextjs uses babel only?
I feel this should be easy to do for me, so I'll give it a spin, but does typescript recognize babel aliases in vs code?
from babel-plugin-inline-react-svg.
I’m not familiar with nextjs, you’d have to file an issue there.
That’s a good point; with this approach, even if you’re only using typescript for typechecking, it still needs a way to understand the specifiers to check types. I’m not sure the best solution here. Another option is to not use any aliases and use the actual filesystem/package paths for everything.
either way, this is far out of the scope of a babel plugin, so I’ll close this.
from babel-plugin-inline-react-svg.
Good call; as long as you're OK duplicating the config in both babel and TS configs, that should work fine.
from babel-plugin-inline-react-svg.
Related Issues (20)
- SVGO plugins specified as objects seems not recognised (v2.0.1) HOT 2
- Specifying SVGO option breaks JSX transform HOT 11
- How do I add type declarations for the svg file imported? HOT 2
- Build error after upgrading from 1.1.2 to 2.0.1 HOT 7
- Adding aria-hidden attribute fails HOT 4
- viewBox stripped from HTML output (nextjs) HOT 7
- Warning: Invalid attribute name: `'data-name'` HOT 3
- Svg file path is not passed to svgo
- viewbox is not passed from svg to html in the babel-plugins-inline-react-svg version": "^2.0.1". HOT 3
- Warning: React does not recognize the `maskType` prop on a DOM element. HOT 3
- TypeError: Cannot read properties of undefined (reading 'uid') HOT 3
- tsconfig relative path does not work HOT 1
- Update svgo to v3.x.x HOT 9
- Font Awesome 6 SVG comments cause errors with plugin HOT 6
- Code injection vulnerability due to svgo HOT 1
- 'undefined is not a function' when using the new JSX transform HOT 14
- App crashing with "Cannot read property 'name' of undefined" after installing plugin HOT 2
- Error: <path> attribute d: Expected arc flag ('0' or '1'), "M21 0H3a3 3 0 0-3 3 NaNvNaNa3 3…" HOT 6
- Current version of svg dependency has vulnerabilities HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-inline-react-svg.