I'm facing the same error <HERE> with compose reso...

# webassembly

[Mohammed Akram Hussain]

I'm facing the same error HERE with compose resources using version 1.7.3 . I'm actually trying to embed the wasm project in a laravel project by copying these files into the web project and the webpack configuration is in the thread 🧵

[Mohammed Akram Hussain]

const mix = require('laravel-mix');
const sentryWebpackPlugin = require("@sentry/webpack-plugin");
const packageJson = require('./package.json');
const path = require('path')
require('dotenv').config();

const definePlugin = require('webpack').DefinePlugin;

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

const envPlugin = new definePlugin({
    'process.env.REACT_APP_ENV': JSON.stringify(process.env.APP_ENV),
    'process.env.REACT_APP_SENTRY_ENV': JSON.stringify(process.env.SENTRY_ENVIRONMENT),
});

if (mix.inProduction()) {
    mix.js('resources/js/app.js', 'public/js');
    mix.react();
    mix.sass('resources/sass/app.scss', 'public/css');
    mix.webpackConfig({
        devtool: 'source-map',
        resolve: {
            alias: {
                '~': path.resolve(__dirname, 'resources/js')
            }
        },
        plugins: [
            new sentryWebpackPlugin({
                release: packageJson.version,
                org: "storelab",
                project: "web-app-fe",
                sourcemaps: {
                    assets: ['public/js/app.js.map']
                }
            }),
            envPlugin
        ]
    })
    mix.version();
} else {
    mix.js('resources/js/app.js', 'public/js').sourceMaps();
    mix.react();
    mix.sass('resources/sass/app.scss', 'public/css', { sourceMap: true });
    mix.webpackConfig({
        devtool: 'inline-source-map',
        plugins: [
            envPlugin
        ]
    });
    mix.options({
        hmrOptions: {
            host: 'localhost',
            port: 8081
        }
    });
}

mix.copyDirectory('resources/js/wasm', 'public/js/wasm');
mix.webpackConfig({
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true
  },
  output: {
    webassemblyModuleFilename: 'js/wasm/[name].wasm',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: "asset/resource",
        generator: {
          filename: 'js/wasm/[name][ext]'
        }
      },
      {
        test: /skiko\.mjs$/,
        loader: 'string-replace-loader',
        options: {
          search: 'require("url").fileURLToPath(new URL("./",import.meta.url))',
          replace: 'window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1)'
        }
      }
    ]
  },
  resolve: {
    fallback: {
      fs: false,
      path: false,
      module: false,
    }
  },
  plugins: [
    new definePlugin({
      'process.release.name': JSON.stringify('browser')
    })
  ]
});

/**
 * Allows 'import' in form of:
 *      ~/Components/...
 *      ~/Globals/...
 *      ~/Lib/...
 * Rather than:
 *      ../../../../Lib/...
 */
mix.alias({
    '~': path.resolve(__dirname, 'resources/js')
});