I want to have a config directory, with every config in a file. So at the start of my react app, everything in the config folder runs. Also if you have a better approach I would be happy to know 😊
For example (/config):
firebase.js
import * as firebase from 'firebase'
import 'firebase/auth'
import 'firebase/firestore'
const firebaseConfig = {
// ...
}
firebase.initializeApp(firebaseConfig)
material-ui.js
import coolThings from 'whatever'
// ...
export theme
You get the idea
Create an index file inside config, and import every config file there. Then import the config directory inside the main app. That way the imported directory will run the index.js (config/index.js), this will run every config file inside the config folder.
Related
Encountered a very weird issue. When trying to import firebase, I got the following error:
./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').
The structure of my project is: A parent folder containing a react client folder. I installed firebase in the parent folder, initialize a firebase app in the firebaseConfig file in the parent folder, and then import it into the react client folder.
I later tried installing firebase in the react client folder and import firebase in it. Weirdly, after I installed firebase in the client folder, doing "npm ls firebase" in the client folder returns empty, even though firebase is indeed in the node modules and package.json in the client folder. I am wondering what caused the problem.
firebaseConfig.js in the parent folder
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
......
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Unfortunately, you've upgraded your "firebase" dependency to 8.0.0 but the "firebaseui" dependency doesn't support it yet. You will have to temporarily downgrade firebase to version 7.24.0 until firebaseui supports the breaking changes in 8.0.0.
Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be update.
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Library's like FirebaseUI authentication
Firebase version I was using Firebase>8.0.0 Line of code I was using import * as firebase from 'firebase/app'; this import works for Firebase<8.0.0 Please go and use this import firebase from 'firebase/app'; if you are using firebase>8.0.0 as of now (4th Aug 2021) things might change on later versions. This is because you are using the wrong line of code, nothing wrong with the system. Go and check the package.json file on your project folder.
Check here package.json
Checking firebase version on package.json file
When I installed firebase, by default it has installed the version of 9.0.0. And I see the mentioned error but when I changed it to 8.9.1 and imported it as below it worked for me.
import firebase from 'firebase/app'
First determine your firebase version:
firebase --version
If you are using version 9, replace this line
import firebase from "firebase/app"
with
import firebase from 'firebase/compat/app'
Reference:
https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/
I currently have firebase and my javascript files, which use firebase loaded through <script>. Clearly, this is not a very good way of doing it.
I want to be able to use webpack with my front end javascript, but I'm facing some issues:
My layout is like this:
user/
index.js
file1.js
file2.js
file1.js and file2.jsare included into index.js but all files use firebase.
My question is do I need to include firebase, and all of my requirements, like firestore, functions and messaging. into every single file, or can I include it once somewhere, to be used throughout all files?
When I include it in every file, I get an error saying that firebase could not be found.
Thanks in advance.
Check out the Firebase package on npm. In the instructions for using webpack, you can simply import the modules you need into file1.js and file2.js.
import * as firebase from 'firebase';
var app = firebase.initializeApp({ ... });
Note that the documentation says to only include the features you need (to not bloat your bundle.js).
// This import loads the firebase namespace along with all its type information.
import * as firebase from 'firebase/app';
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
// In your case, include Firestore in the files you use them in.
import 'firebase/firestore';
I am trying to access a specific directory in javascript. I tried to have access to it using require keyword as shown below
const path = require('../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/');
but when i run the code i get the following error:
Error: Cannot find module '../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/'
please let me know how import or to use a directory in javascript
You can't possibly just import a directory unless there is index.js file within it. And in that index.js file, it should at least contain:
index.js:
import Foo from './Foo.js'
import Bar from './Bar.js'
export {
Foo,
Bar
}
And then you can finally import it:
import {Foo, Bar} from '../../components';
When you point to a directory without specifying the file, the index.js file is imported. I do not think it's possible to import an entire directory. If you want to import all the functions of a directory, you can create an index.js and explicitly export them.
See: node.js require all files in a folder?
you can do this in two different way
consider the following folder structure
-- app/
|- asset/
|- user.js
|- main.js
here main.js you can import the user.js in this way import user from '../asset/user'
other way is installing dotenv using npm i dotenv --save and following way
require('dotenv').config();
import user from './asset/user
I am trying to run a meteor app but keep getting the Cannot find module error when I try to import one of my files.
My folder directory:
/app/client/imports/api/tasks.js
/app/server/main.js
In my main.js I am trying to import tasks.js:
import '../client/imports/api/tasks.js';
This throws the error Error: Cannot find module '../client/imports/api/tasks.js'.
My tasks.js:
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.collection('tasks');
Does anyone know what might be going on?
You can't import a /client based file from the /server side. Files stored under a client directory are only bundled and made available to the client side of the application (the part that runs in a users browser). Files stored under a server directory are only bundled and made available on the server side, running via Node.
Get rid of the /client prefix from your tasks.js reference, to be able to reference the import from both sides. For example:
/app/imports/api/tasks.js
import { Mongo } from 'meteor/mongo';
const Tasks = new Mongo.Collection('tasks');
export default Tasks;
Then in /app/client/main.js or /app/server/main.js, you could reference the tasks.js file like:
import Tasks from '/imports/api/tasks.js';
The problem is in file structure.
Your imports/ folder should be on the same level with client/ and server/.
Setting up a Jest test ('App-test.js') for a Redux action ('App.js') in a directory app/__tests__:
Here's the header of App.js:
jest.unmock('../../modules/actions/App.js')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import * as App from '../../modules/actions/App.js'
In app/ there is a module config.js. This is being imported where it is needed.
The problem is, when I run my Jest tests, such as App-test.js, it is looking for config and not finding it:
FAIL __tests__/actions/App-test.js
Runtime Error
Error: Cannot find module 'config' from 'User.js'
And User.js is importing config like so:
import config from 'config'
User.js is another action being used App.js.
Any ideas?
You should specify the module location, otherwise Node.js will try to guess the location for you, like:
node_modules/config.js
node_modules/config/index.js
node_modules/config/package.json
The problem in your code is the assumption that node will look for the file in the desired location, as you can see in the algorithm I provided in the previous lines.
To fix the issue you have to specify the location inside your User.js file, for example, check the hypothetical file organization:
/
/config.js
/app
/app/User.js
Then, you'd import inside User.js:
import config from '../config.js'
The file config.js is relative to User.js, located in the parent directory.