[WAVE + Webpack] How to edit the configuration file

gregoire

Mar 3rd, 2021 01:15 PM

Hello everyone,

It's me again for a new question! I think this one is a bit silly, but I really need to ask it.

I'm trying to incorporate a TUS upload system (for Cloudflare Stream) and I have to use the fs module. However, I get the following error:

Module not found: Error: Can't resolve 'fs' in '\resources\views\themes\tailwind\assets\js'

This seems to be a very common error as this publication shows: https://github.com/webpack-contrib/css-loader/issues/447

The solution would be to add the following code to the webpack.config.js file:

node: {
    fs: 'empty
}

However, the configuration file webpack.config.js is located in node_modules/laravel-mix/setup/webpack.config.js.

So I have two questions:

  • If I modify a file in node_modules, it will be deleted at each update or new installation. This doesn't seem to be a solution to me.
  • The Wave webpack.config.js file does not look at all like the webpack I am used to as indicated in the documentation: https://webpack.js.org/configuration/

What am I missing here?


Just for information, here is my code:

var fs = require("fs"); // error
var tus = require("tus-js-client"); // ok
bobbyiliev

May 11th, 2022 01:40 AM

Hi there,

A bit of a late reply, but posting an answer here for anyone who might come across this in the future.

Wave uses Laravel Mix.

The webpack configuration file is specific for each theme, the default one can be found here.

To install a module, you need to first access the theme directory:

cd resources/views/themes/tailwind

And then as normal run npm install your_module.

For more information regarding the themes you can take a look at the following docs:

Laravel Wave docs

Best,

Bobby