score:17
looks like its purpose is to import named exports from non js/css assets. currently, within the cra, it appears to only be implemented for svg assets. the goal is to offer another way to import svgs as react components versus the standard import as a url
that needs to be applied to an img
element.
without plugin (default import)
import * as react from 'react';
import logo from './logo.png'; // import file as a url
function header() {
return <img src={logo} alt="logo" />;
}
export default header;
with plugin (named import)
import * as react from 'react';
import { reactcomponent as logo } from './logo.svg'; // import file as a react component
function header() {
return <logo />;
}
export default header;
update
going deeper, it appears that the plugin aids in importing svg files in the following ways:
import logo from "logo.svg"; // default import
import { logourl } from "logo.svg"; // named import
import { reactcomponent as logo } from "@svgr/webpack?-svgo!logo.svg"; // reactcomponent import
the cra specifically targets svg
file formats as shown in their test suites. as to whether or not it supports other non-js files, not likely (especially since the babel plugin is only utilized once in the cra webpack config).
as mentioned in the svgr docs:
svgr can be used as a webpack loader, this way you can import your svg directly as a react component.
this particular plugin aims to import any svg
file as the default export.
please note that by default, @svgr/webpack will try to export the react component via default export if there is no other loader handling svg files with default export.
whereas the cra appears to utilize file/url loader for the default/named exports and specifically maps a reactcomponent named export to the svgr webpack plugin.
Source: stackoverflow.com
Related Query
- What does the @ symbol mean in a react import statement
- What does the '@' mean in front of an import in React?
- What does import * do in Javascript?
- What does import {} from '.' do?
- What does import * in javascript stand for?
- Module not found: Invalid generator object. Asset Modules Plugin has been initialized using a generator object that does not match the API schema
- What does it mean by import 'something' instead of using import something from 'something'?
- React: What does following mean: import register, * as fromRegister from './registerReducer'?
- What does the error "JSX element type '...' does not have any construct or call signatures" mean?
- What does "export default" do in JSX?
- What does this "react-scripts eject" command do?
- What does npm install --legacy-peer-deps do exactly? When is it recommended / What's a potential use case?
- What does it mean when they say React is XSS protected?
- Home does not contain an export named Home
- What does ...rest mean in React JSX?
- What does calling super() in a React constructor do?
- What does useCallback/useMemo do in React?
- es6 - import all named module without alias
- What does registerServiceWorker do in React JS?
- What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
- What does 'Only a ReactOwner can have refs.' mean?
- What does the hook numbers in the Reactjs Dev tool correspond to?
- What is AMP HTML and how does it fit in with framework/tool X?
- What does JSX stand for?
- Attempted import error: 'uuid' does not contain a default export (imported as 'uuid') In React
- What does « dehydrate » and « rehydrate » stand for in Fluxible?
- What does :: (double colon) mean in JavaScript?
- What does React Native use to allow JavaScript to be executed on iOS and Android natively?
- What does it mean to 'move this variable directly inside useEffect' in this error message?
- What does the CssBaseline class do?
More Query from same tag
- Redux-saga: axios is not working but fetch() does
- How to handle erros with redux saga
- React HotReload CodeChanges made in MobX Store
- React Functional Component Parent and Child - Unhandled Rejection (TypeError): X is not a function
- Search function with React
- Uncaught TypeError: Cannot read property 'getParent' of undefined
- Graphql query returning null for relational document, field missing from query but present in primsa admin
- How to create a custom hook that recives dependencies?
- How to handle third-party dom manipulation in React?
- Mui LinearProgress Bar stops displaying on display flex
- React-redux : listening to state changes to trigger action
- Question Mark in Variable Name
- React - Element type is invalid - how to debug this error?
- Best way to access API from React App?
- Right Click Menu using React JS
- Map over object except for last key - Reactjs
- REACT NATIVE - this.setState doesn't work inside onChangeText
- How can I add a function to change the page 1 of the api results to page 2 and so on, by clicking on a button, with hooks?
- template literals in jsx
- what is @ in react HOC?
- unhandledPromiseRejectionWarning in node JS
- apply css to Js strings-Js/CSS
- How to render and add similar item to the list of items from the api in React.js?
- React Router - How to replace dynamically parameters in a string
- How to redirect to another page using history on React js?
- Breakpoints not working at set breakpoints
- How can I show certain elements from an array based on a React State?
- Props that are sent to another component using React Router show up as undefined and as [object%20Object]
- How to solve @apollo modules causes problems In react project?
- How to use checkbox inside select options? React hook