Uncaught SyntaxError: Unexpected token import

[billy roberts]

Hi,

Just installed by the instructions and got: Uncaught SyntaxError: Unexpected token import
in the console.

Thanks,
Billy

[Peter Morawiec]

Hey Billy. At which stage of the process is it throwing the error, on npm start? Did you install elm and its dependencies, per the README? An what is your Node version? If you can link to a screengrab of the entire error output, might give me more of a clue.. Thanks!

[billy roberts]

Thanks!
Yes, the error is the first and only console error when you go to http://localhost:8080/.
I'm using Chrome.
I have node: v4.2.1
I have elm installed and have been using it for a while. I did run all of the commands in the readme.
elm-package.json =>
...
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0",
"evancz/elm-effects": "2.0.1 <= v < 3.0.0",
"evancz/elm-html": "4.0.2 <= v < 5.0.0",
"evancz/start-app": "2.0.2 <= v < 3.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"

Here is the terminal output:
wp_screen.txt

from the compiled javascript:
import Html exposing (..) // seems to be a problem here.
import Html.Attributes exposing (..)
import Html.Events exposing ( onClick )
import Effects exposing (Effects)

[billy roberts]

FYI: I just got the exact same error with the sporto/hop router tutorial's webpack configuration. Everything builds correctly and seems to serve fine from the terminal (bundle is now VALID) and then this same error pops up in the exact same spot when trying to load the app's js file.

Also, I see in other non-elm webpack apps this seems to be a very common error.

If you have any ideas, I'm happy to try and chase them down.

[billy roberts]

I just tried to run a build and got an error pointing to the import for htlm in main.elm. see below:

WEBPACK GO!
Building for prod...
Hash: 5c1ef8b2916c296c3570
Version: webpack 1.12.13
Time: 4667ms
Asset Size Chunks Chunk Names
5c1ef8b2916c296c3570.js 3.5 kB 0 [emitted] main
./5c1ef8b2916c296c3570.css 17.9 kB 0 [emitted] main
index.html 536 bytes [emitted]
[0] ./src/index.js 210 bytes {0} [built]
[3] ./src/Main.elm 1.48 kB {0} [built]
+ 2 hidden modules

ERROR in 5c1ef8b2916c296c3570.js from UglifyJs
Unexpected token: name (Html) [./src/Main.elm:1,0]
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules

[Peter Morawiec]

Sorry, haven't had the time to look into it. Does this problem happen only when running the build script? What version of Node are you running? Also, what happens if you remove minification: https://github.com/moarwick/elm-webpack-starter/blob/master/webpack.config.js#L113-116 <-- comment out these lines?

[Peter Morawiec]

I've just re-pulled the repo from scratch, and followed the steps. Build runs fine. If you are getting similar errors elsewhere, I'm thinking something is off on your end. I would recommend:

1. Remove all instances of Node from your system, for example per this SO post
2. Install recent version of Node, preferably via nvm (I'm on 5.10.1)
3. Make sure you don't have webpack installed globally, do npm uninstall -g webpack (shouldn't matter, but just in case)
4. Nuke the existing elm-webpack-starter folder completely, then try again..

Hope this helps!

[billy roberts]

I just build as you asked with the uglify lines commented out and got rid of the build error. However, when serving from /dist I got a similar console error: Uncaught SyntaxError: Unexpected token import.
For what it is worth. I just ran the code from the rtfeldman/elm-webpack-loader example and got the same error in the same place.

[billy roberts]

I wiped away everything and reinstalled node with nvm. I now have node v5.10.1.
I ran all the commands again with the only error in the build step that goes away when you comment out uglify.

Still, the same error in the console is:
Uncaught SyntaxError: Unexpected token import, pointing to the same place: import Html exposing (..).

Last, vscode reports: Duplicate identifyer 'export='. (property) export=: any on line 46 in the webpack config file via tool tips. I've attached a screen shot.

If you have any ideas based on this I'm happy to track them down. I'm new to webpack, or any of this but willing to go after it.

[billy roberts]

here is one more:

[Peter Morawiec]

Looks like it's choking on the import statement, which is Elm syntax. You definitely followed all the install steps, including npm install -g elm and elm package install? Something wrong with your elm-webpack-loader perhaps, but.. assuming you pulled everything anew, and your NPM install went without errors, it should all work. Don't know, sorry. (I made the build script but I'm just not familiar with the Elm language and ecosystem enough to debug this remotely..) If you figure it out, please let me know!

[billy roberts]

It doesn't seem to be your script. The exact thing happens with the loader's example project.
I did follow all of the steps to install very carefully.

Thanks, and let me know if you think of anything I can do to track this down on my side.

[billy roberts]

It seems that having a parent directory named elm-stuff causes problems. I haven't gotten familiar with webpack enough to tell you why, but I definitely narrowed it down to this.