Can't Import From ES6

[thoov]

Can't Import From ES6

[saulshanabrook]

I realized I can use import 'mock-socket/dist/mock-socket' instead.

Is it impossible to import es6 .js files from a npm installed package, with webpack?

Because although it works this way, it seems better to require the original file. Webpack gives me this warning:

WARNING in ./~/mock-socket/dist/mock-socket.js
Critical dependencies:
1:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/mock-socket/dist/mock-socket.js 1:113-120

[thoov]

Thanks for the issue @saulshanabrook. You can import the individual JS files you will just need to have a es6 to es5 transpiler (such as babel) sit right before the webpack step. You can see how I do it in broccoli:

First I run babel over all of my files:

mock-socket/Brocfile.js

Line 36 in a625630

var es5Tree = babelTransform(completeTree, {

Then I send them to browserify:

mock-socket/Brocfile.js

Line 47 in a625630

var browserifiedTree = fastBrowserify(es5Tree, {

I have never done this using webpack but there should be tutorials online about setting up babel + webpack

[saulshanabrook]

Thanks for the response @thoov. The thing is, I have babel set up and it works right on all my local files. I have webpack set up to use babel for all .js files.

[thoov]

Can you paste in the "bundler" file so I can see how you are preparing the files for babel?

[saulshanabrook]

webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var loadersByExtension = require('./config/loadersByExtension')
var booleanFromEnv = require('./config/booleanFromEnv')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AutoprefixerCore = require('autoprefixer-core')

var plugins = [
  new webpack.PrefetchPlugin('react'),
  new HtmlWebpackPlugin({
    inject: true,
    template: 'app/index.html'
  }),
  new webpack.PrefetchPlugin('react/lib/ReactComponentBrowserEnvironment'),
  new ExtractTextPlugin('[name].css', {
    allChunks: true
  }),
  new webpack.NoErrorsPlugin()
]

if (booleanFromEnv('WEBPACK_MINIMIZE_DEV', false)) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  )
}

if (booleanFromEnv('WEBPACK_HOT_COMPONENTS', false)) {
  plugins.push(
    new webpack.HotModuleReplacementPlugin()
  )
}

module.exports = {
  entry: booleanFromEnv('WEBPACK_HOT_COMPONENTS', false) ? [
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    'webpack/hot/dev-server',
    './app/mainApp'
  ] : './app/mainApp',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    pathinfo: process.env.WEBPACK_PATH_INFO
  },
  module: {
    loaders: loadersByExtension({
      'jsx': booleanFromEnv('WEBPACK_HOT_COMPONENTS', false) ? ['react-hot', 'babel-loader?stage=0'] : 'babel-loader?stage=0',
      'js': {
        loader: 'babel-loader?stage=0',
        include: path.join(__dirname, 'app')
      },
      'json': 'json-loader',
      'json5': 'json5-loader',
      'txt': 'raw-loader',
      'png|jpg|jpeg|gif|svg': 'url-loader?limit=10000',
      'woff|woff2': 'url-loader?limit=100000',
      'ttf|eot': 'file-loader',
      'wav|mp3': 'file-loader',
      'html': 'html-loader',
      'md|markdown': ['html-loader', 'markdown-loader'],
      'css': ExtractTextPlugin.extract('style-loader', 'css-loader?module&importLoaders=1!postcss-loader'),
      'less': ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')

    }),
    preloaders: loadersByExtension({
      'js': 'source-map-loader'
    })
  },
  postcss: [AutoprefixerCore],
  devtool: process.env.WEBPACK_DEVTOOL,
  debug: booleanFromEnv('WEBPACK_DEBUG', false),
  resolve: {
    root: path.join(__dirname, 'app'),
    extensions: ['', '.web.js', '.js', '.jsx']
  },
  plugins: plugins,
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    inline: true
  }
}

config/loadersByExtensions.js:

function extsToRegExp (exts) {
  return new RegExp('\\.(' + exts.map(function (ext) {
    return ext.replace(/\./g, '\\.')
  }).join('|') + ')(\\?.*)?$')
}

module.exports = function loadersByExtension (obj) {
  var loaders = []
  Object.keys(obj).forEach(function (key) {
    var exts = key.split('|')
    var value = obj[key]
    var entry = {
      extensions: exts,
      test: extsToRegExp(exts)
    }
    if (Array.isArray(value)) {
      entry.loaders = value
    } else if (typeof value === 'string') {
      entry.loader = value
    } else {
      Object.keys(value).forEach(function (valueKey) {
        entry[valueKey] = value[valueKey]
      })
    }
    loaders.push(entry)
  })
  return loaders
}

config/booleanFromEnv.js:

module.exports = function booleanFromEnv (key, defaultValue) {
  return JSON.parse(process.env[key] || defaultValue)
}

package.json:

{
  "name": "react-starter",
  "version": "0.0.0",
  "description": "",
  "main": "app/app.js",
  "scripts": {
    "lint": "standard",
    "test-docker": "env WDIO_DOCKER=true wdio wdio.conf.js",
    "test-saucelabs": "env WDIO_SAUCELABS=true wdio wdio.conf.js",
    "dev-server": "env WEBPACK_DEV_SERVER=true WEBPACK_DEVTOOL=eval-source-map WEBPACK_DEBUG=true webpack-dev-server --colors --progress --hot",
    "build": "env WEBPACK_DEV_MINIMIZE=true webpack --progress --profile --colors"
  },
  "license": "MIT",
  "dependencies": {
    "async": "^1.4.0",
    "autoprefixer-core": "^5.2.1",
    "babel-core": "^5.8.5",
    "babel-eslint": "^4.0.0",
    "babel-loader": "^5.3.2",
    "baobab-react": "^0.1.1",
    "bootstrap": "^3.3.5",
    "bootswatch": "^3.3.5",
    "chai": "^3.2.0",
    "chai-as-promised": "^5.1.0",
    "css-loader": "^0.15.5",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "html-loader": "^0.3.0",
    "html-webpack-plugin": "^1.6.0",
    "items-store": "^0.7.0",
    "json-loader": "^0.5.2",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "markdown-loader": "^0.1.3",
    "mocha": "^2.2.5",
    "mock-socket": "^0.5.4",
    "postcss-loader": "^0.5.1",
    "query-string": "^2.4.0",
    "react": "^0.13.3",
    "react-hot-loader": "^1.2.8",
    "source-map-loader": "^0.1.5",
    "standard": "^4.5.4",
    "style-loader": "^0.12.3",
    "superagent": "^1.2.0",
    "url-loader": "^0.5.6",
    "webdriverio": "^3.1.0",
    "webpack": "^1.10.5",
    "webpack-dev-server": "^1.10.1"
  },
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "WebSocket",
      "describe",
      "it",
      "location"
    ]
  }
}

[thoov]

import { SocketIO, Server } from 'mock-socket';

Now works