[SOLVED] TypeError: Crafty.scene is not a function


#1

Hello!
I have a quick question thats probably easy for experienced users. Im helping develop a game, and it uses CraftyJS. When i try to run it in Electron, Electron throws this error:

    TypeError: Crafty.scene is not a function
    at Object.<anonymous> (/Users/gingkathfox/Desktop/Overtime-Game/Level1.js:4:8)
    at Object.<anonymous> (/Users/gingkathfox/Desktop/Overtime-Game/Level1.js:132:3)
    at Module._compile (internal/modules/cjs/loader.js:711:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
    at Function.Module._load (internal/modules/cjs/loader.js:551:3)
    at loadApplicationPackage (/Users/gingkathfox/Desktop/Overtime-Game/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:286:12)
    at Object.<anonymous> (/Users/gingkathfox/Desktop/Overtime-Game/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:327:5)
    at Object.<anonymous> (/Users/gingkathfox/Desktop/Overtime-Game/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:364:3)

But when i run it through Beefy, it runs just fine. Anyone know why?
EDIT:
accidentally Today at 2:46 AM @GingkathFox that's good, thar means it's installed. But the error means that your app can't find the fuction you're calling. Most likely cause: crafty.js is not included in your app, you have to tell electron where it is.
How do i point Electron to /npm_modules/cratyjs?
EDIT2: ive tried requiring craftyJS in main.js, with no result. I dont know what to do anymore, ti doesnt seem like anyones encountered this error before.
EDIT 3:
FIXED: Apparently if i require CraftyJS in Level1.js Electron will ignore npm_modules. It seems like Electron automatically searches that folder, thats nice to know.


#2

Would that not be /Users/gingkathfox/Desktop/Overtime-Game/npm_modules/craftyjs ? Is CraftyJS installed globally or for the project?


#3

to the first question: Yes. To the second: yes to both, i have Crafty installed both locally and globally.


#4

Just a guess. Have you named the app as crafty which might cause a name conflict? I see this when I give a python script the same name as a python module.


#5

No, its not packaged yet.


#6

@kevinsimper

kevinsimper You have to install browserify as a global package as well


#7

Browserify and Beefy are both installed, globally and locally. Beefy uses Browserify. I think i need to explain a bit more:
When i run the code through Beefy using beefy Level1.js --open it runs just fine. Electron runs main.js first, which opens main.html, which opens Level1.js. Something has to be wrong in either main.js or main.html. Code:
main.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Overtime-game</title>
  </head>
  <body>
    <div id="game"></div>
    <script type='text/javascript' src='./node_modules/craftyjs/src/crafty-headless.js'></script>
    <script src='./Level1.js'>
    </script>
  </body>
</html>

main.js:

const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ width: 500, height: 500 })
  // and load the index.html of the app.
  win.loadFile('main.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Ive tried requiring CraftyJS in main.js, it didnt work.
The game is a bundle of loose files, its not packaged yet.
46%20AM


#8

From my own createWindow() (different project, of course):

mainWindow.loadURL(file://${__dirname}/index.html);

What’s in .vscode/launch.json?

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "ProjectName",
            "program": "${workspaceFolder}\\src\\index.js",
            "args" : [],
            "cwd" : "${workspaceFolder}",
            "runtimeArgs": [
                ".",
                "--enable-logging"
            ],
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            
            "protocol": "inspector"
        }
    ]
}

#9
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${workspaceFolder}/main.js"
      }
  ]
}

#10

Did loading using __dirname make a difference?


#11

That threw

Not allowed to load local resource: file:///Users/gingkathfox/Desktop/Overtime-Game/ile:/$%7B__dirname%7D/main.html

#12

I don’t suppose the extra “/:ile/…” had anything to do with it? Would prefer to see code, not exception text.


#13
const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ width: 500, height: 500 })
  // and load the index.html of the app.
  win.loadFile('ile://${__dirname}/main.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

#14

Here surely is an obvious syntax error …

win.loadFile('ile://${__dirname}/main.html')
------------------------- ^
which should be …

win.loadFile('file://${__dirname}/main.html')


#15

And instead of single quotes, it needs back-ticks, which are a little difficult to show in the editor.

win.loadURL(`file://${__dirname}/main.html`)

Should also be “loadURL,” not “loadFile.” I think the line as expressed above should be correct.


#16

Now it switches back to the original Crafty error, so it cant be main.js. maybe the HTML file isnt grabbing Crafty? But even then, Level1.js has CraftyJS already required, and it works fine without Electron. I can’t seem to figure this error out…


#17

Augh. Sorry that didn’t address it. Will have to have someone else assist because I’m now in hospital with no.computer, and will be here a few more days.


#18

oh, hope you get better with whatever happened!