load dependent modules in chunks with react loadable

Question

The Application (build in "react": "15.4.1" ) has some dependent modules.Dependent Modules are referred in package.json : "git+https://git.xyz.net/myApp/ui/myModule.ui.git#v0.0.4",.

myModule has same logical entities. Now I applied lazy loading on myModule using "react-loadable": "4.0.3",.

I am getting below chunks when i run npm start on myModule:

0.my-Module-ui.js
1.my-Module-ui.js
2.my-Module-ui.js
my-Module-ui.js

webpack file for myModule :

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'my-Module-ui.js',
    // chunkFilename: '[name].js',
    libraryTarget: 'umd',
    publicPath: '/',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
  module: {
    loaders: [
      {
        test: /\.(json)$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:{
          presets: ["es2015" , "stage-0", "react"],
          plugins: ["transform-runtime"],
        }
      },
      {
        test: /\.(sass|less|css)$/,
        loaders: ['style-loader', 'css-loader', 'less-loader']
      },
    // Load images
      { test: /\.jpg/, loader: "url-loader?limit=10000&mimetype=image/jpg" },
      { test: /\.gif/, loader: "url-loader?limit=10000&mimetype=image/gif" },
      { test: /\.png/, loader: "url-loader?limit=10000&mimetype=image/png" },
      { test: /\.svg/, loader: "url-loader?limit=10000&mimetype=image/svg" },


    // Load fonts
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
      { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
    ]
  },
  // plugins: [
  //   new webpack.optimize.UglifyJsPlugin({comments: false, compress: { warnings: false }, screw_ie8: true})
  // ]
};

Webpack version in package.json : "webpack": "^3.0.0",

Issue: when I load the main app,My Main App home screen has some widget which uses the dependent modules doesn't gets loaded but we see error in console.

2.my-Module-ui.js:1 Uncaught SyntaxError: Unexpected token <
my-Module-ui.js:109 Uncaught (in promise) Error: Loading chunk 2 failed.
    at HTMLScriptElement.onScriptComplete (my-Module-ui.js:109)

I have tried everything since yesterday...Please help me out on this ,Please let me know if any others details are required

load dependent modules in chunks with react loadable

0 Answers0