**React-Solid** : use of require() from npm or from react-solid

Build a Solid App Solid App Development FAQs
1

The solid-file-client 0.5.0 and 0.5.1 do not build in react-solid due to “null” module not found (the pb do not occur in node and can be solved differently with browserify using the ignore param.
There is a work around building solid-file-client using webpack null-loader.

The problem I uncountered is to test the new solid-file-client.bundle.js in react-solid.
I tested :

  • require(’./solid-file-client.bundle.js’) and it never succeed compiling with a lot of messages like :
    Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
  • finally I decided to test a npm like way --> putting the new solid-file-client.bundle.js in node_modules/solid-file-client/dist/browser/ and use require('solid-file-client').
    The compile succeeded so the package loads successfully in react-solid.

Is it the good way in react-solid to test a package before pushing it to npm ?
Isn’t there a cleaner way to do that ? It seems very tricky.

2

I would like to know the answer to this question and how the webpack external set to null setting impacts downstream requires. But I also wonder, if it wouldn’t make more sense to simply include solid-file-client in a script tag. It exports a SolidFileClient constant that can be used in any scripts loaded after it is loaded. So two script tags: one for the solid-file-client bundle and one for the react bundle. Here’s an example that works out of the box with solid-file-client 0.5.1.

<!DOCTYPE html><html><head><meta charset="UTF-8" />
    <script crossorigin src=
        "https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src=
        "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src=
        "https://cdn.jsdelivr.net/npm/solid-file-client/dist/browser/solid-file-client.bundle.js"></script>
</head><body>
    <div id="LoginButton_container"></div>
    <script>
'use strict';
const e  = React.createElement;
let popupUri = "https://solid.community/common/popup.html"

class LoginButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loggedIn : false };
  }
  render() {
    var label = ( this.state.loggedIn ) ? "logout" : "login";
    return( e(
      'button',
      {onClick:()=>{
          if(this.state.loggedIn){
            SolidFileClient.logout()
            this.setState({loggedIn:!this.state.loggedIn})
          }
          else {
            SolidFileClient.popupLogin({ popupUri }).then( session => {
              alert(`Logged in as <${session}>.`)
              this.setState({loggedIn:!this.state.loggedIn})
            }).catch(e=>console.log("Login failure : "+e))
         }
      }},
      label
    ))
  }
}
const domContainer = document.querySelector('#LoginButton_container');
ReactDOM.render(e(LoginButton), domContainer);

    </script>
</body>
3

What are the steps for me to reproduce this? Are you yeoman-installing a react-sdk application and then npm installing the solid-file-client package?

4

Not knowing anything to react-solid, here are the steps I followed (after trial and errors) :

To use the cra-solid-file-client example, I :

  • copy solid-file-client.bundle.js to /src/
  • used require(./solid-file-client.bundle.js) in solid.js. I made npm install then npm start. Compile did not succeed
  • then copy the new solid-file-client.bundle.js to /node_modules/solid-file-client/dist/browser/ and changed back to require('solid-file-client') in solid.js. Then just npm start and compile succeeded.

Hope it is enough to reproduce the steps.