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.
Related
I hope someone can tell me where I am going wrong in trying to get usable libraries
I have created a NPM project using create-react-app --format typescript, I then created the following structure:
|->tsconfig.json
|->package.json
|->config
|->tsconfig.base.json
|->tsconfig.cjs.json
|->tsconfig.esm.json
|->src
|->index.tsx
|->components
|->index.ts
|->ExampleComponent
|->ExampleComponent.component.tsx
|->ExampleComponent.stories.tsx
|->ExampleComponent.types.ts
|->index.ts
In this example the Example Component looks something like the following:
|->tscon
import React, { FC } from 'react';
// Contact specific icons
import Container from 'react-bootstrap/Container';
// Footer Properties
import { ExampleProperties } from './ExampleComponent.types';
export const ExampleComponent: FC<ExampleProperties> = ({ text }) => {
return (<Container fluid>{text}</Container>);
};
for the tsconfig files in 'config' I've lifted the Synk recommendation directly, while tsconfig.json is fairly simple like so:
{
"extends": "./configs/tsconfig.esm.json",
}
If I start the application via 'npm start' I get a website and the component correctly appears, but the issue is trying to import into another project.
I using npm link and npm link #Example/ExampleProject to bring the project in to another website and the index.tsx of that project looks like so:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ExampleComponent } from '#Example/ExampleProject';
const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element') const root = createRoot(container);
root.render(
<React.StrictMode>
<main role={"main"} >
<ExampleComponent/>
</main>
</React.StrictMode> );
But when it starts I am getting this error:
Module not found: Error: Can't resolve './ExampleComponent/index' in '/home/user/IdeaProjects/ExampleProject/dist/esm' Did you mean 'index.mjs'? BREAKING CHANGE: The request './Common/index' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
The only thing I can think is tsc generates src/components/index.ts as a /src/component/index.js (which I rename). But ExampleComponent has .js and .mjs files within its directory
There seems to be no corresponding folder or file named 'react'. Maybe using npm start gives the JSX file access to 'react', I don't know where 'react' is located though.
Basically, where is 'react' located?
I looked in the node_modules folder, and there is a subfolder named react. However, there is no file named React in there.
import React from 'react';
In the above line of code, I can not figure out where React is. I tried looking in the 'react' folder that is a subfolder of node_modules
React is exported from the React package.
import React from 'react';
In the above line, you are importing a default export. You can give it any name you want instead of React.
In the React source code you can find this default export defined in package.json.
The word React is where you assigned whatever the 'react' library exported as default.
if you open the node_modules/react/package.json file and check it you can find following line of code,
...
"main": "index.js",
"exports": {
".": {
"react-server": "./react.shared-subset.js",
"default": "./index.js" // <----------------------------- see here
},
"./package.json": "./package.json",
"./jsx-runtime": "./jsx-runtime.js",
"./jsx-dev-runtime": "./jsx-dev-runtime.js"
},
The package.json says the entry point is index.js so if you check the content of index.js, (exports["."]["default"] says use index.js for default import ( ie import DefaultReact from 'react' ))
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
This is not just a react specific thing, you can learn how to create custom packages from here.
I've built a reusable react component through nwb new react-component fade-preloader called FadePreloader which uses styled-components, its published on npm so I can use it on other projects, but when its imported as a module its styles are never added to the DOM. The following provides more details about the nwb component.
src folder is:
src/
FadePreloader.js
FadePreloader.Styled.js
index.js
FadePreloader.js:
import React, {Component} from "react"
class FadePreloader extends Component {
// logic code
}
export default FadePreloader
FadePreloader.Styled.js:
import styled from "styled-components"
import FadePreloader from "./FadePreloader"
const FadePreloader_Styled = styled(FadePreloader)`
// css here
`
export default FadePreloader_Styled
index.js:
// just import the styled-componet and re-export it
import FadePreloader from "./FadePreloader.Styled"
export default FadePreloader
I have the default configuration in package.json provided by nwb:
FadePreloader is published on npm so I added it on other project (through yarn add fade-preloader) and use it like this:
App.jsx on other project:
// lots of imports here
import FadePreloader from "fade-preloader"
class App extends Component {
render() {
return(
<div>
<FadePreloader />
</div>
)
}
}
export default App
The FadePreloader component is rendered in the DOM and its class attribute has the className generated by styled-components as espected but the stylesheet is never added to the DOM, no <style> element is present causing an unstyled FadePreloader rendered. What's wrong?
I've found a solution coming from the official spectrum channel of styled-components, see here.
What I had to do was to follow this which basically says that styled-components dependency needs to be moved from dependencies to devDependencies and peerDependencies in package.json. I'm not sure the reason but it seems to be to avoid some unexpected reason that is generated by duplicated direct dependency of styled-components.
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.
I am trying react based on create-react-app. I'm new to react.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
./App in import App from './App'; is not clear to me when and where is this created, is this done by babel?
file strucutre
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>myComponent</div>
)
}
}
export default App;
tl;dr
No, it is not done by Babel, instead it is done by create-react-app package.
All the files and folders in that folder are created automatically when you run,
create-react-app your-new-app-name
import App from './App'
The above line is used for importing the class you have written in the file App.js under the same directory.
Next, the difference between,
import App from './App'
and
import App from 'App'
Use the first if you want to import any user defined files and second for importing packages. As Shubham Khatri mentioned, for importing files, it is technically same if you did or did not use .js extension.
The longer version
create-react-app is a starter kit for people who are new to React or for who are lazy enough to build an app from scratch. What create-react-app does is, it will give you a minimal running React app with a solid folder structure. As given in their documentation, you can install that globally by giving,
npm install -g create-react-app
After this whenever you want to create a new app, what you want to do is,
create-react-app your-new-app-name
This will automatically generate a folder with all the files you mentioned.
Within the folder when you open the file public/index.html, you can see a line
<div id="root"> </div>
And on the src/index.js, you can find,
ReactDOM.render(
<App />,{}
document.getElementById('root')
);
If you are familiar with javascript, you may know that document.getElementById('root') is used to match any tag in HTML with ID as root. So the above snippet means that, they are rendering the <App> component of react to div with ID root. This is how React communicates with HTML page.
Rather that writing all the component codes in a single file, it is a good standard to write each components in different files. Here, App.js is a component that basically renders the text myComponent. For using this component in other files, you have to do two things.
Export the component from the file where it is defined. (export default App;)
Import the component to the file where it is used. (import App from './App')
General syntax for import is,
import className, { functionName } from 'packageName'
or
import className, { functionName } from './path-to-file/fileName'
Note: It is that ./ which tells the compiler whether to look on to node_modules folder or the path you mentioned. Use that strictly when you need to import user defined files.
Hope this helps!
When you import your Component like
import App from './App';
It will import your file App.js that is present in the same direcotry as index.js
In webpack configuration we specify which types of files babel needs to build and there if we specify .js or .jsx, it takes by default the extension of the file when we import it. we do not explicitly mention it. You can change your immport to be like
import App from './App.js';
which is technically the same.
The create-react-app npm package makes use of webpack to build your code which you can see from the package/react-scripts/package.json in the github directory