We Keep Coding

No Routes element found in React Router Dom

This is odd. Following along with the tutorial, I'm attempting to create a group of routes. However, the actual Routes element cannot be found:
The BrowserRouter and individual Route elements seem to be working fine, however.
I'm using the latest version of React Router Dom (6.2.1). Any ideas?

It might happen because of conflicting typings the IDE auto-downloads to its configuration folder for better code completion. You can remove the auto-downloaded typings from <IDE system dir>\javascript\typings (shut down the IDE first) and either disable typescript.external.type.definitions Registry key or remove react-router-dom from typescript.external.type.definitions.packages key value
The Registry can be located via: Help > Find action > type Registry...

Appears to be a PhpStorm issue. Viewing the project in VS Code gives no errors on the element, and shows its signature and location:
Whereas the problem persists in PhpStorm even after a restart.

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';

VS Code not suggesting JSX attributes

While developing a ReactJs project, VS Code used to suggest attributes for JSX elements. For instance,
<input type="text"></input>
In this scenario if I wanted to add an placeholder I had to just type in the first few letters and the auto-complete popped up suggesting the events.
However it has stopped working all of a sudden and results in this while I try Ctrl+Space in a JS file.
What I have tried so far:
Uninstalled VS Code and removed the user-specific settings from AppData and removed the .vscode folder from User and then reinstalled.
Added
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
in the settings.json based on this

change the file extension instead of .js || .ts add an x .jsx || .tsx
helps alot if you add a jsconfig.json and install #types/react https://code.visualstudio.com/docs/languages/jsconfig

I had the same problem and this is what solved the problem for me. Just import react from react:
import React from 'react';
Despite this line nowadays isn't required, this makes Vscode recognize somehow and suggest jsx again.

Make sure to check that the "select language mode" tab on the bottom right of the window shows "Javascript React" and make sure that you've installed and enabled the ES7 React/Redux/GraphQL/React-Native extention.

WebPack sourcemaps confusing (duplicated files)

I decided to try out WebPack on a new project I'm spinning up today and I'm getting really strange behavior from the sourcemaps. I can't find anything about it in the documentation, nor can I find anyone else having this issue when skimming StackOverflow.
I'm currently looking at the HelloWorld app produced by Vue-CLI's WebPack template -- no changes have been made to the code, the build environment, or anything.
I installed everything and ran it like so:
vue init webpack test && cd test && npm install && npm run dev
Looking at my sourcemaps, I see the following:
This is a hot mess. Why are there three version of HelloWorld.vue and App.vue? Worse yet, each version has a slightly different version of the code and none of them match the original source. The HellowWorld.vue sitting in the root directory does match the original source, but what's it doing down there instead of in the ./src/components folder? Finally, why isn't there a fourth App.vue that has the original source for it?
As far as I can tell this may have something to do with the WebPack loaders. I've never gotten these kinds of issues with any other bundler, though. Below is an example of the exact same steps using the Browserify Vue-CLI template:
No webpack:// schema, only one copy of every file, the files actually contain the original source code (kind of important for source maps), no unexpected (webpack)/buildin or (webpack)-hot-middleware, no . subdirectory,.... just the source code.

I haven't worked with Vue so can't really describe how exactly this is happening but it seems to be related to Vue Loader. Looking at the documentation I did not really find anything that clarifies why it would create three different files for one component. But it does seem logical considering that a .vue file might contain three types of top-level language blocks: <template>, <script>, and <style>.
Also, looking at two of those files you do see a comment at end of each file that suggests it was modified in some way by a Vue loader. Either this
//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler
or
//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-style-loader!./node_modules/css-loader
The third file is different but it still does have code that identifies it as being modified by Vue loader. Here is some of that code
function injectStyle (ssrContext) {
if (disposed) return
require("!!vue-style-loader...")
}
/* script */
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/..."
/* template */
import __vue_template__ from "!!../../node_modules/vue-loader/..."
/* styles */
var __vue_styles__ = injectStyle
The document also says this:
vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module:
Which explains why you might not see the same type of behaviour with other bundlers.
Now, This might not be the answer you were looking for but just wanted to share what I had found.

This is actually a feature of webpack.
webpack has HMR (Hot Module Reloading). If you look in your network tab, go ahead and make an update to your HelloWorld.vue file. You'll see a js chunk come thru as well as an updated JSON manifest. Both of these will have a unique hash at the end for each time you make a change to the application. It does this so the browser does not have to do a full reload.
For a better explanation of this I would highly recommend reading through https://webpack.js.org/concepts/hot-module-replacement/

How to import poorly named libraries?

Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.

It's the IDE issue. Please follow WEB-25805 for updates