We Keep Coding

react-beautiful-dnd will not compile

I have had react-beautiful-dnd installed and functional for a while and out of nowhere I am now getting an error from node_modules about create-react-app being unable to compile the file position.js in the react-beautiful-dnd package. I have looked into breaking changes being pushed to their repo but nothing is different 2 months back, I invalidated my cache and restarted (on webstorm) nothing, finally I deleted my node_modules and reinstalled them but still the error occurs.
It seems to be rightly trying to compile the file as javascript given its extension however the code seems to be Typescript, I looked at the repository and indeed github reports it to be 100% javascript but most of the files I saw including the snipped above seem to use Typescript. I was under the impression that typescript could not be directly run from a javascript file am I incorrect? What could be causing the error?
Thank you

To use import type, you should place type before the curly brackets:
import type { Position } from 'css-box-model';
Besides, if you want to import the type definition in 'css-box-model' as well as its methods or constants, import them separately:
import { constant } from 'css-box-model';
import type { interface } from 'css-box-model';

Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

I type:
npm test
and I get:
It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.
I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.
This is the repo/branch of this question.
When I type npm start. Everything flows swiftly and with no errors.

The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.
Here is how I fixed it for my react application.
Install jest-canvas-mock as below .
npm i jest-canvas-mock
Then go to setup file like setup-tests.js and import jest-canvas as below .
import "jest-canvas-mock";
Now run test, you should not get errors any more.

I solved it by following this instructions.
Thanks CherryDt.

Installing npm i jest-canvas-mock
and Importing import "jest-canvas-mock" in set-up file; works for me

yeoman and rxjs - unrecognized import path

I started project using Yeoman generator and i want use RxJS. I use js only. I can't import Observable class. I tried
import {Observable } from 'rxjs/Observable';
and I'm getting error:
Uncaught TypeError: Failed to resolve module specifier "rxjs/Observable.js". Relative references must start with either "/", "./", or "../".
How to fix it?

You need webpack. Gary Simon explains it very clearly in this tutorial https://coursetro.com/posts/code/147/How-to-Install-RxJS---Setting-up-a-Development-Environment

You can also use parcel to handle this issue quickly, check out the simple installation guide here

Angular - Cannot find name CookieService

I've installed ngx cookie in my angular project, but unfortunatelly It's not recognized in my app.. I don't know what to do..
I saw in my node_modules folder ngx-cookie is there, but somehow it's not recognized in my app..
Here is my node_module:
It's also in my package.json
I worked with ngx-cookie before and I never had any issue, I simply used commands like this (In case I want specific version):
npm install ngx-cookie#2.0.1
And to latest version I used this command:
npm i ngx-cookie
But when I try to use it in my project it gaves me an error:
Any kind of help would be awesome
Thanks guys
Cheers!

You need to add CookieService in your module with CookieModule.forRoot() and as an import at the top of the page using import { CookieService } from 'ngx-cookie';

How can I use babel to transpile web source code and be able to deploy code on a server like the one provided by github?

Hello and thank you for reading me.
I would like to deploy the aplication to GitHub Pages web server.
However, when I try to use the JavaScript it reports:
SyntaxError: import declarations may only appear at top level of a module
So then the Developer Tools reports that the errors are the imports:
import CoreUtils from 'base/core/core.utils';
import LoadersVolume from 'base/loaders/loaders.volume';
import HelpersStack from 'base/helpers/helpers.stack';
import HelpersLut from 'base/helpers/helpers.lut';
import CamerasOrthographic from 'base/cameras/cameras.orthographic';
import ControlsOrthographic from 'base/controls/controls.trackballortho';
I have read that by defult Babel does not delete the imports and transpile the code.
I tried to fix it by myself reading:
ES2015 import doesn't work (even at top-level) in Firefox
SyntaxError: import declarations may only appear at top level of a module
ES2015 module import and export syntax error
Even:
https://github.com/framework7io/Framework7-Vue-Webpack-Template/issues/10
The fact is I have red the answers and some talk about editing the babelrc config file.
Somebody could help me please?

You can not just copy paste uncompiled code to be deployed:
1- Compile the example code:
yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples
2- In the dist directory, find the example you are interested in
3- Deploy the example
Hope that helps...