1

I have a React app (created with npx create-react-app) that doesn't have Webpack installed. I want to add lucid-cardano to it. Going through Lucid documentation, I found that Webpack is a dependency, since I need to enable webpack.config.js file with the following configuration to make it work:

experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true // optional, with some bundlers/frameworks it doesn't work without
}

I tried to install Webpack in my project but it seems I am missing a lot of things, since I not only have to add the webpack.config.js file but also some loaders and a server to serve the bundle.js generated (I got to this point with no issues).

This is the webpack.config.js file I generated for my project:

// Webpack uses this to work with directories
const path = require('path');

// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {

  experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true // optional, with some bundlers/frameworks it doesn't work without
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  },
  // Path to your entry point. From this file Webpack will begin its work
  entry: './src/index.js',

  // Path and filename of your result bundle.
  // Webpack will bundle all JavaScript into this file
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js'
  },

  // Default mode for Webpack is production.
  // Depending on mode Webpack will apply different things
  // on the final bundle. For now, we don't need production's JavaScript 
  // minifying and other things, so let's set mode to development
  mode: 'development',
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        { test: /\.css$/, use: { loader: "css-loader" } }
    ]
  }
};

What are the steps I am missing to correctly serve my frontend and be able to use lucid-cardano?

1 Answer 1

0

You do need webpack to work with lucid-cardano.

This is a very good and complete guide on how you can add webpack to a react app: https://jsramblings.com/creating-a-react-app-with-webpack/.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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