webpack - Unexpected token when compiling ES6 to ES5, what's going on? -
i'm trying upgrade cljsjs package react-toolbox requires compiling whole project es6 es5. i'm getting 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) may need appropriate loader handle file type. | export { default progressbar } './progress_bar'; | export * './radio'; | export ripple './ripple'; | export { default slider } './slider'; | export { default snackbar } './snackbar'; ripple seems offending token. ideas what's going on?
the full file contains:
import './utils/polyfills'; // import polyfills ie11 export { overridecomponenttypechecker } './utils/is-component-of-type'; export { default appbar } './app_bar'; export { default autocomplete } './autocomplete'; export { default avatar } './avatar'; export * './button'; export * './card'; export { default chip } './chip'; export { default checkbox } './checkbox'; export { default datepicker } './date_picker'; export { default dialog } './dialog'; export { default drawer } './drawer'; export { default dropdown } './dropdown'; export { default fonticon } './font_icon'; export { default input } './input'; export * './layout'; export { default link } './link'; export * './list'; export * './menu'; export { default navigation } './navigation'; export { default progressbar } './progress_bar'; export * './radio'; export ripple './ripple'; export { default slider } './slider'; export { default snackbar } './snackbar'; export { default switch } './switch'; export * './table'; export * './tabs'; export tooltip './tooltip'; export { default timepicker } './time_picker'; and webpack config i'm building, far, looks 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) }) ] };
the error says
export ripple './ripple'; is not valid es6. needs be
export {default ripple} './ripple'; your current code require loading https://babeljs.io/docs/plugins/transform-export-extensions/.
Comments
Post a Comment