Hi I'm starting with webpack and firebase. Everytime when I do :
import { initializeApp } from "firebase/app";
This is the error:
File structure:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WElcome</title>
<script src="./main.js"></script>
</head>
<body>
Welcome
</body>
</html>
index.js:
import { initializeApp } from "firebase/app";
package.json:
{
"name": "dark",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"firebase": "^9.17.0"
}
}
I already tried to do it all over again but I installed firebase with npm i firebase in this folder, and always gives me the same error. What I'm missing ?
it is very complicated issue it maybe firebase v- 9.17.0 is bugged, or it is The module you're trying to import has a different casing or webpack.config.js. Issue
but for now you can run.
npm un firebase
npm i firebase#9.16.0
After some more consideration I find 2 more solutions :
1 you can import using /compact
import 'firebase/compat/analytics';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Or, use the latest version :
Version `9.17.1 - February 3, 2023`
Moved exports.default fields to always be the last field. This fixes a bug introduced in 9.17.0 that prevented some bundlers and frameworks from building. For these build failures, the error text is: "Default condition should be last one".
Ref : https://firebase.google.com/support/release-notes/js
According to firebase documents: Update imports to v9 compat. In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the “compat” version of each import. For example:
Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import "firebase/database";
import "firebase/storage";
After: version 9 compat // v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
Ref: https://stackoverflow.com/a/72186925
I created the Vue library using vue-cli-service
Package.json
{
"name": "test-lib",
"version": "0.1.0",
"private": true,
"scripts": {
"build-lib": "vue-cli-service build --no-clean --target lib --name test-lib src/init.js"
},
"main": "./dist/test-lib.common.js",
...
In init.js
import Test from './components/test.vue'
export default Test
And imported the component in library like this (test.vue)
<template>
<div>
<sampleText></sampleText>
</div>
</template>
<script>
export default {
props: {
msg: String
},
components: {
sampleText: () => import ('#/components/sampleText.vue')
}
}
</script>
I used this library in the vue project and it's unable to import the dynamic component.
And i can see this test-lib.common.24.js file available in the library dist folder.
Without the dynamic import every thing is working fine.
Is it possible to import component dynamically in vue library? Does it need any web pack config to use dynamic import in vue library?
I have a React app using the Dashjs player. I build it with react-scripts build and the app works fine except that it uses dash.all.debug.js instead of dash.all.min.js.
What did I miss?
looks like dashjs module is exporting the debug file as their main file program:
after running npm install dashjs#4.0.0-npm, i opened ./node_modules/dashjs/package.json
{
"name": "dashjs",
"version": "4.0.0-npm",
"description": "A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers.",
"author": "Dash Industry Forum",
"license": "BSD-3-Clause",
"main": "dist/dash.all.debug.js",
"types": "index.d.ts",
...
}
as you can see, "main": "dist/dash.all.debug.js" is declared as the main entry point
when you import the package:
import React, { Component } from 'react';
import dashjs from 'dashjs';
export default class App extends Component { ... }
the debug version will be bundled in your final artifact
to change that, you can explicit import the min version:
import React, { Component } from 'react';
import dashjs from 'dashjs/dist/dash.all.min.js';
export default class App extends Component { ... }
or open an issue in dashjs repository
I'm having a hard time getting FullCalendar to work properly with ReactJs. The calendar shows up but it does not look correct and passing in arguments to $("#calendar").fullCalendar() does NOT do anything as you can see from the image below. (should have day 6 - 8 highlighted green)
So I started out with create-react-app that just jump starts the project for me with all of the needed dependencies such as Babel and what not.
Then made 2 very simple React classes like so:
import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import 'moment/min/moment.min.js';
import 'fullcalendar/dist/fullcalendar.css';
import 'fullcalendar/dist/fullcalendar.print.min.css';
import 'fullcalendar/dist/fullcalendar.js';
class Calendar extends Component {
componentDidMount(){
const { calendar } = this.refs;
$(calendar).fullCalendar({events: this.props.events});
}
render() {
return (
<div ref='calendar'></div>
);
}
}
class App extends Component {
render() {
let events = [
{
start: '2017-01-06',
end: '2017-01-08',
rendering: 'background',
color: '#00FF00'
},
]
return (
<div className="App">
<Calendar events={events} />
</div>
);
}
}
export default App;
I have no clue where the mistake is so I did what anyone would do and google around to see if someone has already ran into this issue and I came across this short video tutorial on exactly this and still does not work properly.
Here is my package.json file:
{
"name": "cal-test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.8.5"
},
"dependencies": {
"fullcalendar": "^3.1.0",
"jquery": "^3.1.1",
"moment": "^2.17.1",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Iv'e tried everything I could think of and still no luck, help is greatly appreciated.
Thank you so much!
creator of that video here. I'd remove that call to import 'fullcalendar/dist/fullcalendar.print.min.css';, because it's most likely overriding the CSS of the stylesheet before it.
The latest version v4 of Fullcalendar.io now has ReactJS documentation. I would use the React Components recommended by the FullCalendar creators:
https://fullcalendar.io/docs/react
FullCalendar seamlessly integrates with the React JavaScript
framework. It provides a component that exactly matches the
functionality of FullCalendar’s standard API.
This component is built and maintained by Josh Ruff of Sardius Media
in partnership with the maintainers of FullCalendar. It is the
official React connector, released under an MIT license, the same
license the standard version of FullCalendar uses.
Fullcalendar now provides a React wrapper, and it works nicely with Create React App. Instead of importing CSS via Sass, you can import them directly like so:
import "#fullcalendar/core/main.css"
import "#fullcalendar/daygrid/main.css"
I am trying to make ReactJS work with rails using this tutorial. I am getting this error:
Uncaught ReferenceError: React is not defined
But I can access the React object in browser console
I also added public/dist/turbo-react.min.js as described here and also added //= require components line in application.js as described in this answer to no luck. Additionally,
var React = require('react') gives the error:
Uncaught ReferenceError: require is not defined
Can anyone suggest me on how to resolve this?
[EDIT 1]
Source code for reference:
This is my comments.js.jsx file:
var Comment = React.createClass({
render: function () {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.comment}
</div>
);
}
});
var ready = function () {
React.renderComponent(
<Comment author="Richard" comment="This is a comment "/>,
document.getElementById('comments')
);
};
$(document).ready(ready);
And this is my index.html.erb:
<div id="comments"></div>
If you are using Babel and React 17, you might need to add "runtime": "automatic" to Babel config.
In .babelrc config file this would be:
{
"presets": [
"#babel/preset-env",
["#babel/preset-react", {"runtime": "automatic"}]
]
}
I got this error because I was using
import ReactDOM from 'react-dom'
without importing react, once I changed it to below:
import React from 'react';
import ReactDOM from 'react-dom';
The error was solved :)
I was able to reproduce this error when I was using webpack to build my javascript with the following chunk in my webpack.config.json:
externals: {
'react': 'React'
},
This above configuration tells webpack to not resolve require('react') by loading an npm module, but instead to expect a global variable (i.e. on the window object) called React. The solution is to either remove this piece of configuration (so React will be bundled with your javascript) or load the React framework externally before this file is executed (so that window.React exists).
If you are using Webpack, you can have it load React when needed without having to explicitly require it in your code.
Add to webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
"React": "react",
}),
],
See http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin
Possible reasons are 1. you didn't load React.JS into your page, 2. you loaded it after the above script into your page. Solution is load the JS file before the above shown script.
P.S
Possible solutions.
If you mention react in externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js
Make sure you have the line import React from 'react';
Try to add:
import React from 'react'
import { render } from 'react-dom'
window.React = React
before the render() function.
This sometimes prevents error to pop-up returning:
React is not defined
Adding React to the window will solve these problems.
Adding to Santosh :
You can load React by
import React from 'react'
I know this question is answered. But since what worked for me isn't exactly in the answers, I'll add it here in the hopes that it will be useful for someone else.
My index.js file looked like this when I was getting Uncaught ReferenceError: React is not defined.
import {render} from 'react-dom';
import App from './App';
render(<App />, document.getElementById("root"));
Adding import React from 'react'; at the top of the file fixed it.
Now my index.js looks like this and I don't get any error on the console.
import React from 'react';
import {render} from 'react-dom';
import App from './App';
render(<App />, document.getElementById("root"));
Please note I made no change in webpack.config.js or anywhere else to make this work.
import React, { Component, PropTypes } from 'react';
This may also work!
If you're using TypeScript, make sure that your tsconfig.json has "jsx": "react" within "compilerOptions".
I was facing the same issue.
I resolved it by importing React and ReactDOM like as follows:
import React from 'react';
import ReactDOM from 'react-dom';
I got this error because in my code I misspelled a component definition with lowercase react.createClass instead of uppercase React.createClass.
I got this error because I used:
import React from 'react';
while working with React, Typescript and Parcel
Changing it to:
import * as React from 'react';
Solved the problem as suggested by https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-381817548
Sometimes the order of import can cause this error, if after you have followed all the steps above and still finds it hard on you, try making sure the react import comes first.
import React from 'react'
import { render } from 'react-dom'
before any other important you need to make.
The displayed error
after that import react
Finally import react-dom
if error is react is not define,please add ==>import React from 'react';
if error is reactDOM is not define,please add ==>import ReactDOM from 'react-dom';
To whom using CRA and ended up to this question, can use customize-cra and react-app-rewired packages to override babel presets in CRA.
To do this, create a config-overrides.js in the root and paste this code snippet in it.
const { override, addBabelPreset } = require('customize-cra');
module.exports = override(
addBabelPreset('#emotion/babel-preset-css-prop'),
addBabelPreset([
'#babel/preset-react',
{
runtime: 'automatic',
importSource: '#emotion/react',
},
]),
);
And update scripts in package.json with the ones below.
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
I got this because I wrote
import react from 'react'
instead of
import React from 'react'