search

dataarts / dat.gui

Lightweight controller library for JavaScript.
Apache License 2.0
7.46k stars 1.08k forks source link

Uncaught TypeError: Cannot set property 'dat' of undefined #292

Closed knightcube closed 3 years ago

knightcube commented 3 years ago

Uncaught TypeError: Cannot set property 'dat' of undefined at VM250 dat.gui.min.js:13 at VM250 dat.gui.min.js:13

I am assuming the problem lies in this part of the code where e.dat = {} 

!function(e, t) {
    "object" == typeof exports && "undefined" != typeof module ? t(exports) : "function" == typeof define && define.amd ? define(["exports"], t) : t(e.dat = {})
}
donmccurdy commented 3 years ago

An error like this will be related to how you are importing the code. Are you using a CDN and <script> tags? Or a bundler, and if so which one?

knightcube commented 3 years ago

I have actually downloaded the whole repo and put it inside my project folder for now coz it's a small project and just for basic experimentation.

I am not using CDN, npm install or script tags

donmccurdy commented 3 years ago

There are two common syntaxes for modules in JS (import or require), and this repository supports both, but you need to use the right files. With an npm installation that would be handled automatically. dat.gui.min.js is compatible with require() syntax, and dat.gui.module.js is compatible with import syntax. If you're not using either of those, or scripts, then you'll need to share how you are loading the dependency.

knightcube commented 3 years ago

I see. Thanks for the prompt response. Apologies coz It's kinda late over here otherwise, I could share my approach with you right away. I will reply in the morning.

knightcube commented 3 years ago

This is my HTML file👇

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DAT Experiment</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <canvas class="webgl"></canvas>
    <script type="module" src="index.js"></script>
</body>
</html>

And then in the index.js file, I had done something like this👇

import * as dat from './dat.gui-master/dat.gui-master/build/dat.gui.min.js'

I tried using dat.gui.module.js instead and it works now.

import * as dat from './dat.gui-master/dat.gui-master/build/dat.gui.module.js'

Thank you.