While setting up a new react web app project, and after installing react-router-dom v^6.8.0, the moment I used NavLink imported from react-router-dom like so:
<NavLink>
<MyCustomJsx />
</NavLink>
The app would crash saying:
Unexpected Application Error! _ref is undefined
After checking the console:
React Router caught the following error during render TypeError: _ref is undefined, and in a different, second log: The above error occurred in the <Link> component: Stacktrace here
Googling this yielded nothing, as there are so many posts and questions about react's ref, the HTML ref being undefined but not about this underscore-ref: _ref. Removing the <NavLink> gets rid of the error... Any ideas?
After messing around for while, by accident I provided the to prop, to NavLink with a string value like this:
<NavLink to="/downloads">
<MyCustomJsx />
</NavLink>
then the error disappeared and the app started. So _ref being undefined when you don't provide the to prop I guess.
Related
When I change HTML in template tag in a Vue + Vite project, I'm getting an error:
ReferenceError: can't access lexical declaration 'ComponentName' before
initialization
and
[hmr] Failed to reload /src/views/ComponentName.vue. This could be due
to syntax errors or importing non-existent modules. (see errors above)
This is true only for some components/views and only regards template, the script and style tags don't cause the erorr to happen. I cannot find any regularity in this, like it only affects a random number of components.
Summary
I feel like I've hit my head against a wall too many times trying to figure out where I may be going wrong. I have a simple piece of typescript code:
import FormDataI from 'formdata-node'
const c = new FormDataI()
export { c }
That im trying to compile down to umd using rollup and typescript. For some reason, I cant seem to get it to compile correctly and instead receive an error message:
[!] Error: 'default' is not exported by node_modules/formdata-node/lib/FormData.js, imported by index.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
index.ts (1:7)
Any suggestions as to where I may be going wrong? Here is a sample project that throws the error.
Things I've tried
Playing with various typescript settings such as esModuleInterlop
Playing with the commonjs properties such as requireReturnsDefault
Stepping through the rollup code hoping to find the import error. It appears to not notice the export from formdata-node which is exported using module.exports.default and module.exports
UPDATE
In the case of the above situation, I could simply set it as a global/external since FormData is supported in the browser natively. The question is, why does this error appear at all though?
I'm running into an issue using the npm module "sqlite".
When I use const db = require('sqlite') I am able to call db.all(query) from one of my express routes successfully.
However, switching to import db as sqlite is causing the following error:
Property 'all' does not exist on type 'typeof import("/Users/admin/Documents/code/node-rss/node_modules/sqlite/main")
Does anyone have any idea what the issue could be?
Sorry, I tried Googling around but couldn't figure it out.
I have seen online plenty of examples and tests using React and typescript where they issue something like this:
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world!!</h1>, //or any other valid html snippet
document.getElementById('root') as HTMLElement
);
However, when I try to reproduce those multiple examples in my machine, I get, first a highlight error from VS code, and then when I try to bundle I get this error:
TS2686: 'React' refers to a UMD global, but the current file is a
module. Consider adding an import instead.
If instead of putting the HTML as argument of the function I write a my SimpleComponent.render(), the bundle will be produced without errors.
What is wrong with that code snippet?
Try to add import * as React from 'react'. <h1> is React component (React.createClass('h1') after transpile JSX to JavaScript), but you have imported only ReactDOM.
I get the following error when trying to do server-side rendering with components that reference window. For example when I include slick-carousel (https://github.com/kenwheeler/slick) I get the following error:
var Slick = window.Slick || {};
^
ReferenceError: window is not defined
I know its because window is not defined when trying to do SSR, but don't know what the best strategy is to avoid the error.
Basically components should not depend on DOM. Only, some hook methods such as componentDidMount can, where you use .offsetHeight and modify style or whatever. That's why react and react-dom packages are separated.
Instead of passing object by window.XXX, think about using decent dependency solution like require.