Search code examples
webpackthree.jsglsllaravel-mix

Right path to import module in Sage 10

Working with Sage 10 WordPress Starter theme. I'm trying to import GLSL files this way:

// frontPage.js
import portalVertexShader from './shaders/front-page/portal/vertex.glsl'

This is the file structure:

This is the file structure

But I get something like a path error in the console:

app.js?id=bba838275bfcabcf4aa4:37 Uncaught Error: Cannot find module './shaders/front-page/portal/vertex.glsl'
    at webpackMissingModule (app.js?id=bba838275bfcabcf4aa4:37)
    at Object../resources/scripts/frontPage.js (app.js?id=bba838275bfcabcf4aa4:37)
    at __webpack_require__ ((index):304)
    at Object../resources/scripts/app.js (app.js?id=bba838275bfcabcf4aa4:13)
    at __webpack_require__ ((index):304)
    at __webpack_exec__ (app.js?id=bba838275bfcabcf4aa4:90)
    at app.js?id=bba838275bfcabcf4aa4:91
    at Function.__webpack_require__.O ((index):340)
    at app.js?id=bba838275bfcabcf4aa4:92
    at webpackJsonpCallback ((index):425)

I really don’t know what is happening here. How can I import this files? Thanks!

this is the webpack.mix config

Solution

  • I miss to install raw-loader

    yarn add raw-loader --dev