Browserify module not found with recursive require (post-Babel transpile) - javascript

I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --
// index.js
import { Header } from './header'
import { render } from 'react-dom'
render(<Header />, document.getElementById('root'));
I also have another file header.js which imports 'react' and creates a simple React class --
// header.js
import React from 'react'
export const Header = React.createClass({
render:() => {
return (
<div>
some header title
</div>
)
}
});
I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.
It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.
For reference, here is an excerpt from my Package.json --
{
"dependencies": {
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.1.18",
"babel-register": "~6.2.0",
"history": "^1.12.0",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "~1.0.0",
"react-tap-event-plugin": "^0.2.1"
},
"devDependencies": {
"browserify": "~11.2.0",
"del": "^2.1.0",
"express": "~4.13.3",
"express-urlrewrite": "~1.2.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "~6.1.1",
"gulp-print": "~2.0.1",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "^1.5.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}

For example, if I import React from 'react' in index.js, everything renders properly
Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.
If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).

Related

React and ArcGIS API-based web-map compilation error

I started building an extremely basic WebMap with React (version: ^18.0) and ArcGIS APIs. I chose AMD modules instead of ES and used NPM as the package manager. I did not choose NPM but it did not install yarn (I used- npx create-react-app-'name') and I kept using NPM.
I've created a Map.js script alongside the default App.js and imported Map.js into App.js.
Issue 1: At first, I did not import the React (with R in upper-case) package into the App.js script but I imported Map into App.js, and normally, I installed the React package in Map.js. However, it threw this common error-
'React' must be in scope when using JSX react/react-in-jsx-scope
Then, I again, injected React into App.js to circumvent the issue (with no logic behind it). It was not showing the jsx error anymore but it created another problem, issue 2-
Module not found: Can't resolve 'Map.js' in 'D:\Workflow\Own\React_apps_GIS\reactmb\react_arc\src
Here, the module couldn't be found, which is a scripting error. I checked it but could not find any but there is obviously a problem. I am seeking the community's help. I am posting the complete Map.js script, below:
Code:
import React ,{useRef,useEffect} from 'react'
import {loadModules} from "esri-loader"
import MapView from esri/views/MapView;
import WebMap from esri/WebMap;
function Map() {
const MapEl=useRef(null)
useEffect(
()=>{
let view;
loadModules(["esri/views/MapView", "esri/WebMap"],{
css:true
}).then(([MapView, WebMap])=>{
const webMap= new WebMap({
basemap:'topo-vector'
})
view= new MapView({
map:webMap,
//center:[88.414, 22.5805],
zoom: 11,
//here, useRef=container
container:MapEl.current
})
})
return()=>{
//close the map view if nothing in the view
if(!!view){
view.destroy()
view=null
}
}
})
return (
//refers to the div style
<div style={{height:500}} ref={MapEl}>
</div>
)
}
export default Map
Packages:
"name": "react_arc",
"version": "0.1.0",
"private": true,
"dependencies": {
"#arcgis/core": "^4.24.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"arcgis-js-api": "^4.24.5",
"esri-loader": "^3.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"

Unable to resolve module 'hooks.js'

Hello,
I am currently trying to display a Leaflet map on a react-native application.
I use the Expo Snack online editor for testing.
I imported the "leaflet" and "react-leaflet" packages:
{
"dependencies": {
"leaflet": "1.8.0",
"react-leaflet": "4.0.0",
"expo-constants": "~13.1.1",
"#expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2"
}
}
but when importing "react-leaflet" in the App.js file, I have the following error:
react_leaflet error (Unable to resolve module 'hooks.js')
Can you help me, thanks.

React Material UI Button component not working

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.
After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.
The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.
Here is the simple Button:
App.js
import {Button} from '#material-ui/core';
export default function App() {
return (
<div className="App">
<Button>Click Me</Button>
</div>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.html
<div id='root'></div>
And here is the package.json file (dependencies only shown here to reduce code length):
{
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
Solved: There was an issue with the dependencies, I learnt that even if you install an npm package you must still go to the terminal in the source code editor and install the dependency into the package.json file. Here is the fixed file that allows the button to be displayed in the browser:
package.json:
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
The line "#material-ui/core": "^4.12.3", has been added so that the package can use the dependency.
try by adding the packages you want manually and then run npm install on the terminal

d3-xyzoom: Scroll(wheel) zoom throwing "d3-xyzoom.js:83 Uncaught TypeError: Cannot read property 'button' of null" when used with webpack

I am using D3V4 with webpack and d3-xyzoom is throwing
d3-xyzoom.js:83 Uncaught TypeError: Cannot read property 'button' of null when I use the wheel on my chart.
Following is the import section of code:
import $ from 'jquery';
import 'bootstrap';
import 'popper.js';
import '../../theme/bootstrap-enisyst.scss';
import 'jquery-ui';
import 'jquery-blockui';
import 'jquery-widget';
import 'jquery-mousewheel';
import d3Tip from "d3-tip";
import * as Papa from 'papaparse';
import * as d3 from 'd3';
import * as d3ScaleChromatic from 'd3-scale-chromatic';
import * as d3xyzoom from 'd3-xyzoom';
import { interpolate } from 'd3-interpolate';
import 'html2canvas';
import log from 'loglevel';
import './eniChartCommon.css';
import './styleEniChart.css';
Object.assign(d3, d3xyzoom);
Object.assign(d3, d3ScaleChromatic);
Object.assign(d3, interpolate);
Following is my package.json dependencies section:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/pro-light-svg-icons": "^5.15.1",
"#fortawesome/pro-regular-svg-icons": "^5.15.1",
"#fortawesome/pro-solid-svg-icons": "^5.15.1",
"#octokit/rest": "^18.0.9",
"bootstrap": "^4.5.3",
"bootstrap-table": "^1.18.0",
"bowser": "^2.11.0",
"d3": "4.2.2",
"d3-interpolate": "^2.0.1",
"d3-scale-chromatic": "^2.0.0",
"d3-tip": "^0.9.1",
"d3-transition": "^2.0.0",
"d3-xyzoom": "^1.5.0",
"diff": "^4.0.2",
"diff2html": "^3.1.15",
"fs": "0.0.1-security",
"github-markdown-css": "^4.0.0",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jquery-blockui": "^2.7.0",
"jquery-mousewheel": "^3.1.13",
"jquery-ui": "^1.12.1",
"jquery-widget": "^0.1.8",
"js-cookie": "^2.2.1",
"jsx": "^0.9.89",
"leaflet": "^1.7.1",
"leaflet-easybutton": "^2.4.0",
"leaflet-fullscreen": "^1.0.2",
"leaflet-zoombox": "^0.5.1",
"license-checker": "^25.0.1",
"loglevel": "^1.7.0",
"offline-js": "^0.7.19",
"papaparse": "^5.3.0",
"popper.js": "^1.16.1"
}
d3-xyzoom.js:83 is
// Ignore right-click, since that should open the context menu.
function defaultFilter() {
return !d3Selection.event.button;
}
I have tried several versions of d3-zoom thinking that might fix the problem but adding d3-zoom as a separate m, module always causes more problems. I have tried several versions of d3-xyzoom but had no success. I know it is an import issue, but I don't know the right combination of imports in order for zoom on scroll to work
Since version 4, d3.js has had a structure of micro packages, for modularity. If you install d3, you get everything, but you can also pick and choose. With regards to the versioning of these micro packages, I am fairly sure that 0.x corresponds to v4, 1.x to v5 and 2.x to the newly release d3 v6.
That means that you have packages that are meant for d3 v6 installed alongside packages for d3 v4. Specifically, d3-interpolate, d3-transition, and d3-scale-chromatic. Consider downgrading these or removing them all together, since they should be included in the regular d3 package.
In d3 v6, a massive change was released; d3.event was dropped. It changed several things, which are well-addressed in this answer. This is probably why your code failed.
In short; d3-transition or some other package required d3-selection, which overrode the installed version of d3-selection to a version that no longer supported d3.event. d3-xyzoom still expects d3.event to exist. Removing these packages should resolve the issue.

Unexpected token import error in while running jest tests

I know this has been asked countless times, but I am not able to fix the problem inspite of following all the SO solutions and suggestions.
I came to know about jest a few days ago and tried to have my hands on it. There is a good tutorial mentioned on DZone about using jest to test react components. However, when I try testing one of the components from the starter directory, I am having this issue,
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at emitTwo (events.js:106:13)
As per suggested in this SO post, I have already installed babel-preset-react and added it to my webpack.config.js file.
Here is my webpack.config.js file, my package.json file , the .babelrc file
Please note that I have already gone through the solutions posted in these SO posts -
Link 1
Link 2
Link 3
which might be apparent from the changes in my .babelrc and webpack files
But I'm not able to fix the issue that I'm having. Please let me know if I am missing something here, since I have spent a good 3-4 hrs searching SO and other forums for any answer and I can't seem to find it.
Update 1: Here is my test file - Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Clock from 'Clock';
describe('Clock',()=>{
it("renders without crashing",()=>{
const div = document.createElement('div');
ReactDOM.render(<Clock/>,div);
});
});
I was trying to follow up that tutorial but could not even install it without errors. As I see it, the tutorial is old, webpack 1 is deprecated, and other packages also undergone changes. You could try my steps, but it may not work for you.
In the starter/CountdownTimer folder run npm install. If it throws
this errors: “Cannot read property 'find' of undefined”, then run npm cache verify and npm install.
Then run npm install –save-dev jest#18.0.0 to install jest.
In the app folder create __tests__ folder in there create app.test.jsx
and Clock.test.jsx.
Add “jest” to the package.json test script.
Change your .babelrc.
Here is how the files look like:
// app.test.jsx
describe('App', () => {
it('should be able to run tests', () => {
expect(1 + 2).toEqual(3);
});
});
// Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
// Note the path.
import Clock from '../components/Clock';
describe('Clock',()=>{
it("renders without crashing",()=>{
const div = document.createElement('div');
ReactDOM.render(<Clock/>,div);
});
});
// package.json
{
"name": "countdown-timer",
"version": "0.0.1",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "jest"
},
"author": "Joyce Echessa",
"license": "MIT",
"dependencies": {
"express": "^4.14.0",
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"foundation-sites": "^6.2.4",
"jest": "^18.0.0",
"jquery": "^3.1.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
// .babelrc
{
"presets": [["es2015"], ["react"]]
}
Run npm test. This worked for me to get tests passing, hope it will help you too.

Categories