blencorp / react-lighthouse-viewer Goto Github PK

Error on front-end and console:

Failed to compile...
./node_modules/react-lighthouse-viewer/dist/report-styles.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-lighthouse-viewer/dist/report-styles.css)
Unclosed bracket (754:19)

752 | flex-grow: 0;
753 | flex-shrink: 0;

754 | flex-basis: calc(3 * var(--report-font-size);
| ^
755 | }
756 |
757 |

Fix : remove the below line from css :
file: react-lighthouse-viewer/dist/report-styles.css

initial code :
.lh-audit--load-opportunity .lh-audit__display-text {
text-align: right;
flex: 0 0 calc(3 * var(--report-font-size));
}

final code to update:

.lh-audit--load-opportunity .lh-audit__display-text {
text-align: right;
flex: calc(3 * var(--report-font-size));
}

lh6 is out. its report renderer supports lh 5 (and 4) json just fine. though it has a few new things supported too.

;)

https://github.com/GoogleChrome/lighthouse/releases/tag/v6.0.0

Hello there,

I am trying to use your component with a JSON report generated using the latest version of lighthouse (version 5).

I tried setting it up in different ways, but I am facing issues with the rendering and an error message.

I was wondering, if you are supporting Lighthouse 5? If not, are you planning to do so? And if not also, what would be the steps to support Lighthouse 5, since they had some breaking changes?
I am seriously interested in supporting Lighthouse 5 as a feature.

The error states:

TypeError: " is not a valid URL."

I tried going through the source looking for that error message, or the mounted hook that React complains about, but couldn't find anything.

I would appreciate any clarification you could bring and thanks in advance

Thank you for the work done on the repo. I was trying to figure out how the source code and package dist have some differences. In the source theres a css file thats being loaded but, in the dist its removed and inlined with the template. I tried using yarn transpile to see if it would properly build the dist but, it looks like some things where mainly stitched together? Trying to make a fork with some small changes for use with next.js.

The component does not work. What the conflict in work with styles. Do you know how to solve it?

SyntaxError: Unexpected token .
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/Users/kodix/Documents/lighthhause-git/light-house/node_modules/react-lighthouse-viewer/dist/index.js:33:1)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)

Match the code in react-lighthouse-viewer GitHub repository with the code exists in NPM package

This selector assumes that there are no other <main> elements on the page. If there is, especially one that is high up in the DOM tree, then it breaks.

Is there a way to use fetch to load in a JSON report instead of import, so that the JSON report can be dynamic?

This is a general question, I just added some code that I am using below to share a bit.

Thanks!!

`import React from 'react';
import { render } from 'react-dom';
import ReportViewer from '../../../src/index.js';
import jsonReport from "../../../example/src/report5.json";
import { Component } from 'react';

//console.log(drupalSettings.pfizer_lighthouse);

/**

• App
  */
  class App extends React.Component {

  constructor(props) {
  super(props);
  this.state = {
  report: null,
  loaded: false,
  };
  }

  /**

  • Load articles via Drupal JSON:API.
    */
    componentDidMount() {

    fetch('/sites/default/files/lighthouse-reports/pfpfizeruscom-stage.pfizersite.io-20200512T112713.json?sdasds')
    .then(data => this.setState({ report: data, loaded: true }));
    }

  render() {

   const { report, loaded } = this.state;
  
   if (!loaded) {
       return <p>Loading ...</p>;
   }
   if (report.length === 0) {
       return <p>No results</p>;
   }
  
  
   console.log(report);
  
   return <ReportViewer json={report} />;
  

  }
  }

export default App;
`

Trying to get access to the element, but the ref always returns an undefined.

Thanks for the 2.8 release.
Report not rendering when I'm using <ReportViewer json={JSONREPORTMOB} /> two times on the same page one for desktop report and other for mobile report.
<ReportViewer id="mobile" /> must accept custom id as props or auto-generate id,

From below code I'm getting report of {JSONREPORTMOB} in first tab <ReportViewer json={JSONREPORTDESK} />
**Note: Im not getting error in console but template id is same for both report ** <ReportViewer />
Find code below:

<TabContent activeTab={this.state.activeTab}> <TabPane tabId="1"> <Card> <CardBody> <ReportViewer json={JSONREPORTDESK} /> </CardBody> </Card> </TabPane> <TabPane tabId="2"> <Card> <CardBody> <ReportViewer json={JSONREPORTMOB} /> </CardBody> </Card> </TabPane> </TabContent>

The component is loading. but, CSS is broken. does it require a CSS loader?