Unexpected token when compiling ES6 to ES5, what's going on?

Question

I'm trying to upgrade the cljsjs package for react-toolbox which requires compiling the whole project from ES6 to ES5. I'm getting this error:

Hash: b375d2042d9b41b2ee59
Version: webpack 2.7.0
Time: 95ms
               Asset     Size  Chunks             Chunk Names
react-toolbox.inc.js  27.7 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in ./packages/react-toolbox/src/components/index.js
Module parse failed: /Users/pupeno/.boot/cache/tmp/Users/pupeno/Documents/code/clojure/packages/react-toolbox/ah7/x50qw4/react-toolbox-react-toolbox-2.0.0-beta.12/packages/react-toolbox/src/components/index.js Unexpected token (24:7)
You may need an appropriate loader to handle this file type.
| export { default as ProgressBar } from './progress_bar';
| export * from './radio';
| export Ripple from './ripple';
| export { default as Slider } from './slider';
| export { default as Snackbar } from './snackbar';

Ripple seems to be the offending token. Any ideas what's going on?

The full file contains:

import './utils/polyfills'; // Import polyfills for IE11

export { overrideComponentTypeChecker } from './utils/is-component-of-type';
export { default as AppBar } from './app_bar';
export { default as Autocomplete } from './autocomplete';
export { default as Avatar } from './avatar';
export * from './button';
export * from './card';
export { default as Chip } from './chip';
export { default as Checkbox } from './checkbox';
export { default as DatePicker } from './date_picker';
export { default as Dialog } from './dialog';
export { default as Drawer } from './drawer';
export { default as Dropdown } from './dropdown';
export { default as FontIcon } from './font_icon';
export { default as Input } from './input';
export * from './layout';
export { default as Link } from './link';
export * from './list';
export * from './menu';
export { default as Navigation } from './navigation';
export { default as ProgressBar } from './progress_bar';
export * from './radio';
export Ripple from './ripple';
export { default as Slider } from './slider';
export { default as Snackbar } from './snackbar';
export { default as Switch } from './switch';
export * from './table';
export * from './tabs';
export Tooltip from './tooltip';
export { default as TimePicker } from './time_picker';

and the webpack config I'm building, so far, looks like this:

const pkg = require('./package');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const entryName = "react-toolbox.inc";

const extractCss = new ExtractTextPlugin({ filename: entryName + '.css', allChunks: true });

module.exports = {
    target: 'web',
    context: __dirname,
    entry: path.join(__dirname, "packages", "react-toolbox", "src", "components", "index.js"),
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-addons-css-transition-group": "React.addons.CSSTransitionGroup"
    },
    output: {
        path: __dirname,
        filename: entryName + '.js',
        libraryTarget: 'var',
        library: 'ReactToolbox'
    },
    resolve: {
        extensions: ['.js', '.css', '.json'],
        modules: ['node_modules']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: [
                    path.join(__dirname, './components'),
                    path.join(__dirname, './spec')
                ]
            }, {
                test: /\.css$/,
                include: [
                    path.join(__dirname, './components'),
                    path.join(__dirname, './spec'),
                        /node_modules/
                ],
                use: extractCss.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]',
                                sourceMap: true
                            },
                        },
                        'postcss-loader'
                    ]})
            }
        ]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                context: __dirname,
                postcss: function () {
                    return [
                        require('postcss-import')({
                            root: __dirname,
                            path: [path.join(__dirname, './components')]
                        }),
                        require('postcss-mixins')(),
                        require('postcss-each')(),
                        require('postcss-cssnext')(),
                        require('postcss-reporter')({
                            clearMessages: true
                        })
                    ];
                }
            }
        }),
        extractCss,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
            VERSION: JSON.stringify(pkg.version)
        })
    ]
};

score 1 · Accepted Answer · answered Jul 25 '17 at 19:01

1

The error is just what it says

export Ripple from './ripple';

is not valid ES6. It needs to be

export {default as Ripple} from './ripple';

Your current code would require loading https://babeljs.io/docs/plugins/transform-export-extensions/.

answered Jul 25 '17 at 19:01

loganfsmyth

156,129
30
331
251

How do you load that plug in on webpack? – Pablo Fernandez Jul 25 '17 at 20:30
You'd install it and add it to your Babel configuration. – loganfsmyth Jul 25 '17 at 20:52
How is it supposed to work on the CI then? Shouldn't this type of things be specified in the web pack or some other file that is in the repo? – Pablo Fernandez Jul 26 '17 at 00:26
I'm not sure why you're wondering about CI. If you configure Babel, that config will be part of your code repo like anything else. There are tons of docs online, including the page I linked to, that explain how to enable Babel plugins. Given that your question never asked about Babel and specifically asked about ES6, it seems like changing the format of your export is more what you're looking for? – loganfsmyth Jul 26 '17 at 00:28
I'm asking because all my babel setup is in webpack.config and the documentation wasn't clear whether the .bable file goes in my home directory or somewhere else. I couldn't find much online about this plug in and webpack. What do you mean about changing the format of the export? I'm trying to compile to ES5. – Pablo Fernandez Jul 26 '17 at 00:33
You only need the Babel plugin if you want to keep `export Ripple from './ripple';` as-is, if you change it to my second example, it will work without the plugin. `.babelrc` files go in your project folder if you do go that route. – loganfsmyth Jul 26 '17 at 00:36
It is not up to me how the library is written. I can send pull requests but I have no control over it. – Pablo Fernandez Jul 26 '17 at 00:38

Unexpected token when compiling ES6 to ES5, what's going on?

1 Answers1