index.js not loading

Question

I'm having a problem loading the index.js in my Elm application. I'm not sure where the root of this problem is, so any help would be lovely.

I'm building an elm application, and recently introduced routing to the application, which is when the problem began. I access the app from

http://localhost:8001/

and originally used a hard-coded organization id. At this stage, everything worked just dandy.

However, I adapted the app so the user must specify an organization id in the url, as follows:

http://localhost:8001/organization/100

Now I receive this error message in the chrome console:

x GET http://localhost:8001/elm.js 

My file structure looks like this:

• root

  • elm-package.json
  • package.json
  • webpack.config.js
  • elm-stuff
  • node-modules

  • src

    • elm

      • Main.elm
      • Messages.elm
      • Helpers.elm

      ...

    • static
      • styles
        • main.scss
      • index.html
      • index.js
      • img

As you can see, there is no "main.js" file, nor is there an "organization" directory.

When I remove "organization/100" from the url, the Elm code compiles perfectly and the code works (except of course for the fact that it doesn't find an organization).

I'm not sure which code samples to show, because I'm really not sure where the source of the problem lies, but I'll show you my webpack.config.js file, because it's normally in charge of loading files. It's basically taken directly from moarwick/elm-webpack-starter

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: `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:8001',
      entryPath
    ],

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

    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
      })
    ]

  });
}

And "package.json"

{
  "name": "elm-webpack-starter",
  "description": "Webpack setup for writing Elm apps",
  "version": "0.8.4",
  "license": "MIT",
  "author": "Peter Morawiec",
  "repository": {
    "type": "git",
    "url": "https://github.com/moarwick/elm-webpack-starter"
  },
  "scripts": {
    "start": "webpack-dev-server --hot --inline --port 8001",
    "build": "rimraf dist && webpack && mv dist/*.eot dist/static/css/ && mv dist/*.woff* dist/static/css/ && mv dist/*.svg dist/static/css/ && mv dist/*.ttf dist/static/css/",
    "reinstall": "npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "bootstrap-sass": "^3.3.6",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "elm": "^0.18.0",
    "elm-hot-loader": "^0.5.4",
    "elm-webpack-loader": "^4.1.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.17.0",
    "jquery": "^3.1.0",
    "node-sass": "^4.2.0",
    "postcss-loader": "^1.1.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^2.4.0"
  }
}

Answer 1

<script src="static/js/main.js">

is relative to your current path so if called from:

http://localhost:8001/organization/  

the path defaults to:

http://localhost:8001/organization/static/js/main.js

but

<script src="/static/js/main.js">

will always be at:

http://localhost:8001/static/js/main.js

no matter where the code is called from...

Taking the above into account and looking at the code you provided:
I think you need to do something like changing:

filename: `static/js/${outputFilename}`,

to:

filename: `/static/js/${outputFilename}`,

or putting a '/' somewhere before:
'styles.css' (ie '/styles.css') and
'static/js/main.js' (ie '/static/js/main.js')