0

I'm working on a THREE.JS project and I need to work with shaders when I import the file containing the shaders in my JS file:

import * as THREE from 'three'; import { TweenMax as TM } from 'gsap'; import vertexShader from './vertexShader.glsl'; import fragmentShader from './fragmentShader.glsl'; export default class Figure { //we create a new class and we pass the scene as a  property; constructor(scene) { this.$image = document.querySelector('.tile__image'); this.scene = scene; this.callback; } // conti ........ }

I got this error:

app.js:66572 Uncaught Error: Module parse failed: Unexpected token (1:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
void main() {
| v_uv = uv;
|
at Object../src/vertexShader.glsl (app.js:66572)
at webpack_require (app.js:20)
at Module../src/Figure.js (app.js:66312)
at webpack_require (app.js:20)
at Module../src/Scene.js (app.js:66456)
at webpack_require (app.js:20)
at Module../src/app.js (app.js:66534)
at webpack_require (app.js:20)
at Object.0 (app.js:66583)
at webpack_require (app.js:20)

I put this snippet in my webpack.mix file:

let mix = require('laravel-mix'); const source = require('raw-loader!glslify-loader!./my-shader.glsl');  mix.js('src/app.js', 'dist/') .sass('src/app.scss', 'dist/') .webpackConfig({ module.exports = {             rules: [ {                     test: /\.(glsl|frag|vert)$/,                     exclude: /node_modules/, use: [ 'raw-loader', {                             loader: 'glslify-loader',                             options: {                                 transform: [ ['glslify-hex', { 'option-1': true, 'option-2': 42 }] ] } } ] } ] } });

but nothing happens what am I missing?