I'm trying to load in an image file that's contained within my src folder. I'm loading it into App.js like so:
import React, { Component } from 'react';
import './App.css';
import logo from 'images/logo.png';
class App extends Component {
render() {
return (
<header>
<img src={logo} alt={"logo"}/>
</header>
);
}
}
export default App;
Unfortunately, I get this error:
./src/App.js
Module not found: Can't resolve 'logo.png' in '/src'
I arrived at this code with this Stack Overflow answer: https://stackoverflow.com/a/35454832/7386637
..but what am I doing wrong here?
If you want to be using file paths like this, you need to add a resolve property to your webpack config, like so
resolve: {
modules: [path.resolve(__dirname, 'PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY')]
},
So for example if your images live in project/assets/images/ and your webpack config lives in project/ then in the above you would replace PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY with assets.
Using import logo from 'images/logo.png'; would work then. (Reminder that you need to restart your dev-server in order for changes in webpack config to take effect)
Otherwise, relative paths will work fine, as mentioned.
Related
I want to use a Html template at my Sharetribe Flex website which is build in ReactJS. I have added HomePage container, but it following error :
./src/routeConfiguration.js
Attempted import error: 'HomePage' is not exported from './containers'.
What I have tried:
I had added following code in routeConfiguration.js
const routeConfiguration = () => { return [
{
path: '/',
name: 'HomePage',
component: props => <HomePage {...props} />,
},
Pl. help me to solve this issue.
As you're exporting HomePage as default, the import in routeConfiguration.js should be import HomePage from 'containers'; - it's a common typo to put {} around the imported component and I'm guessing you may have done the same.
If not, then you need to check your env config files (babel, typescript, etc).
There are pages exported from src/containers/index.js file.
When JavaScript module bundler sees a module import with syntax like:
import { ComponentA, ComponentB } from '../containers'
it will assume that there is a file "../containers.js" or alternatively "../containers/index.js". In this case, the latter is true.
You should check Flex tutorials:
https://www.sharetribe.com/docs/tutorial-branding/add-faq-page/
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.
I am suffering compile failure using "create-react-app". The message I've gotten is as below.
__
./src/App.js
Module not found: You attempted to import /Contact which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
__
Weird thing is that I certainly have "/Contact" file inside of src folder while The message says that I don't. Here is my folder tree.
And here is my App.js code.
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
class App extends Component {
render() {
return (
<div>
<PhoneForm />
</div>
);
}
}
export default App;
Feels like I am missing some kind of basic setting here.
Please have mercy on me and help me to figure this out.
If your App.js is in components folder, then you should use
import PhoneForm from './PhoneForm';
Note that you don't have to prepend the import with ./components.
But I don't see your PhoneForm component here altogether. So this might also be the source of error.
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
});
I start making a new interface with react-toolbox. and this is just my first step and i face this problem. I got an message in my console:
Unable to resolve some modules: "./style" ...
i don't know why the style won't load. i also imported its component already.
here are some simple code :
import React from 'react';
import {Button} from 'react-toolbox';
class MyButton extends React.Component {
render() {
return (
<div>
<Button icon='bookmark' label='Bookmark' raised primary />
</div>
);
}
}
export default MyButton;
Thanks so much for your help.
You are getting this error because react-toolbox uses CSS Modules and you dont have the loaders to preprocess them.
You are going to need
webpack
css-loader
style-loader