Webpack + Renderers problem

[wezzou1]

Hi, thanks again for an awesome plugin! I saw that you guys render the highway files like this..

        this.H = new Highway.Core({
            renderers: {
                'home': () => import('../renderers/home'),
                'page': () => import('../renderers/page'),
                'default': DefaultRenderer
            },
            transitions: {
                default: DefaultTransition
            }
        })

And It's working fine, but when I now run my webpack, I've got some new files in my dist map, I've got files like this

0.bundle.js 1.bundle.js 2.bundle.js 3.bundle.js 4.bundle.js

My webpack file

'use strict';

const path = require('path')
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const SvgStore = require('webpack-svgstore-plugin')

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: {
    app: './js/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },       
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          enforce: true
        },
      }
    } 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                [ "@babel/preset-env", {
                  targets: {
                    browsers: [
                      '> 0.25%',
                      'edge >= 14',
                      'not ie <= 10',
                      'not op_mini all'
                    ]
                  },
                  useBuiltIns: 'usage'
                }]
              ],
              plugins: ['@babel/plugin-syntax-dynamic-import']
            },
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { 
            loader: 'css-loader', 
            options: { 
              importLoaders: 1 
            }
          },
          {
            loader: 'sass-loader'
          }
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=1000&name=[name]-[hash].[ext]'
      }
    ],
  },
  externals: {
      'TweenMax': 'TweenMax'
  },
  resolve: {
    alias: {
      'highway': 'build/es5/highway.min.js'
    },
    modules: ['.', 'node_modules'],
    extensions: ['.js']
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "app.bundle.css"
    }),
    new SvgStore({
      // svgo options
      svgoOptions: {
        plugins: [
          { removeTitle: true }
        ]
      },
    }),
  ],
};

[wezzou1]

I'm also got this

app.bundle.js:147 GET http://test.localhost/women/1.bundle.js net::ERR_ABORTED 404 (Not Found)
./js/app.js @ app.bundle.js:243
__webpack_require__ @ app.bundle.js:84
checkDeferredModules @ app.bundle.js:46
app.bundle.js:135 Uncaught (in promise) Error: Loading chunk 1 failed.
(error: http://test.localhost/women/1.bundle.js)
    at HTMLScriptElement.onScriptComplete (app.bundle.js:135)

[wezzou1]

It's seems to only happend when I'm trying to import renders like this

            renderers: {
                'home': () => import('../renderers/home'),
                'page': () => import('../renderers/page'),
                'default': DefaultRenderer
            },

[ThaoD5]

Hey @wezzou1, We don't forget this, I am planning to have a look when I have some spare time to find the reason / a solution to this, but at first glance it may be a webpack configuration issue..

I'll let you know and run some tests :-)

[wezzou1]

@ThaoD5 Alright! :) Yes, I also think it's a webpack configuration problem :)

[IlaneLopez]

Hi! I have the same issue, any solution found?

[wezzou1]

@IlaneLopez I'm just running the highway as they say in the documents for now, without chunkfiles/dynamic imports. I don't remember if I solved it for myself or not.. but if you find a solution, let me know =)