maker's avatar
Level 1

import {} from converts to require()

I am in the process of setting up Elixir in laravel 5.2. My old Gulp script is maybe 1000 lines long and 3 generations old. It's a glass house.

I have about 75% of my project converted over in minutes but I have been stuck trying to compile my React Code.

I am using the object spread ... and @function()

A sample:

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import { eventTracker } from './components/inventory/mixpanelMiddleware'
import { inventorySearch } from './components/inventory/reducers'
import { initialState } from './components/inventory/InventoryApp'

// set up a global redux store
const state = {
    ...initialState,
    mygo_authenticated: window._mygo_authenticated,
    saved_vehicles: {
        item_keys: window._saved_vehicle_item_keys || [],
        entities: {},
    }
}
const store = applyMiddleware(thunk, eventTracker)(createStore)(inventorySearch, state);
window.store = store;

compiles to:

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _redux = require('redux');

var _reduxThunk = require('redux-thunk');

var _reduxThunk2 = _interopRequireDefault(_reduxThunk);

var _mixpanelMiddleware = require('./components/inventory/mixpanelMiddleware');

var _reducers = require('./components/inventory/reducers');

var _InventoryApp = require('./components/inventory/InventoryApp');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// set up a global redux store
var state = _extends({}, _InventoryApp.initialState, {
    mygo_authenticated: window._mygo_authenticated,
    saved_vehicles: {
        item_keys: window._saved_vehicle_item_keys || [],
        entities: {}
    }
});
var store = (0, _redux.applyMiddleware)(_reduxThunk2.default, _mixpanelMiddleware.eventTracker)(_redux.createStore)(_reducers.inventorySearch, state);
window.store = store;
//# sourceMappingURL=store.js.map

I am not sure why import is changing to require

My Elixir task:

elixir.config.js.babel.options = {
    plugins: ['transform-object-rest-spread', 'transform-class-properties'],
    presets: ['es2015', 'react', 'stage-0']
}

mix.babel('./resources/assets/common/js/store.js', './public/static/common/js/store.js')

When I try Browserify I get errors like ... Unexpected token

0 likes
1 reply
maker's avatar
maker
OP
Best Answer
Level 1

Finally!

    elixir.config.js.browserify.transformers = [
        {
            name: 'babelify',
            options: babelOptions,
        }
    ]

Not sure how I missed this. But its more or less exactly the same flow as my original script.

Please or to participate in this conversation.