Webpack loader for .env file

Questions
1

Hi all,

I am using webpack 4. I am trying to use an .env file for a HDR environment. However I’m getting an error message that I need the appropriate loaders for .env files.

image
image1176×182 89.2 KB

What should i do?

Thanks :slight_smile:

2

Maybe this could help:
Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation (babylonjs.com)

1 Like
3

Unfortunately I am getting this error now after using babylonjs loaders

image
image1210×90 19.4 KB

4

Could you put here your import statements to have a look?

5

add something like this to your webpack’s config.module.rules array

            {
                test: /\.(png|jpg|gif|env|glb|stl|exr|hdr)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },

url loader loads small files as data uri and falls back to file loader if they are bigger, which just copies the asset and updates the url to the output destination path.

alternatively, you could just place the .env file in the output path and fetch or add it to the babylon asset loader and skip the webpack nonsense

2 Likes
6

Do you use .env loader like

import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";
1 Like
7

Hi guys! Thanks for the responses. I tried to upload some screenshots but my current internet connection was too slow XD

I was using webpack’s raw-loader, and i tried to use

import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";

but It couldn’t find the module :thinking:

I’ll add some more comprehensive info/screenshots when I’m on a better connection in a bit. Thank you for your help :smiley:

1 Like
8

Ok, so I am now using url-loader in my webpack.config file.

Upon npm run, i am getting these two errors in my terminal:

ERROR in ./client/graphics/BABYLONRenderer.js
Module not found: Error: Can't resolve 'babylonjs/core/materials/Textures/Loaders/envTextureLoader' in '(project file) /client/graphics'
 @ ./client/graphics/BABYLONRenderer.js 7:0-68
 @ ./client/Simulator.js
 @ ./client/GameClient.js
 @ ./client/clientMain.js

I’m importing envTextureLoader, but npm can’t find it. Do i download it externally?

Thanks :slight_smile:

9

Hey sorry you’re having issues with this! Any reason you’re using webpack 4 instead of the latest, v5.x?

Regardless, I had to do similar webpack gymnastics about a year ago, [here is a link to a config] (space-truckers/webpack.common.js at 827acc60c326d74b458f870ff8d93d31b529fd82 · jelster/space-truckers · GitHub) in one branch that dates from that time, using webpack 4

HTH

1 Like
10

typo in your import statement.

babylonjs/core/materials/Textures/Loaders/envTextureLoader
→
@babylonjs/core/materials/Textures/Loaders/envTextureLoader

3 Likes
11

Hi all, sorry for the slow reply.

I replaced the line where I made the typo, and I’m now using url-loader.

There’s still an issue with retrieving envTextureLoader.

image
image1310×244 76.4 KB

  • Do i need both envTextureLoader and url-loader, or just either?
  • Do I need to seperately download envTextureLoader, or does it come in the default babylonjs package?

I should let you know I am using node 14 and webpack 4, however I should upgrade webpack.

Thanks :blush:

12

hahah I installed “@babylonjs/core” instead of just “babylonjs” from npm, I hadn’t noticed they were different.

image
image980×68 11.7 KB

It seems like webpack isn’t copying the asset over, I’m so baffled :joy:

13

Fixed!!!

After I imported babylonjs envTextureLoader and used file-loader, the only issue was that there was a 404 and the asset couldn’t be found. What was happening was that webpack was trying to reach “localhost:/js123456789.env” for example instead of “localhost:/js/123456789.env”.

I changed a section in the webpack config file, and the browser can retrieve the env file.

Thank you all for the help!

2 Likes