I'v been trying to import a javascript file to app.js found in create-react-app package. I used this code to import my file :
note:my file is located in a folder called components where you find the folder Navigation and its in that folder.
import script from './components/Navigation/script;
and i exported the file using :
export default App;
but in my terminal i got an error saying
Module not found : cant resolve'./components/Navigation/script'
Could someone please tell me how i can fix this error.
Thank you in advance :-)
You got the syntax wrong.
import script from './components/Navigation/script;
actually imports the default export from script.js
export default function() {}
You can also import named exports like this:
import {something} from "./script.js"
Which imports
const something = 42;
export something;
I guess you could import js(and css) files with
import "./scripts.js" //or import "./style.css"
But you generally want to export individual functions, values etc.
You can also import everything from a module like this
import * as React from "react";
But create-react-app configuration allows you to use this as
import React from "react"; //Internally equals to import * as React from "react";
Related
This is my src directory -
And while importing the last file (StateProvider.js) in Product.js, this is the error I get while importing StateProvider -
My import statement from Product.js-
Can anyone guide me, why my import is not working?
The error occurs because StateProvider.js is not in the same directory as Product.js. You have to specify the import statement like this:
import StateProvider from '../../StateProvider';
Probably 2 errors.
First, If you export the default file you're good to go.
export default StateProvider
Second is if you are on the correct directory.
it shouild be
import StateProvider from '../../StateProvider'
import StateProvider from '../../StateProvider'
I also recommend using "Auto Import" extension if you working with Visual Studio Code.
I'm trying to import a recently created App.css into my App.js but get a "module not found error"
import React, { Component } from 'react';
import Products from './components/Products';
import Cart from './components/Cart';
import {gql} from 'babel-plugin-graphql-js-client-transform';
import './App.css';
This is the folder where I'm trying to import:
enter image description here
Also, I created a Navigation.js component, exported it, but get same error and I'm not sure why.
According to the docs, I should be able to do this to import a component for use in my React App:
import { Alert } from 'reactstrap';
However, this will cause webpack to complain like this:
| Module not found: Error: Can't resolve 'reactstrap' in '~/project/client/app/bundles/Frontend/components/team'
Then, I switch the import to this:
import Alert from 'reactstrap/lib/Alert';
And the import & functionality works!
This probably means (?) some configuration or module exports are not working for this module. Where can I start debugging / fixing this?
I'm having an issue while trying to import all files in one of my directories.
This works:
import '../pages/guidance/target_access_client_relationships.js';
While this doesn't:
import '../pages/guidance';
What am I doing wrong? I am planning to have quite a lot of files in 'guidance' and I'd rather not have to import every single file individually.
Thanks!
The only way I know is to use a index.js and import all the file inside it.
EX:
dir A index.js
import './fileA.js'
import './fileB.js'
dir B index.js
import './fileA.js'
import './fileB.js'
and finally you can make a parent dir and import both
parent dir index.js
import './dirB'
import './dirA'
This is not possible I don't think, but what you can do is this...
Create in the directory a index.js file which imports everything from the directory and exports it.
import modules from files in directory has a similar answer.
What is the best way to import some modules in all of the files of the project, so I don't have to write stuff like:
import React from 'react';
import Reflux from 'reflux';
import reactMixin from 'react-mixin';
in almost every single file?
The other answer covers this, but not with valid ES6, so I'm adding my own.
Make a central file to import your react components, in some central react.js file
export {default as React} from 'react';
export {default as Reflux} from 'reflux';
export {default as reactMixin} from 'react-mixin';
Then in the files where you need to use these three, you could do
import {React, Reflux, reactMixin} from './react';
to import all three into your component file.
Create a "base" that declares common imports, then you can import that one file.