# Usage with webpack 5 and typescript

**URL:** <https://discourse.threejs.org/t/usage-with-webpack-5-and-typescript/39103>\
**Category:** Questions\
**Tags:** typescript, webpack\
**Created:** [June 10, 2022, 6:12am UTC](https://discourse.threejs.org/t/usage-with-webpack-5-and-typescript/39103 "2022-06-10T06:12:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Catlike](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/catlike/32/26956_2.png) [@Catlike](https://discourse.threejs.org/u/Catlike)\
**Post date:** [June 10, 2022, 6:12am UTC](https://discourse.threejs.org/t/usage-with-webpack-5-and-typescript/39103/1 "2022-06-10T06:12:02Z")

</div>

Hi, I found the way to use typescript and webpack5 with hotreload.  
I declared glb file as module in webpack and typescript, so I can import them and use them as shown. However, what I have to do is this ugly workaround:

```javascript
import * as Model from './models/model.glb';

new GLTFLoader().load(Model as unknown as string, function (gltf) {
//...
});

```

I’d like something common like this, but If I use this code, url is undefined and it won’t work.

```javascript
import Model from './models/model.glb';

new GLTFLoader().load(Model, function (gltf) {
//...
});

```

What is the correct way to handle it? I really don’t like to have that double cast and import as \*

My webpack relevant configuration:

```javascript
module: {
    rules: [
      {
        test: /\.(glb|gltf)$/,
        type: 'asset/resource'
      }
    ],
  },

```

My typescript definitions

```javascript
declare module '*.glb' {
    const value: any;
    export default value;   
}

declare module '*.gltf' {
    const value: any;
    export default value;   
}

```

three: 0.141.0  
webpack: 5.73.0  
webpack-dev-server: 4.9.2  
html-webpack-plugin 5.5.0

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [June 10, 2022, 9:18am UTC](https://discourse.threejs.org/t/usage-with-webpack-5-and-typescript/39103/2 "2022-06-10T09:18:31Z")

</div>

I have this working using these settings.

In my typescript projects root folder, I have an `index.d.ts`, containing

```javascript
declare module '*.glb'

```

My webpack 5 config modules section

```javascript
module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.glb/,
            type: 'asset/resource',
        },
    ],
},

```

My `tsconfig.json`

```javascript
{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true
    },
    "include": ["**/*.ts"]
}

```

My `.ts` script where I use the glb

```javascript
...
import monkey from './models/monkey.glb'
...
const loader = new GLTFLoader()
loader.load(
    monkey,
    function (gltf) {
       ... //etc

```

This works for me without showing any errors in the IDE or in the browser. I tested this using webpack dev server and production build served with nodejs.