Why does my import statement have a syntax error in Deno but works ok in Nodejs?

Question

I'm testing with two VSCode setups; one running Deno, the other running Nodejs using the Sucrase compiler to transform the code so that I can write native ES6 modules. I have a very simple test: a small Class and a module that imports it. Here is the Deno VSCode setup.

My VSCode explorer panel looks like this.

    PLANNER-CODEBASE
        .vscode
            launch.json
            setting.txt
        src
            plannerFiles 
                ClassArrayList.js 
                main.js 
            log.ts 
            .gitignore
            .prettierrc 
            config.ts
            deps.ts
            index.ts
            makefile
            readMe.txt
            tsconfig.json

I run the code using this launch.json entry.

    {
      "name": "Debug Program",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": ["run", "-A", "--unstable", "--inspect-brk", "./index.ts"],
      "port": 9229,
      "console": "integratedTerminal"
    },

This is index.ts

    import main from './src/plannerFiles/main.js'
    main()

This is main.js

    const main = () => {
      console.log('Starting your Planner App')
      
      import { ArrayList } from './ClassArrayList.js'
      let myArrayList = new ArrayList()
      
      let row0 = ['11/22/1968', '29', 'Revolution 9', 'Beatles', 'The Beatles [White Album]']
      let row1 = ['1960', '6', 'Fools Rush In', 'Frank Sinatra', "Nice 'N' Easy"]
      let row2 = ['11/11/1971', '1', 'One of These Days', 'Pink Floyd', 'Meddle']
      myArrayList.add(row0)
      myArrayList.add(row1)
      myArrayList.add(row2)
      myArrayList[5] = 'five'
      let xx = myArrayList.length
      let xxx = myArrayList.getUpperBound()
      let x = myArrayList.item(0)
      let y = myArrayList[1]
      let zzz = myArrayList[5]
      myArrayList.clear()
      myArrayList = ['LEVEL0INDENT', 50, 100, 75, 75, 100, 100, 100, 100] //first value is for initial space
      let z = myArrayList[1]
      
      debugger
      // static clear = (obj) => (obj.length = 0)
      // ArrayList.clear(myArrayList)
    }
    export default main

This is ClassArrayList.js

    class ArrayList extends Array {
      constructor() {
        super()
      }
      add = (obj) => {
        this.push(obj)
      }
      item = (key) => {
        let obj = this.valueOf()[key]
        return obj
      }
      getUpperBound = () => {
        return this.valueOf().length - 1
      }
      clear = () => {
        this.valueOf().length = 0
      }
    }
    export { ArrayList }

This is my terminal output.

    ramData\chocolatey\bin\deno.exe run -A --unstable --inspect-brk ./index.ts
    Debugger listening on ws://127.0.0.1:9229/ws/fd15dc8c-111d-45e4-b09e-651aae5b01c7
    error: Expected LParen, got Some(LBrace) at file:///C:/Users/Bruce/Dropbox/Code/DENO%20BACKEND/Planner-Codebase/src/plannerFiles/main.js:4:9

I don't know what's wrong or how to fix it. Any help would be appreciated.

The provided code works, what's above the import, you need to show us code where we can reproduce the error. — Marcos Casagrande, Jul 02 '20 at 22:09
I added the few additional code lines of the testing moduleMain.js to show the whole file. The environment is a VSCode project created from this repo: https://dev.to/lampewebdev/deno-the-node-replacement-bonus-i-created-a-boilerplate-for-deno-2g25. The only code in it is the two files shown in this question, as it was created to start testing a lot of code, and this class is the first to be tested. Index.js calls main.js which calls ArrayList. That's all there is. — MartinDuo, Jul 03 '20 at 01:21
Works fine for me. As a sanity test, copy and paste the contents of the files in your post into files with the exact same names on your filesystem. Then [debug](https://deno.land/manual/tools/debugger) again. — jsejcksn, Jul 03 '20 at 03:48
The code works fine @MartinDuo post the complete code and what commands are you using to run it. The error says line 697, while the code posted here has ~28. Post full code so we can reproduce the error. — Marcos Casagrande, Jul 03 '20 at 09:21
I have changed the post to show everything as copied from my project. I will try to provide whatever you request so we can solve this. Thanks for your responses so far. — MartinDuo, Jul 03 '20 at 12:56

Chellappan வ · Accepted Answer · 2020-07-03T15:41:15.143

Instead of importing module inside function move outside like this. If you want to load module lazyly use dynamic import

Try this:

     import { ArrayList } from './ClassArrayList.js'
     const main = () => {
      console.log('Starting your Planner App');
      let myArrayList = new ArrayList();    
      let row0 = ['11/22/1968', '29', 'Revolution 9', 'Beatles', 'The Beatles [White Album]']
      let row1 = ['1960', '6', 'Fools Rush In', 'Frank Sinatra', "Nice 'N' Easy"]
      let row2 = ['11/11/1971', '1', 'One of These Days', 'Pink Floyd', 'Meddle']
      myArrayList.add(row0)
      myArrayList.add(row1)
      myArrayList.add(row2)
      myArrayList[5] = 'five'
      let xx = myArrayList.length
      let xxx = myArrayList.getUpperBound()
      let x = myArrayList.item(0)
      let y = myArrayList[1]
      let zzz = myArrayList[5]
      myArrayList.clear()
      myArrayList = ['LEVEL0INDENT', 50, 100, 75, 75, 100, 100, 100, 100] //first value is for initial space
      let z = myArrayList[1]
      
      debugger
      // static clear = (obj) => (obj.length = 0)
      // ArrayList.clear(myArrayList)
    }
    export default main

Yes, I tried this and it works. But as a newbie to writing JS outside of React, I assumed, for some reason, that imports were placed inside the function needing them. Too bad the error didn't say "SyntaxError: import declarations may only appear at top level of a module". Does putting it outside define ArrayList in global scope, or is it only within the file's scope? Thank you for your answer. — MartinDuo, Jul 03 '20 at 17:42
If you want to use inside function you have to use lazyLoading syntex. I am not sure but using outside is filescope. — Chellappan வ, Jul 04 '20 at 13:58

Why does my import statement have a syntax error in Deno but works ok in Nodejs?

1 Answers1