import syntax error - Githubissues

gggustafson commented 4 years ago

My development environment is:

Microsoft Windows 7 Professional SP 1
Microsoft Visual Studio 2008 Professional SP1
Microsoft Visual C# 2008
Firefox 69.0.2 (64-bit)

I have copied all of your files from GitHub in the directory

mdn/js-examples/modules/basic-modules

into a directory with the following structure:

index.html
main.mjs
modules/
    canvas.mjs
    square.mjs

When I run JSLint against index.html I get the following message

Developed by Matthias Miller (http://www.JavaScriptLint.com)

index.html
main.mjs
C:\Gustafson\Projects\JavaScriptModules\main.mjs(1): SyntaxError: missing name in import statement
import { create, createReportList } from './modules/canvas.mjs';
.......^

1 error(s), 0 warning(s)

As a result, index.html does not display.

Please advise what I am doing wrong. Thanks

chrisdavidmills commented 4 years ago

Hrm, I'm not sure at this point.

Have you followed all our troublshooting tips?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#Troubleshooting

Particularly, are you trying to run it using a web server? It won't work if you run it directly from the file.

gggustafson commented 4 years ago

My environment, specifically Visual Studio, provides a testing functionality through s a development server hosted on localhost. The error reported by JSLint is not the result of the web page index.html being displayed; it is the result of JSLint examining the code. I cannot execute the Firefox Development Environment (F12) against the mjs files because they are not loaded (due apparently to the error reported by JSLint).

I don't think that the trouble shooting tips are applicable. However, what seems the case is that import/export may not be ready for prime time.

Please advise. Thanks,

chrisdavidmills commented 4 years ago

Ah, I understand now. So it's an error being thrown by your linting tool.

If you disable JSLint, does it run and load properly? It could quite easily be a problem with JSLint, rather than with JS modules. AFAIK, ESLint is more the industry standard these days.

gggustafson commented 4 years ago

@chrisdavidmills JSLint is not a disable-able tool. It just sits in its directory waiting to be invoked. When I invoke it, it only parses the code recursively and reports warnings and errors.

When there are errors, the JavaScript file it has examined will not load. Not because of something that JSLint has done, but because there are errors. When I access the software in Firefox Developer Mode (F12), the file that had a JSLint-detected error does not load. That means that none of the modules load.

I revised your HTML to read:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
      canvas 
        {
        border: 1px solid black;
        }
    </style>
    <script type="module" src="main.mjs"></script>
  </head>
  <body>
    <p>Basic JavaScript module example</p>
  </body>
</html>

When I displayed the HTML in the Firefox browser, all that displayed was

Basic JavaScript module example

Right now I can't use "module import/export". Please advise

PS: I have been using JSLint since the 2005 and have found no competitor. JSLint is not the problem!

Regards,

chrisdavidmills commented 4 years ago

PS: I have been using JSLint since the 2005 and have found no competitor. JSLint is not the problem!

It is saying that an import statement is missing from main.mjs, but there isn't. I'm importing two items from canvas.mjs:

import { create, createReportList } from './modules/canvas.mjs';

And in canvas.mjs I'm exporting only those two items:

export { create, createReportList };

Have you got your directory structure set up exactly the same as mine?

I've tested these examples thoroughly across Firefox and Chrome. When you load the following URL directly in a browser:

https://github.com/mdn/js-examples/tree/master/modules

then click on some of the "run the example live" links, do the examples work OK?

gggustafson commented 4 years ago

@chrisdavidmills

It appears that Firefox does not like the "mjs" extension. When I changed the extensions in your example to "js" I got the drawing that we expected.

I think there are still problems. If it's OK, let's leave this issue open until I can examine the code that originally raised the issue.

Thanks for your help and patience.

Regards,

chrisdavidmills commented 4 years ago

Hrm, that is usually caused by the .mjs files being served with the wrong mime type. But Github serves them correctly. They are working in Firefox on my mac, and on my Windows test machine.

Have you tried it in Chrome?

gggustafson commented 4 years ago

@chrisdavidmills Using the extension js, whenChrome accesses C:\Gustafson\Projects\JavaScriptModules\index.html, I get only the text "Basic JavaScript module example". Do you want me to try the mjs extension?

chrisdavidmills commented 4 years ago

whenChrome accesses C:\Gustafson\Projects\JavaScriptModules\index.html

Sorry, just to verify something — are you accessing the file directly via the filesystem, or using a local web server? It won't work if you are accessing the file directly.

gggustafson commented 4 years ago

I open Chrome, place C:\Gustafson\Projects\JavaScriptModules\index.html in the address bar, and press enter. Chrome reports "You are viewing a local or shared file". When I click on the address bar Chrome displays "file:///C:/Gustafson/Projects/JavaScriptModules/index.html". Do you want me to move the files to my website and try from there?

gggustafson commented 4 years ago

I changed the browser associated with Visual studio. Here are the screen shots for chrome, firefox, and opera.

chrome firefox opera

I'm surprised that they are different (they came from the same source). I think we can close the issue.

Thanks for your time and patience.

chrisdavidmills commented 4 years ago

Ah, cool, it is working now you are putting it through localhost. the output will be different each time, as one of the generated squres is given a random position.

Glad you are up and running though. Always happy to help!

mdn / js-examples

import syntax error #5