<p>You do need <code>webpack</code> to work with <code>lucid-cardano</code>.</p>
<p>This is a very good and complete guide on how you can add <code>webpack</code> to a <code>react</code> app: <a href="https://jsramblings.com/creating-a-react-app-with-webpack/" rel="nofollow noreferrer">https://jsramblings.com/creating-a-react-app-with-webpack/</a>.</p>

CC BY-SA 4.0
2023-03-27T01:49:11.660Z
2023-03-27T01:49:11.660Z
Falcon Stakepool
<p>I have a React app (created with <code>npx create-react-app</code>) that doesn't have Webpack installed. I want to add <code>lucid-cardano</code> to it. Going through Lucid documentation, I found that Webpack is a dependency, since I need to enable <code>webpack.config.js</code> file with the following configuration to make it work:</p>
<pre><code>experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true // optional, with some bundlers/frameworks it doesn't work without
}
</code></pre>
<p>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 <code>webpack.config.js</code> file but also some loaders and a server to serve the <code>bundle.js</code> generated (I got to this point with no issues).</p>
<p>This is the <code>webpack.config.js</code> file I generated for my project:</p>
<pre><code>// 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: &quot;css-loader&quot; } }
    ]
  }
};
</code></pre>
<p>What are the steps I am missing to correctly serve my frontend and be able to use <code>lucid-cardano</code>?</p>

<api><react><lucid>
How can I add Webpack to a React app so I can use Lucid with it?
# How can I add Webpack to a React app so I can use Lucid with it?

(Asked by: username_0 on 2022-10-27)

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?

**Tags:** api, react, lucid

---

## 1 answers

### Answer by username_0 on 2023-03-27. Score: 0 | Accepted answer

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/>.


---

