How to use react-pdf with Experience Builder developer edition

Ming

Working with Experience Builder developer edition v1.6. Try to use react-pdf in customized widget to generate pdf file with the react component.

But when install the react-pdf as instructed in following link, got a lot errors. 

https://github.com/diegomura/react-pdf

Question is how to add following configuration into current webpack.config.js file under folder client?

Configuration:

resolve: {
    fallback: {
      process: require.resolve("process/browser"),
      zlib: require.resolve("browserify-zlib"),
      stream: require.resolve("stream-browserify"),
      util: require.resolve("util"),
      buffer: require.resolve("buffer"),
      asset: require.resolve("assert"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ]

Content of webpack.config.js under folder client:

const extensionsConfig = require('./webpack/webpack-extensions.config');

if(extensionsConfig.length === 0){
console.warn('You have to have at least one widget/theme.');
return;
}
module.exports = extensionsConfig;

 

Ming

Thank you very much @Junshan_Liu  and @ShaunLangley . Finally installed it successfully, and here is the steps:

1. Open Command Prompt, go to Experience Builder folder /client, run following commands:

npm install @react-pdf/renderer -S
npm install process browserify-zlib stream-browserify util buffer assert -S
npm install iconv-lite -S
npm install https-browserify -S
npm install url -S
npm install stream-http -S

2. Open file webpack-extensions.common.js under /client/wepack, modify function getWidgetsWebpackConfig, add following part to "resolve":

fallback: {
process: require.resolve("process/browser"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
asset: require.resolve("assert"),
https: require.resolve("https-browserify"),
url: require.resolve("url/"),
http: require.resolve("stream-http")

add following part to plguins:

new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),

Here is the one works after modification:

function getWidgetsWebpackConfig(entries, toBeCopiedFiles, toBeCleanFiles) {

  return {

    entry: entries,

    output: {

      filename: '[name].js',

      path: webpackCommon.outputPath,

      libraryTarget: "system",

      publicPath: '',

      chunkFilename: (pathData, assetInfo) => {

        return `${pathData.chunk.runtime}/${pathData.chunk.hash}.js`

      }

    },

    devtool: webpackCommon.sourceMapOption,

    resolve: {

      alias: webpackCommon.moduleAlias,

      extensions: webpackCommon.extensions,

      mainFields: webpackCommon.resolveMainFields,

      fallback: {

        process: require.resolve("process/browser"),

        zlib: require.resolve("browserify-zlib"),

        stream: require.resolve("stream-browserify"),

        util: require.resolve("util"),

        buffer: require.resolve("buffer"),

        asset: require.resolve("assert"),

        https: require.resolve("https-browserify"),

        url: require.resolve("url/"),

        http: require.resolve("stream-http")

      }

    },

    module: {

      rules: webpackCommon.getModuleRules(path.resolve(__dirname, '../tsconfig/tsconfig-widgets.json'))

    },

    plugins: webpackCommon.getPlugins('widgets', toBeCopiedFiles, toBeCleanFiles).concat(

      [        

        new webpack.ProvidePlugin({

          Buffer: ["buffer", "Buffer"],

          process: "process/browser",

        }),

      ]

    ),

    externals: [

      webpackCommon.externalFunction

    ],

    stats: webpackCommon.stats,

    devServer: webpackCommon.devServer,

  };

}

 

3. Open file webpack.common under folder /client/wepack, add 'browser' to exports.resolveMainFields and here is the one works after modification:

exports.resolveMainFields = ['browser', 'module', 'main'];

----------------------

That's all, hope it can help, good luck!