I'm currently struggling with importing Kotlin/WAS...

# webassembly

[Mohammed Akram Hussain]

I'm currently struggling with importing Kotlin/WASM in a web project. I was able to embed the same in a react app but I'm not able to figure out the right config for the `webpack.mix.js`:

const commonConfig = {
  experiments: {
    topLevelAwait: true,
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        loader: 'raw-loader',
      },
      {
        test: /\.mjs$/,
        type: "javascript/esm",
      },
    ],
    defaultRules: [
      {
        type: 'javascript/auto',
        resolve: {},
      },
      {
        test: /\.json$/i,
        type: 'json',
      },
    ],
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'resources/js')
    },
    extensions: [".js", ".jsx", ".wasm",".mjs"],
  }
};

[Mohammed Akram Hussain]

This is the error I get when I run the app with the above configuration.

[Mohammed Akram Hussain]

Okay, so I was able to get around this and use the CMP Kotlin/WASM project in a Laravel+React project with the following configuration:

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')
    })
  ]
});