4

I'm trying to make a web part with React (not SPFx, just a regular mini React app) for use in SharePoint.

I have done so successfully with version 1.x of react-scripts, but now 2.x is out, with enhancements I want to use (SASS, finally), but it seems it's not compatible with SharePoint? I started with 2.0.3, couldn't get anything to render, and even dumbed down my app to be the following:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

console.log('loaded index.js');

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>Hello World from React.</div>
        );
    }
}

Not only is nothing rendered, the console.log in index.js is not run, and if I set any breakpoints they are not hit.

I can tell the scripts are getting loaded because if I make any changes to to index.js or App.js, I can see the changes in the source map in the browser's dev tools.

I downgraded react-scripts to v.1.1.5, and the app renders and the console.log works. Upgraded to v.2.1.1, doesn't render and the console.log doesn't run.

Has anyone run into this issue or know what's happening here?

1

Finally figured this one out.

It wasn't working for me because, as of the change to CRA 2+, the build process splits the code into a vendor chunk and your app's code chunk, and most importantly embeds a small webpack runtime script into the generated index.html file

which is used to load and run your application.

Since I have been using React "apps" as web parts in SharePoint, I was getting them on to a SharePoint page in one of two ways:

  • create a little .html file with the root div for the app and links to the .css and .js files in the Site Assets library, then adding a CEWP to the SharePoint page and linking to that .html snippet.
  • create a visual web part in VisualStudio, and add the root div and the links to the .css and .js files in the web part .ascx, usually pointing to somewhere in the _layouts folder.

Either way, I was completely ignoring the CRA built index.html, so I didn't have the webpack runtime script, hence why my little web part apps woudn't run.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.