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"
Related
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.
I'm making a simple snapshot test with Jest and just get this error:
home.test.js
import React from 'react';
import Home from './index';
import renderer from 'react-test-renderer';
it('renders home', ()=> {
const view = renderer.create(
<Home></Home>
).toJSON();
expect(view).toMatchSnapshot();
});
Unfortunately I don't have idea what is the problem here. I thought the test is well written.
Any help would be great.
HOW I SOLVED THE ERROR KEEPING MY TEST FROM RUNNING
Ran into this error, which kept my tests from running
Error Page
After many hours of frustration, in which I deleted the node_modules folder twice and reinstalled and scoured through Stackoverflow and Google without any solution, I decided to create a new CRNA project and see if it would have the same issues.
When I saw the issues didn’t exist in the new repo, I used the following steps to get it to work:
Delete the node_modules folder again
Upgraded my package.json file, with the key changes shown below:
```
{
"devDependencies": {
"react-native-scripts": "1.5.0",
"jest-expo": "^21.0.2",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!react-native|expo|react-navigation|native-base-shoutem-theme|#shoutem/theme|#shoutem/animation|#shoutem/ui|tcomb-form-native)"
]
},
"dependencies": {
"react-native": “0.48.4”,
"expo": "^21.0.2",
"react": "16.0.0-alpha.12"
},
3. The core difference was in upgrading react-native from 0.48.0 to 0.48.4; react-native-scripts from 1.2.1 to 1.5.0 and including the transformIgnorePatterns under the jest option.
NOTE: The portion from *native-base* in the transformIgnorePatterns was included because I used NativeBase in the project.
4. I then added a .babelrc with the following details:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
```
5. Running the tests now give me the result:
Passing Tests
All tests are green
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.
I'm trying to use Vueify in my first Laravel project and I'm not sure as to why it isn't working.
I've installed (via npm) both vueify and laravel-elixir-vueify modules.
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.scripts([
'vendor/vue.min.js',
'vendor/vue-resource.min.js'
], 'public/js/vendor.js')
.sass('app.scss')
.webpack('app.js');
});
app.js
import Vue from 'Vue';
import Chart from './components/Chart.vue';
Vue.component('chart', Chart);
My console is giving me the error: Unknown custom element: <chart> any ideas on what isn't working or what I've missed? I've become a bit confused about what I need to install or how to include things. I've also got a handful of pages which each have their own .js file under /public/js/. I'm not sure if this is good or bad practice with regards to using elixir. But if it's not a bad way to do it ideally I'd want to import the .vue files from /resources/assets/js/components/ to those js files so that I only have to load in the ones which are relevant to each page. But I'm really not sure if that's the wrong way to go about it. Any ideas? I've searched around for answers but nothing seems to have helped me yet.
Just for testing my Chart.vue file looks like this.
Chart.vue
<template id="learnometer-chart">
<div id="myPieChart" style="width:1000px; height:1000px; background-color:red;"></div>
</template>
<script>
</script>
Assuming that you are using Laravel 5.3 and Vue 2.0, you can now compile with webpack.
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(function(mix) {
mix.webpack('app.js');
}
Register your components on your resources/assets/js/app.js:
require('./bootstrap');
Vue.component(
'chart',
require('./components/Chart.vue')
);
const app = new Vue({
el: '#app'
});
Your components should be inside resources/assets/js/components.
The package.json should look something like:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
}
When you have this, run npm install or npm install --no-bin-links if you are on Windows. Now you can run gulp to compile your vue files.
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).