ES6 Modules not compiled before distribution

[tjrawrin]

I'm getting the following error while trying to use luminous with webpack.

ERROR in ./~/luminous-lightbox/src/js/Luminous.js
Module parse failed: /home/user/project/node_modules/luminous-lightbox/src/js/Luminous.js Unexpected token (6:10)
You may need an appropriate loader to handle this file type.
|
| module.exports = class Luminous {
|   VERSION = '1.0.1'
|
|   constructor(trigger, options = {}) {
 @ ./~/luminous-lightbox/src/js/lum-require.js 1:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 luminous-lightbox

ERROR in ./~/luminous-lightbox/src/js/LuminousGallery.js
Module parse failed: /home/user/project/node_modules/luminous-lightbox/src/js/LuminousGallery.js Unexpected token (46:14)
You may need an appropriate loader to handle this file type.
|   }
|
|   boundMethod = () => {
|
|   };
 @ ./~/luminous-lightbox/src/js/lum-require.js 2:0-48
 @ multi (webpack)-dev-server/client?http://localhost:8080 luminous-lightbox

Using either const Luminous = require('luminous-lightbox').Luminous; or import { Luminous } from 'luminous-lightbox'; gives the same error. I've also tried many different babel plugins, including babel-preset-latest and babel-preset-stage-0 with no luck.

Webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: [
      './main.js',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: 'index.html',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    stats: {
      assets: false,
      modules: false,
    },
  },
};

.babelrc settings:

{
  "presets": ["latest", "stage-0"]
}

Using the following:

"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-latest": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"html-webpack-plugin": "^2.28.0",
"luminous-lightbox": "^1.0.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"

I'm not an expert with webpack so I may be doing something wrong or missing a configuration option. Any help would be appreciated.

Thanks!

[AnalogMemory]

I'm getting the same error. I'm assuming it's from babel finding errors.

[sudomabider]

+1 same error

[asprouse]

@kstdnr
Looks like the package.json points directly to uncompiled ES6 Stage 2. Add the package to your rules:

{
  test: /\.js$/,
  include: /node_modules\/luminous-lightbox/,
  loader: 'babel-loader'
},

And make sure that you have at least stage-2 babel preset (stage-0 includes stage-2). While this is a decent workaround, this package should really export precompiled code so that it is compatible with projects that are not using babel.

[sonic1blaster]

+1 same (webpack 2.6.1, babel 6.23.0) with presets es2015

[izcream]

+1 same too

[dnt294]

+1 :(

[chriso2014]

+1

[vikdiesel]

+1 same error

[CHANist]

+1 same error
but fix, by altering webpack config.

{
test: /.js$/,
loader: 'babel-loader',
// exclude: /node_modules/,
exclude: /node_modules/(?!(luminous-lightbox)/).*/,
},

[seangwright]

Made a PR #50 for this which I've tested locally and can confirm it works if you use window.Luminous and add import 'luminous-lightbox'; to your app.

Edit --

Also made a quick fork for my own uses https://www.npmjs.com/package/sgwatnpm-luminous-lightbox
The only change is the PR above (and /src, /test folders removed).

[koko236]

Just to underline what's written above (for blind people like me).

1. You need to import 'luminous-lightbox';
2. BUT you can access Luminous and LuminousGalleryonly globally by window.Luminous and window.LuminousGallery. I.e. no import { Luminous } or import Luminous, etc. will work.

[mikker]

I needed to

import 'luminous-lightbox/dist/Luminous.min';

Then use window.Luminous

[grabus]

would be great if someone change documentation, because it is wrong https://github.com/imgix/luminous#installation (part about es6)

[frederickfogerty]

Hey all! 👋

Fred from Imgix here, and from today I'll be responsible for the maintenance of this repo. I'll have a look at updating any necessary documentation and also look at updating the webpack config to solve these issues 👍

[frederickfogerty]

Hey @AnalogMemory and @grabus 👋 I noticed that you responded to my last comment and so I'd like to see if you were interested in reviewing my PR which fixes this issue? The PR is #61.

[AnalogMemory]

@frederickfogerty I'll take a look later tonight! :)