We Keep Coding

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"

How can I fix ValidationError of Sass loader?

I was trying to add global scss variables to my Vue project. I found this example Globally load sass. So I created vue.config.js in my root folder of my Vue project then I copy & paste vue.config.js and change the data inport path and then when I am trying to serve my project I am getting this error :
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate
I checked my package.json to just be sure that I have installed node-sass and sass-loader and I found those dependencies :
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.2",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
So I am a little bit confused and I do not know what I am doing wrong. I also know that I can import those .scss variables to every vue component in which i am going to use them but i do not like this solution.
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/style/index.scss";
`
}
}
}
};
Directory structure

Change data to prependData ...see the docs

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
Why am I getting this error??
My webpack.config.js file looks like this...
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
#import "custom";
#import "~bootstrap/scss/bootstrap";

When Sass is precompiled by its own CLI, it processes #imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~
notation with node_modules/ instead.

I had a similar error
File to import not found or unreadable:
node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.

For me, I had to change the way I was importing
#import '../../../node_modules/bootstrap/scss/bootstrap';
Then it works

In Rails 7.0.1, after installing using rails new myapp --css=bootstrap, the same error occured. The problem was solved by:
Replacing the line with stylesheet_link_tag in application.erb by: stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload"
renaming app/assets/stylesheets/application.scss by app/assets/stylesheets/application.bootstrap.scss
Replacing the content by #import '../../../node_modules/bootstrap/scss/bootstrap';

I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:
#import 'bootstrap';
It would work if I just import it like this in my case:
#import "../../../../../bootstrap/scss/bootstrap";
But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:
.pipe(plugins.sass())
to:
.pipe(plugins.sass({
outputStyle: 'nested',
precision: 3,
errLogToConsole: true,
includePaths: ['node_modules/bootstrap/scss']
}))
(notice the includePaths section) and now I can just use
#import 'bootstrap';
In my scss file

I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.
#import "../../../../../node_modules/bootstrap/scss/bootstrap";

I had a similar problem and the fix for me was very basic in the end.
I just had to change "../node_modules/bootstrap/scss/bootstrap"; to "node_modules/bootstrap/scss/bootstrap";.

This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.

If you are having any issue and the answers fail to resolve try this:
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.

I solved the problem by:
remove node_modules
npm install
ng serve
works ;)

I just run npm i bootstrap and it worked.

This is similar to my problem, npx mix fail to import bootsrtap with error;
SassError: Can't find stylesheet to import.
Turns out my application root folder name using "#" that caused npx consider as unusual path and fail to import
npx mix error
Solution:
Rename the folder (remove "#")
Good to go
Hope this helps

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.

Wiredep won't insert bower CSS dependencies

I'm trying to use wiredep to inject bower dependencies. I am confused a little about how it works, and why it is only working for my JS files.
gulp.task('wiredep', function(cb){
gulp.src('./index.html')
.pipe(wiredep())
.pipe(gulp.dest('.'));
});
What does the final line gulp.dest('.') do? wouldn't the destination be my index.html file. Also, this task only seems to inject javascript files. I have in my bower.json dependencies for
"bootstrap": "~3.3.6",
"bourbon": "~4.2.6",
"jquery": "~2.1.4",
"neat": "~1.7.2"
Bootstrap, Bourbon, and neat, all have large amounts of CSS, yet the
<!-- bower:css -->
<!-- endbower -->
remain empty after running gulp wiredep. Why would this be?
bower.json deps look like this:
"dependencies": {
"angular": "~1.4.8",
"bitters": "~1.1.0",
"bourbon": "~4.2.6",
"font-awesome": "fontawesome#~4.5.0",
"jquery": "~2.1.4",
"neat": "~1.7.2"
}

First of all add the official workaround from the bootstrap blog to your project's bower.json file:
"dependencies": {
...
},
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
}
}
For other packages the pattern would be the same but change the path.