When a component errors in storybook you only get the line number where it died in the main.iframe.bundle.js file. How can I get it to give me the line number in the original source file? Is there an option to have it generate & use some kind of sourcemap?
Are you using typescript ? Are you using React or something else ?
On my storybook, I use React with Typescript. If I put an error like that:
export function BookList (p: BookListProps) {
// ...
throw new Error('hey')
return (
//...
);
}
I have this error embed in the document (is that what you meant ?):
But I do have something useful in the console:
When clicking on the link, it open the sources panel in chrome dev tools.
Related
I'm trying to use a web API in my Preact app and can't seem to find a workaround for this error
Build [=================== ] 93% (10.2s) after chunk asset optimization
ReferenceError: window is not defined
method: UqHU
Stack:
{
"fileName": "D:\\preact-app\\build\\ssr-build\\ssr-bundle.js",
"lineNumber": 1,
"functionName": "Object.UqHU",
"methodName": "UqHU",
"columnNumber": 93549,
"native": false
}
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.
Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"
Alternatively use "preact build --no-prerender" to disable prerendering.
See https://github.com/preactjs/preact-cli#pre-rendering for further information.
I have tried "if (typeof window !== "undefined")" but still getting the same error. Commenting out the code or using --no-prerender solves it
The problem came from the import of axios, which depends on the "form-data" library and is not compatible with Preact prerendering as far as I understand. I chose to use fetch instead of axios to fix this but rschristian gives more solutions in this post: https://github.com/preactjs/preact-cli/discussions/1784
preact-cli prerenders your app in Node, where browser globals (such as window) do not exist.
If you've added a window check but are still getting the same error, that means you have other code also trying to access window. Each offending use will need to be wrapped in a window check if you want to prerender your app.
If you want to make a discussion on the preact-cli repo and provide your app, I can try to take a look.
Edit: The issue is in an upstream dependency of axios, form-data. This has an unsound browser vs Node check, meaning any use of axios at all will throw an error. The simplest solution would be to patch form-data/lib/browser.js with the following snippet:
module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;
https://github.com/preactjs/preact-cli/discussions/1784
Barrel/index files seem to create issues when used with next.js. It doesn't seem established if it's purely a webpack issue or both webpack and next.js
According to this issue tree shaking stops working if we use barrel files. I also created a small repo where I have an issue with an index file. Not sure if it's a tree shaking issue.
Steps to reproduce the issue:
npm install
npm run dev
in browser, visit http://localhost:3000/about-pro, expect to see blank page with errors or warnings in browser's console
go to server's console(where you run npm run dev)
see an error of sort "Module not found: Can't resolve 'fs'" (1) (2) (3)
1- this comes from the await serialize in getAboutPageData file. Which itself is only called within getStaticProps
2 - googling for this issue, you'll find solutions such as modifying next.config.js file. It still doesn't work. Feel free to uncomment the next.config.js file and see for yourself
3 - to "solve" the issue, go to about-pro.tsx, in the imports, import AboutPage from its own file instead of from the barrel/index file
If I only import getAboutPageData from the barrel/index file, then it works fine. But as soon as I import e.g. AboutPage from it, it starts throwing unrelated issues.
Can I continue using barrel/index files with next.js and if yes, is there a simple and intuitive way to do that?
The issue is not in the barrel files themselves but in the library that you're using combined with barrel files.
If you take a look at the readme file https://github.com/hashicorp/next-mdx-remote#examples you can find a warning:
IMPORTANT: Be very careful about putting any mdx-remote code into a separate "utilities" file. Doing so will likely cause issues with nextjs' code splitting abilities - it must be able to cleanly determine what is used only on the server side and what should be left in the client bundle. If you put mdx-remote code into an external utilities file and something is broken, remove it and start from the simple example above before filing an issue.
So in order to make your code work you need to remove the export of getAboutPageData from your barrel file, like this:
export { default as AboutPage } from './AboutPage';
// export { default as getAboutPageData } from './getAboutPageData';
and move the code that uses the library inside the about-pro.tsx file.
import { AboutPage } from '../modules/about';
import { serialize } from 'next-mdx-remote/serialize';
const AboutPro = (props) => {
return <AboutPage {...props} />;
};
export const getStaticProps = async () => {
const serializedContent = await serialize(`# Header1`);
const data = serializedContent;
return { props: {} };
};
export default AboutPro;
I think the issue is that the modules imported in barrel files are executed both client and server side. Probably removing side effects from the barrel file could solve the issue, but I don't know enough about Next.js to be able to do it correctly.
I have an old ASP.NET solution that I have introduced Aurelia to. In some aspx pages I am starting Aurelia, and my main.ts looks like this:
export function configure(aurelia) {
aurelia.use
.basicConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot('/Controls/Warehouse/ProductPurchaseSuggestion/AureliaSource/app.js'));
}
In this manner, everytime we use Aurelia, we have to start it up like this.
I was just composing in my first template and had to write this:
<compose view-model="/Controls/Warehouse/ProductPurchaseSuggestion/AureliaSource/mergePopup" model.bind="{ demo: 'test' }"></compose>
To compose it in. I would have thought that setRoot would make it possible for me to write:
<compose view-model="mergePopup" model.bind="{ demo: 'test' }"></compose>
If I do it like in the last example here (how I want it to work), then I get the following error message in the console: Uncaught (in promise) Error: No view model found in module "mergePopup".
Is there any way of being able to do it in this manner?
I was trying to port the euroscipy2014 tutorial (which is also the base for the ipython cookbook) to the newer ipywidget API. I succesfully converted 3 of the 4 notebooks following the directions I found on the relative ipython documentation but i'm having troubles in porting the 3rd notebook (03_custom.ipynb).
I changed the js code from:
%%javascript
// We import the WidgetManager.
require(["widgets/js/widget"], function(WidgetManager){
// We define the NumberSelector view here.
var NumberSelector = widget.DOMWidgetView.extend({
// Function for rendering the view.
render: function(){
to:
%%javascript
// We import the WidgetManager.
require(["widget"], function(WidgetManager){
// We define the NumberSelector view here.
var NumberSelector = widget.DOMWidgetView.extend({
// Function for rendering the view.
render: function(){
using require(["widget”] … instead of require(["widgets/js/widget … and widget.DOMWidgetView.extend instead of IPython.DOMWidgetView.extend
but when testing the widget at the code cell 4 I have (log from the js console):
Couldn't create a view for model id '8727d6f51f804c7aa582b3d95b3c630d' -- Error: Class NumberSelector not found in registry (…)
I guess the last line in the js code:
WidgetManager.register_widget_view('NumberSelector', NumberSelector);
didn’t worked. (maybe .register_widget_view is no more a valid call).
Have you any idea on how to fix this? thanks!
I opened an issue here but i thought the proting of such API can be a topic of general interest, so i'm posting a question here as well.
https://github.com/rossant/euroscipy2014/issues/2
I've been writing a custom script for QuickBase, which requires some date manipulation. I decided to use moments.js and, since I'm using it within quickbase, I am loading moments.js dynamically, using $.getscript. I've done this process before with other plugin (jquery.md5.min.js), and this works correctly.
The problem is, even though moment.js is read correctly, when I try to use it (for instance, see the console.log() I added for debugging, I get an error message telling me that "moment is not defined".
I know moment.js is being read because I already had it dumped into the console after loading, and I'm trying to use its functions only after it is loaded via the asynchronous methods. I have also played with a few simple jsfiddles just to make sure I was calling it correctly. I also checked several times the url and it is correct. The rest of my code is also correct (if I comment out the lines with moment(), it works as expected).
$.getScript(domain + dbid_app + urlMoments)
.done(function(script, textStatus) {
rightNow = moment();
dfd.resolve(); // Resolve when the script is finished loading.
console.log("moments.js has finished loading.\n\n" + textStatus);
console.log(rightNow);
})
.fail(function( jqxhr, settings, exception ) {
console.log( "Triggered ajaxError handler." );
});
How do I call the moment() function? When running the fiddle, and after looking at many online examples, it is as simple as: var myTime = moment();, but this is not working inside of my script. Is there a chance that, even after loading moments.js with $.getscript(), it was not executed? From what I can see on the source code of moments.js, the factory function should be automatically called, shouldn't it?
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.moment = factory()
}
One last thing: the url points to the QuickBase code page I created with moments.js. This is also how I'm using jquery.md5.js without any problems.
It looks like your issue might be caused by Quickbase loading a different version of moment.js already. Specifically, Quickbase forms are using Moment 2.8.4 in some capacity and it is being loaded using RequireJS. Following Moment's example for using RequireJS I was able to get a moment object with the following code:
require(['moment'], function(){
moment();
});
rightNow = moment();
I hope that helps you solve your problem.