Ok I've looked everywhere and there is no documentation on this Babel module
--babel-plugin-named-asset-import
can someone please explain what it is for and how it works.
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.
Related
Let's say I have two React components:
import { React } from "react";
import "./styles.css";
function ComponentA() {
...
}
export default ComponentA;
import { React } from "react";
import "./styles.css";
function ComponentB() {
...
}
export default ComponentB;
Both of these components are importing the same CSS file styles.css. Now let's say that in my app, I'm importing both of these components, so App.js looks something like this:
import { ComponentA } from "./ComponentA";
import { ComponentB } from "./ComponentB";
function App() {
return (
<div className="App">
<ComponentA />
<ComponentB />
</div>
);
}
export default App;
What exactly happens here? Does my app import the same CSS file twice? And if so, do I just make the import on the App.js file instead?
It's as if it was only imported once.
When a module bundler like Webpack sees an import, it puts the following path in the list of files to process, if the path doesn't exist already. The file is only processed once, no matter how many times it's imported.
Note that with React apps, you will often see
import React from "react";
in tens or hundreds of files - React isn't created anew hundreds of times. Rather, the module is processed once, and then files that import it are given access to what React has exported.
Importing CSS files works the same way, in that they're only processed once no matter how many times an import exists for them (though they don't really have exports, just side-effects).
If both ComponentA and ComponentB depend on styles.css, feel free to keep importing styles.css in both - it doesn't hurt, and will make things easier to manage when you can see at a glance that both components directly depend on that CSS.
I'm trying to use emotion in my create-react-app, but getting errors when using the macro method explained here.
I just tried copying over the import code in a component like this:
import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "#emotion/css/macro";
import styled from "#emotion/styled/macro";
function Registration(props) {
return;
}
export default Registration;
The first error I get is Parsing error: Identifier 'css' has already been declared. So I commented out the import css and import styled lines to see if it would return anything else. This gave me the error Cannot find module 'react-emotion/macro' from ....
What step am I missing? Or is there another way that I should be including emotion in the app?
Answering my own question in case anyone has the same problem. With v10 of emotion and create-react-app (I believe greater than v2), react-emotion is not required. Also, I didn't need styled, so with the following it works:
import React from "react";
import css from "#emotion/css/macro";
function Registration(props) {
return
}
export default Registration;
I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:
GreetUser.jsx
index.jsx
index.html
while compiling it is showing that could not find required index.js file.
I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
render()
{
return <h1>Greetings from suraj!!!!</h1>;
}
}
export default GreetUser;
2.index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';
import GreetUser from './Component/GreetUser.jsx';
ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));
serviceWorker.unregister();
Could not find a required file.
Name: index.js
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
index file must with .js extension and not jsx is not react component.
index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.
You can modify webpack configuration if you need it.
You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?
I added react-svg-loader and tried to import an svg per the documentation, yet I keep running into "Can't find the module.."
import * as React from 'react';
import FlickrLoader from './FlickrLoader.svg';
// tslint:disable-next-line:variable-name
const Loader = props => (
<FlickrLoader className="center" />
);
export default Loader;
In the root folder, I have custom.d.ts which as declare module '*.svg';
Can anyone think of something that I may be missing as to why TypeScript won't pick up the .svg file in the same directory?
I have a bunch of React components in a folder and I can import each one individually like this:
import Component1 from '../components/component1/component1';
import Component2 from '../components/component2/component2';
Using the components like this works fine. However, when I bundle all the components using Webpack, the following code returns an empty object when I try to import the component.
import Component1 from '../dist/bundle.js';
I can't render this component. How do I export the components when bundling files?
Simply put you cannot import any modules from a bundle.
You need to include this code inside the source and then bundle it together
Actually you can do that. In my situation I needed react components in backbone application so what I did:
In react exposed components that should be importable by exporting them in entry point (usually index.js) like:
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header/Header';
export {
React,
ReactDOM,
Header
};
Made my bundle output as library:
output: {
path: /some/path/of/your/lib,
library: 'reactapp',
libraryTarget: 'umd',
filename: `app${jsExtension}`,
},
Then bind name to file path in requirejs config:
reactapp: '/some/path/of/your/lib/app.js'
Then in code I can import that bundle as reactapp like:
define(["reactapp"], function(reactapp) {
// reactapp is object containing React, ReactDOM, Header
});