Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined

[jeanbza]

When I npm install --save-dev babel-standalone and import 'babel-standalone', my browser console gives me:

[jeanbza]

Got it to work with exclude: /node_modules/ in our webpack.

May be worth writing up a small example of how to use webpack + babel-standalone + imports?

For anyone stumbling across this in the future, here's how we're doing it:

.babelrc

{
  "presets": ["es2015", "react"]
}

webpack.config.babel.js

import path from 'path'

export default {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  },
  node: {
    fs: 'empty',
  },
  devtool: 'inline-source-map'
}

app.jsx

import React from 'react'
import ReactDOM from 'react-dom'

import * as Babel from 'babel-standalone'

const handleClick = () => {
  console.log(Babel)

  var input = 'const getMessage = () => "Hello World";';
  var output = Babel.transform(input, { presets: ['es2015'] }).code;
  console.log(output)
}

const app = <div>
  <button onClick={handleClick}> click me</button>
  <div id="outputArea" style={{backgroundColor: 'red'}}>output area</div>
</div>

ReactDOM.render(app, document.getElementById('root'))

[Daniel15]

May be worth writing up a small example of how to use webpack + babel-standalone + imports?

I don't think this is a very common use case, hence there's not a lot of documentation around it 😃

[jeanbza]

@Daniel15 It's not? Isn't that what React's code editor and various other code editors use?