babel-core/register

I’m trying to use this babel-plugin with babel-core/register.

entry.js

require('babel-polyfill');
require('babel-core/register')({
  plugins: ["universal-import"],
});
require('./server/server.js');

.babelrc

{
  "presets": [
    "es2015", "react", "stage-0"
  ],
  "plugins": [
    "transform-async-to-generator",
    "universal-import"
  ]
}

client side routes

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import universal from 'react-universal-component';

const Routes = () => (
  <Switch>
    <Route path="/page" component={universal(import('./Page'))} />
  </Switch>
);

export default Routes;

error log

$ node ./src/entry.js

/Users/erickim/Develop/front/react/test-project/src/client/index.js:39
          return Promise.all([import( /* webpackChunkName: 'Page' */'./Page'), (0, _importCss3.default)('Page')]).then(function (proms) {
                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at loader (/Users/erickim/Develop/front/react/test-project/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/erickim/Develop/front/react/test-project/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
error Command failed with exit code 1.

No error if I’m running a webpack build, though. So I guess this might be a problem with babel-core/register? 🤔🤔

[hrasoa]

For the js error i rolled back babel-plugin-dynamic-import-node to fixed 1.0.2

@kimjuny as u suggested I changed this and it works now:

export default universal(import('./About'));

to

export default universal(import('./About'), {
  path: require('path').resolve(__dirname, './About'),
  resolve: () => require.resolveWeak('./About'),
  chunkName: 'About'
});

[faceyspacey]

It’s primarily for webpack, but try one these 2 plugins in addition:

https://github.com/airbnb/babel-plugin-dynamic-import-node

https://github.com/airbnb/babel-plugin-dynamic-import-webpack

Without webpack, babel can’t deal with import without a separate plugin.

Check these docs: https://github.com/faceyspacey/webpack-flush-chunks/blob/master/docs/babel-config.md

If you can’t get it working, feel free to hit me on Reactlandia Chat. The challenge with this approach is that it’s the “frameworkless approach.” So we get to do a lot of the stuff you can do with Next.js, but with far more flexibility. The challenge is all the initial setup we gotta do for this “privilege.” But once we get it, it’s smooth sailing.