Error resolving module specifier: react while doing dynamic import from API

user_3201336 0
Viewed 1383

I am trying to dynamically import react component library from API. The js file is fetched succesfully. The babel transpilation has happened successfully too. If I dynamically import the Dummy.js file from localhost like import Dummy from './components/js/Dummy.js', it works. However API import fails with below error. The same error occurs with react lazy too. I basically want to dynamically load the lib and publish events to it. I am newbie to react and front-end development. Please excuse if this is too silly!.

Error resolving module specifier: react

My App.js

import React, { lazy, Suspense } from 'react';
import './App.css';
import ErrorBoundary from './ErrorBoundary';

class App extends React.Component {

render(){

    const loader = () => import( /*webpackIgnore: true*/ `https://example.com/Dummy.js`);
    const Dummy = ReactDynamicImport({ loader });


    const LoadingMessage = () => (
      "I'm loading..."
    )

    return (
    <div className="App">
      <h1>Simplewidget</h1>
      <div id="simplewidget">
      <ErrorBoundary>
      <Suspense fallback={LoadingMessage}>
        <Dummy />
        </Suspense>
        </ErrorBoundary>
      </div>
    </div>
    );
  }
}

export default App;

rollup.config.js, After multiple attempts I arrived at below configuration https://github.com/jaebradley/example-rollup-react-component-npm-package/blob/master/rollup.config.js

// node-resolve will resolve all the node dependencies
import resolve from '@rollup/plugin-node-resolve';

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import filesize from 'rollup-plugin-filesize';
import localResolve from 'rollup-plugin-local-resolve';

export default {
  input: 'src/components/js/Dummy.js',
  output: {
    file: 'dist/Dummy.js',
    format: 'es',
    globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
  },
  // All the used libs needs to be here
  external: [
    'react',
    'react-dom'
  ],
  plugins: [
  babel({
    exclude: 'node_modules/**',
  }),
  localResolve(),
  resolve({
    browser: true,
  }),
  commonjs(),
  filesize()
  ]
}

Dummy.js. I verified in dist/dummy.js that babel transpilation happened correctly. I uploaded the transpiled version to my static hosting site.

import React from "react";
import ReactDOM from "react-dom";

class Dummy extends React.Component {

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}

export default Dummy;

I have different targets to build, start up my server, create rollup bundle, etc in same app. So, I am pretty confident my rollup doesn't interfere with running the app.

rollupjs rollup reactjs dynamic-import
1 Answers

The rollup bundling configuration isn't correct. I was trying to create an es output with commonjs plugin while actually I required an esm module. The error on 'react' is because it is unresolved. Had to make it to use window.React while doing rollup bundle. Also, the App.js should be rolled up as esm bundle to make it dynamically import Dummy.js. In the HTML where app.js's bundle is included, I had to include react and react js umd scripts.

export default {
  input: "./src/components/js/Dummy.js",
  output: {
    file: './dist/Dummy.js',
    format: 'esm'
   },
   plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    resolve(),
    externalGlobals({
    "react": "window.React",
    "react-dom": "window.ReactDOM",
    })
  ]
};
user_32013360
Related