Compiled script not being served from http://localhost:8080/static/js/main.js

Question

Compiled script not being served from http://localhost:8080/static/js/main.js

JonathanDDuncan opened this issue 7 years ago · comments

I am converting an existing project from Elm 0.17 to Elm 0.18 and upgrading from
elm-webpack-starter Ver 0.6.2 to elm-webpack-starter Ver 0.8.2

I have managed to get my elm code to compile but my compiled script is not being served from the address that webpack is injecting into my index.html

When I run
npm run reinstall

I get

npm-debug.txt

elm-webpack-starter@0.8.2 reinstall C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install

elm-webpack-starter@0.8.2 C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
+-- UNMET PEER DEPENDENCY elm-webpack-loader@3.1.0
`-- rimraf@2.5.4

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN elm-hot-loader@0.5.4 requires a peer of elm-webpack-loader@^4.1.1 but none was installed.
The system cannot find the path specified.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Jonathan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "reinstall"
npm ERR! node v4.4.5
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! elm-webpack-starter@0.8.2 reinstall: npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the elm-webpack-starter@0.8.2 reinstall script 'npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the elm-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs elm-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls elm-webpack-starter
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\npm-debug.log

Any ideas?

This is the output I am getting from running npm start is.

`
C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor>npm start

elm-webpack-starter@0.8.2 start C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
webpack-dev-server --hot --inline --content-base src/

WEBPACK GO!
Serving locally...
http://localhost:8080/
webpack result is served from /
content is served from C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\src
404s will fallback to /index.html
Running elm-make C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\src\elm\QuickSignEditor.elm --yes --warn --debug --output C:\Users\Jonathan\AppData\Local\Temp\11708-19664-1akrkyx.js
Success! Compiled 0 modules.
Successfully generated C:\Users\Jonathan\AppData\Local\Temp\11708-19664-1akrkyx.js

Hash: 014fafe397b98d26aff0
Version: webpack 1.14.0
Time: 2653ms
Asset Size Chunks Chunk Names
static\js\main.js 1.36 MB 0 [emitted] main
index.html 1.45 kB [emitted]
chunk {0} static\js\main.js (main) 1.3 MB [rendered]
[0] multi main 64 bytes {0} [built]
[1] (webpack)-dev-server/client?http://localhost:8080 3.97 kB {0} [built]
[2] .//url/url.js 23.3 kB {0} [built]
[3] .//url//punycode/punycode.js 14.6 kB {0} [built]
[4] (webpack)/buildin/module.js 251 bytes {0} [built]
[5] .//url/util.js 314 bytes {0} [built]
[6] .//querystring/index.js 127 bytes {0} [built]
[7] .//querystring/decode.js 2.4 kB {0} [built]
[8] .//querystring/encode.js 2.09 kB {0} [built]
[9] .//strip-ansi/index.js 161 bytes {0} [built]
[10] .//ansi-regex/index.js 135 bytes {0} [built]
[11] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[12] .//sockjs-client/lib/entry.js 244 bytes {0} [built]
[13] .//sockjs-client/lib/transport-list.js 613 bytes {0} [built]
[14] .//sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
[15] .//process/browser.js 5.3 kB {0} [built]
[16] .//sockjs-client/lib/utils/event.js 2 kB {0} [built]
[17] .//sockjs-client/lib/utils/random.js 746 bytes {0} [built]
[18] .//sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
[19] .//sockjs-client/lib/utils/url.js 975 bytes {0} [built]
[20] .//url-parse/index.js 9.92 kB {0} [built]
[21] .//requires-port/index.js 753 bytes {0} [built]
[22] .//url-parse/lolcation.js 1.58 kB {0} [built]
[23] .//querystringify/index.js 1.3 kB {0} [built]
[24] .//debug/src/browser.js 4.71 kB {0} [built]
[25] .//debug/src/debug.js 4.31 kB {0} [built]
[26] .//ms/index.js 2.72 kB {0} [built]
[27] .//inherits/inherits_browser.js 672 bytes {0} [built]
[28] .//sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
[29] .//sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
[30] .//sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
[31] .//sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
[32] .//sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
[33] .//sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
[34] .//sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
[35] .//sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
[36] .//sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
[37] .//sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
[38] .//sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
[39] .//sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
[40] .//sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
[41] .//sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
[42] .//sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
[43] .//sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
[44] .//sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
[45] .//sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
[46] .//sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
[47] .//sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
[48] .//json3/lib/json3.js 43.3 kB {0} [built]
[49] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[50] .//sockjs-client/lib/version.js 26 bytes {0} [built]
[51] .//sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
[52] .//sockjs-client/lib/utils/object.js 532 bytes {0} [built]
[53] .//sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
[54] .//sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
[55] .//sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
[56] .//sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
[57] .//sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
[58] .//sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
[59] .//sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
[60] .//sockjs-client/lib/main.js 11.9 kB {0} [built]
[61] .//sockjs-client/lib/shims.js 18.2 kB {0} [built]
[62] .//sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
[63] .//sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
[64] .//sockjs-client/lib/utils/log.js 450 bytes {0} [built]
[65] .//sockjs-client/lib/event/event.js 477 bytes {0} [built]
[66] .//sockjs-client/lib/location.js 177 bytes {0} [built]
[67] .//sockjs-client/lib/event/close.js 295 bytes {0} [built]
[68] .//sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
[69] .//sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
[70] .//sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
[71] .//sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
[72] .//sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
[73] .//sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
[74] .//sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
[75] .//sockjs-client/lib/facade.js 723 bytes {0} [built]
[76] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
[77] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
[78] ./src/static/index.js 9.84 kB {0} [built]
[79] ./src/static/styles/main.scss 1.21 kB {0} [built]
[80] ./~~/css-loader!./~~/postcss-loader!.//sass-loader!./src/static/styles/main.scss 162 bytes {0} [built]
[81] .//css-loader/lib/css-base.js 1.51 kB {0} [built]
[82] .//style-loader/addStyles.js 7.15 kB {0} [built]
[83] ./src/elm/QuickSignEditor.elm 1.05 MB {0} [built]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [rendered]
[0] .//html-webpack-plugin/lib/loader.js!./src/static/index.html 1.81 kB {0} [built]
[1] ./~/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
webpack: bundle is now VALID.`

Here is my webpack.config.js in case I messed something up.
`var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var entryPath = path.join(__dirname, 'src/static/index.js');
var outputPath = path.join(__dirname, 'dist');

console.log('WEBPACK GO!');

// determine build env
var TARGET_ENV = process.env.npm_lifecycle_event === 'build' ? 'production' : 'development';
var outputFilename = TARGET_ENV === 'production' ? '[name]-[hash].js' : '[name].js'

// common webpack config
var commonConfig = {

output: {
    path: outputPath,
    filename: path.join('static/js/', outputFilename),
    publicPath: '/'
},

resolve: {
    extensions: ['', '.js', '.elm']
},

module: {
    noParse: /\.elm$/,
    loaders: [{
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        loader: 'file-loader'
    }]
},

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/static/index.html',
        inject: 'body',
        filename: 'index.html'
    })
],

postcss: [autoprefixer({ browsers: ['last 2 versions'] })],

}

// additional webpack settings for local env (when invoked by 'npm start')
if (TARGET_ENV === 'development') {
console.log('Serving locally...');

module.exports = merge(commonConfig, {

    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        entryPath
    ],

    devServer: {
        // serve index.html in place of 404 responses
        historyApiFallback: true,
    },

    module: {
        loaders: [{
                test: /\.elm$/,
                exclude: [/elm-stuff/, /node_modules/],
                loader: 'elm-hot!elm-webpack?verbose=true&warn=true&debug=true'
            },
            {
                test: /\.(css|scss)$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    }

});

}

// additional webpack settings for prod env (when invoked via 'npm run build')
if (TARGET_ENV === 'production') {
console.log('Building for prod...');

module.exports = merge(commonConfig, {

    entry: entryPath,

    module: {
        loaders: [{
                test: /\.elm$/,
                exclude: [/elm-stuff/, /node_modules/],
                loader: 'elm-webpack'
            },
            {
                test: /\.(css|scss)$/,
                loader: ExtractTextPlugin.extract('style-loader', [
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ])
            }
        ]
    },

    plugins: [
        new CopyWebpackPlugin([{
                from: 'src/static/img/',
                to: 'static/img/'
            },
            {
                from: 'src/favicon.ico'
            },
        ]),

        new webpack.optimize.OccurenceOrderPlugin(),

        // extract CSS into a separate file
        new ExtractTextPlugin('static/css/[name]-[hash].css', { allChunks: true }),

        // minify & mangle JS/CSS
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compressor: { warnings: false }
            // mangle:  true
        })
    ]

});

}`

Peter Morawiec · Answer 1 · Mon Jan 09 2017 20:49:31 GMT+0800 (China Standard Time)

"The system cannot find the path specified." <-- Something is off if you're seeing it; since your install fails, running npm start is bound to not work. Unfortunately I have no access to a Windows machine, but it could be also due to you changing any path info.

The reinstall script performs a number of commands in sequence. To start troubleshooting, it would be good to know at which step exactly are you failing. Try doing these one task at a time:

npm i rimraf 
rimraf node_modules
npm uninstall -g elm
npm i -g elm 
npm i 
elm package install

It's worth noting that the project structure changed (see the Changelog), so you should adapt your project to the latest folder structure (preferably), or vice versa. As another option, I'd try cloning and building a fresh elm-webpack-starter repo and, assuming it works, move your project over bit by bit..

JonathanDDuncan · Answer 2 · Tue Jan 10 2017 00:15:43 GMT+0800 (China Standard Time)

Thank you for helping me out it is very much appreciated.

I decided to trying to get everything to install properly in an "empty" starter folder downloaded from the master branch. Which isn't working

npm i rimraf
rimraf node_modules
npm uninstall -g elm
npm i -g elm

all ran without error, just a few warning. you can see them in attached file.

npm i

I got these warnings
`-- UNMET PEER DEPENDENCY elm-webpack-loader@3.1.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN elm-hot-loader@0.5.4 requires a peer of elm-webpack-loader@^4.1.1 but none was installed.

I tried manually installing
npm i elm-webpack-loader@^4.1.1
Which gave me these warnings

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

So I tried npm i elm-webpack-loader
which gave me these warnings
`-- UNMET PEER DEPENDENCY elm-webpack-loader@3.1.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN elm-hot-loader@0.5.4 requires a peer of elm-webpack-loader@^4.1.1 but none was installed.

Then I tried npm i elm-webpack-loader@3.1.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN elm-hot-loader@0.5.4 requires a peer of elm-webpack-loader@^4.1.1 but none was installed.

I am at loss as to what to try next.

install log.txt

JonathanDDuncan · Answer 3 · Tue Jan 10 2017 01:45:46 GMT+0800 (China Standard Time)

I tried manually installing each of the packages in the package.json file.

They all gave me the warning
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

See attached
package manual install.txt

Peter Morawiec · Answer 4 · Tue Jan 10 2017 07:42:58 GMT+0800 (China Standard Time)

Hmm, not getting other reports of this. How about trying updating your version of Node? I'm running 6.0

JonathanDDuncan · Answer 5 · Tue Jan 10 2017 11:01:46 GMT+0800 (China Standard Time)

I already updated my version of node. I am running version v6.9.4.

Asaf Cohen · Answer 6 · Wed Jan 11 2017 01:00:00 GMT+0800 (China Standard Time)

+1 i'm just gonna revert to 0.8.0
I've just noticed Main.elm doesn't have module Main..

Jeff Turley · Answer 7 · Thu Jan 12 2017 01:12:08 GMT+0800 (China Standard Time)

+1. Reverting to the 0.8.0 version of webpack.config.js got it going again. Maybe related to running on Windows?

JonathanDDuncan · Answer 8 · Sat Jan 14 2017 01:53:39 GMT+0800 (China Standard Time)

I tried reverting to 0.8.0 version but it didn't work either. I guess it just doesn't work well either on Windows or on my setup. Thank you all for being helpful.

Peter Morawiec · Answer 9 · Sat Jan 14 2017 04:07:49 GMT+0800 (China Standard Time)

I pushed a newer version yesterday, with updated packages. Perhaps give that a try, do a clean clone and install. Seemed to work fine, but that's on my Mac. Sorry I can't be of more help.

Oleksandr · Answer 10 · Sat Jan 14 2017 10:00:26 GMT+0800 (China Standard Time)

@JonathanDDuncan does you try resolve?
https://webpack.github.io/docs/troubleshooting.html#windows-paths

Guillaume Martin · Answer 11 · Sun Jan 15 2017 04:30:47 GMT+0800 (China Standard Time)

I had the same issue and created a pull request that makes webpack's config work on Windows machines.

#45