Develop Reference

How to debug "Cannot access X before initialization" errors?

This is part of my real code:
import { Tree, Text } from '#List'
import Upsert from './Upsert'
import { EntitySeo } from '../../Seo/Exports'
const filters = <>
<Text
column="Title"
placeholder="Title"
/>
</>
...
And my Vite React application loads perfectly fine.
But when I change in some files, the HMR complains that:
react_devtools_backend.js:4026
ReferenceError: Cannot access 'Text' before initialization
at Tree.jsx:6:6
overrideMethod # react_devtools_backend.js:4026
warnFailedFetch # client.ts:28
(anonymous) # client.ts:333
await in (anonymous) (async)
fetchUpdate # client.ts:320
(anonymous) # client.ts:74
handleMessage # client.ts:72
(anonymous) # client.ts:45
react_devtools_backend.js:4026
[hmr] Failed to reload /src/Panel/Menu.jsx.
This could be due to syntax errors or importing non-existent modules. (see errors above)
I don't know how to debug this. What systematic steps can I take to find out the root of the problem. Because import { Text } from '#List' is lexically in previous lines to its usage.

For anyone getting here, I found this solution and it worked for me.
Basically this error has two main reasons.
Either you have lexical problem (literally defining something after you have used it) in which case you always get error
Or you have circular dependency. A imports B and B imports A.
My case was the second case and it was working fine in the first load of my web app, but for HMR it would fail.
I searched and found this valuable tool called madge.
I installed it and found all of my circular dependencies and once I resolved them, I no longer saw this error.

Migrating to Vite: Uncaught TypeError: Cannot read property 'attrs' of undefined

I am trying to migrate a big app from create-react-app to Vite.js for reasons of performance in the dev environment.
I followed this guide: https://phelipetls.github.io/posts/migrating-from-cra-to-vite/
This is the detailed error:
Uncaught TypeError: Cannot read property 'attrs' of undefined
at node_modules/styled-bootstrap-grid/dist/components/Container/Container.js (Container.js:68)
at __require2 (chunk-VZ7BJMYF.js?v=f5540ad4:17)
at node_modules/styled-bootstrap-grid/dist/components/Container/index.js (index.js:27)
at __require2 (chunk-VZ7BJMYF.js?v=f5540ad4:17)
at node_modules/styled-bootstrap-grid/dist/index.js (index.js:53)
at __require2 (chunk-VZ7BJMYF.js?v=f5540ad4:17)
at dep:styled-bootstrap-grid:1
node_modules/styled-bootstrap-grid/dist/components/Container/Container.js # Container.js:68
__require2 # chunk-VZ7BJMYF.js?v=f5540ad4:17
node_modules/styled-bootstrap-grid/dist/components/Container/index.js # index.js:27
__require2 # chunk-VZ7BJMYF.js?v=f5540ad4:17
node_modules/styled-bootstrap-grid/dist/index.js # index.js:53
__require2 # chunk-VZ7BJMYF.js?v=f5540ad4:17
(anonymous) # dep:styled-bootstrap-grid:1
injector.js:239
How could I debug this? Any tip?
Thanks in advance!
M

It seems a CommonJS syntax error because vite does not support CommonJS syntax. You can try to use vite plugin vite-plugin-commonjs
BTW,
https://github.com/originjs/webpack-to-vite
This is a github project that I found when I searched for error messages when I was converting an old project. It lists some conversion items and error repair methods. It can even convert an old project to a vite project with one click. It’s great, I recommend it!

Getting error while building ConnectyCube javascript demo app

I am developing a dating app in NativeScript angular. I want to add connectycube messaging plugin in my project. I got a demo app which is in JavaScript from GitHub repository. When I try to run it, it throws an error :
ERROR in ../node_modules/nativescript-connectycube/lib/videocalling_conference/cubeConferenceClient.js 12:21
Module parse failed: Unexpected token (12:21)
You may need an appropriate loader to handle this file type.
DEVICE_INPUT_TYPES = DEVICE_INPUT_TYPES
CALL_TYPES = CALL_TYPES
# ../node_modules/nativescript-connectycube/lib/cubeMain.js 49:31-88
# ./services/connectycube-service.js
# ./app.js
# multi #babel/polyfill ./app.js
If I just add this plugin in my project and build, it always throws the same error. How do I solve it?

You should add '#babel/plugin-proposal-class-properties'

Javascript Vue import from # symbol

I'm trying to understand how this import from # I can't run npm run dev because the module is not found. I think I'm missing something, below are the screenshot and the errors.
As you can see Module not found because of #
Here is my route.js that has # .

Angular v5 issue compiling Bootstrap4 styles

I am trying to use Bootstrap4 for one of my project; however, when I set up my project with angular-cli following this tutorial (https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1), I am getting this error in the terminal:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
at error (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:37:11)
at Function.browserslist.checkName (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:320:18)
at Function.select (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:438:37)
at /Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:207:41
at Array.forEach (<anonymous>)
at browserslist (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:196:13)
at Browsers.parse (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:44:14)
at new Browsers (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:39:28)
at loadPrefixes (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
at plugin (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
at LazyResult.run (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:228:27)
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
3:10-186
# ./src/styles.css
# multi ./src/styles.css
I've used Bootstrap before perfectly, so I do not know if there is an issue with the new beta version released one week ago.
Thank you!

There is an error with the newest version of Bootstrap4. If you want to know how to fix it please visit: https://github.com/angular/angular-cli/issues/9020