Just migrated an application from react to Remix and I'm getting an error which doesn't help me to debug.
I have a page that imports a custom component:
import SimGraph2 from "~/components/similarity/SimGraph2"
The complete contents of the custom component are as follows:
export default function SimGraph2(props:any) {
return (
<div></div>
)
}
When I add the component to my page like so:
<SimGraph2></SimGraph2>
I get the following error (in the browser):
Error: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.
Check this link for more details:
https://remix.run/pages/gotchas#server-code-in-client-bundles
at invariant2 (invariant.js:13:11)
at RemixRoute (components.js:176:3)
at renderWithHooks (react-dom.development.js:14985:18)
at mountIndeterminateComponent (react-dom.development.js:17811:13)
at beginWork (react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
at invokeGuardedCallback (react-dom.development.js:4056:31)
at beginWork$1 (react-dom.development.js:23964:7)
at performUnitOfWork (react-dom.development.js:22779:12)
When I take the component out of the page, everything starts working again. Given that there is no server-side stuff going on, I don't think this error is being reported correctly. But I also have no idea where to look to fix this now. Any help appreciated.
Update (2022-09-30):
Right before the routeModules error this shows up in the console:
Uncaught SyntaxError: Identifier 'React' has already been declared (at index-UZP4PAJK.js:9564:5)
Nowhere in my code do I declare React explicitly, so I'm not sure where this is coming from.
Related
In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
Google pagespeed is giving error "cloned graph missing node". I have used styled components to eliminate render blocking resource . What does this error mean?
I had the same error. In my case there where faulty script and link Tags - for some reason the src and href attributes where empty. By removing those Tags I fixed the issue.
To look deeper into the reason behind this error you can find the code where the error is thrown here
https://github.com/GoogleChrome/lighthouse/blob/fa70748c46fc1fb4236417ecb8848f965cd1613f/lighthouse-core/lib/dependency-graph/base-node.js
const clonedThisNode = idsToIncludedClones.get(this.id);
if (!clonedThisNode) throw new Error('Cloned graph missing node');
return clonedThisNode;
I wrote a test to ensure a slideout panel closes in my selenium tests using node js. Whenever I close the panel I use the condition elementIsNotVisible. However an error is thrown, noSuchElementError. This error is technically correct because the element should no longer be on the page, but shouldn't elementIsNotVisible be correct as well?
Test.js file:
await driver.wait(until.elementIsVisible(testPage.addAllAnnotationsButton(driver)), 20000);
await testPage.exitGeneAnnotationsButton(driver).click();
await driver.wait(until.elementIsNotVisible(testPage.addAllAnnotationsButton(driver)), 20000);
Page.js file:
const testPage = {
addAllAnnotationsButton: driver => driver.findElement(By.css(testPage.addAllAnnotationsButtonSELECTOR))
}
Error message(Note- Error message is thrown on the line where elementIsNotVisible is called):
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"div.slideout.opened:nth-child(6) button.ui.button.medium:nth-child(2)"}
Edit 1: Please note, I have tried using stalenessOf and I still receive the same error.
As you have mentioned that when you close the panel, you use the condition elementIsNotVisible :
Here once you have closed the panel , the respective web element is not present in DOM. That is the reason you are getting NoSuchElement exception.
Suggestion : Use invisiblityofElement instead of elementIsNotVisible.
Though there are many reasons behind NoSuchElement Exception, one of the most common is try to interact with element/elements present in frame/iframe without switching the focus of web driver.
Hope this will help.
I am creating a Yeoman Generator, which up until this point has been working correctly. My index.js runs correctly in my app folder, generating the initial structure. In that file, I frequently use this.fs.copy() and this.fs.copyTpl(), and both work fine. Now, I am in the process of creating a subgenerator which extends yeoman.generators.NamedBase as is required from reading the documentation here.
My file structure appears to be correct according to the documentation on the same page I linked to above. It is like so:
├───package.json
├───app/
│ └───index.js
└───view/
└───index.js
└───templates/
└───views/
└───view.html
Here is the code I am attempting to use to generate this new "view" in my project, located in the index.js in the view directory.
'use strict';
var yeoman = require('yeoman-generator');
module.exports = yeoman.generators.NamedBase.extend({
copyFile: function() {
this.fs.copyTpl(
'views/view.html',
'app/views/'+this.name.toLowerCase()+'.html',
{ name: this.name.toLowerCase() }
);
}
});
I ran yo {generatorname}:view helloWorld expecting it to create a new file based on the view.html template, which is the following file, very simply:
<p>This is the <%= name %> view.</p>
When I ran that command, I got the following error.
events.js:85
throw er; // Unhandled 'error' event
^
TypeError: Cannot read property 'toString' of null
at copy.process (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy-tpl.js:11:33)
at applyProcessingFunc (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:12:16)
at EditionInterface.exports._copySingle (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:52:24)
at EditionInterface.exports.copy (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy.js:22:17)
at EditionInterface.module.exports [as copyTpl] (/Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/node_modules/mem-fs-editor/actions/copy-tpl.js:9:8)
at module.exports.yeoman.generators.NamedBase.extend.copyFile (/Users/woodruffjb/dev/yeoman/{generatorname}/view/index.js:7:11)
at /Users/woodruffjb/dev/yeoman/{generatorname}/node_modules/yeoman-generator/lib/base.js:408:16
at processImmediate [as _immediateCallback] (timers.js:358:17)
I attempted to see if the issue was that this.name was undefined or null, but when I did a console.log(this.name) I got the correct response, which was helloWorld. After a lot of googling the only stuff I could find on that error is for other things completely unrelated to what I am attempting to do, including Atom packages and Node.js server code.
All I can think of is that I'm somehow using this.fs.copyTpl() incorrectly? However, I am using it exactly the same as I use it in my app/index.js file to do the initial project setup. After all my searching I am stuck with this issue. According to the documentation on that function located here I seem to be doing it right. Anybody know my error?
Chances are 'views/view.html' is not found on disk.
This is because every this.fs methods won't magically resolve your paths. The safe way is to always provide absolute path. In your case you want to copy the file located in your template directory, so you'll use this.templatePath('views/view.html') to get the absolute path to it.
I just started trying out Derbyjs, and I already ran into a problem. I can't find any support for this error, and most likely is some dumb mistake i'm making.
I'm trying to render a view, following the example from the www.derbyjs.com documentation.
My app is as simple as this:
var app = require('derby').createApp(module);
app.get('/', function (page, model) {
page.render('home');
});
My views are composed by two files.
"index.html"
<import: src="home">
<Body:>
Default page content
"home.html"
<Body:>
Welcome to the home page
I get the following error whenever the page is rendered:
TEMPLATE ERROR
Error: Template import of 'home'... ...can't contain content
As you can see, it is a very simple example. What am I missing?
I get that error even if I have the "home.html" file empty.
Well, I got the answer from one of the developers.
It seems like there was a subtle bug in the Template Parser that probably has already been fixed.
Having a whitespace or linebreak in front of
<import: src="home">
was causing the parser to raise the error. Writing
<import: src="home"><Body:>
solved the issue.