fiddlest
fiddlest

Reputation: 1302

@babel/register does not seem to transform my code into es6, react

I am trying to make SSR version of the react-boilerplate so I need to import React component to the node. However, @babel/register does not seem to transform code based on my babel.config.js

server/index.js file require('frontendMiddleware.js')

and in the frontendMiddleware.js

module.exports = (app, options) => {
  const isProd = process.env.NODE_ENV === 'production';

  if (isProd) {
    require('@babel/register')(require('../../babel.config.js'));
    const addProdMiddlewares = require('./addProdMiddlewares');
    addProdMiddlewares(app, options);
  } else {
    const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
    const addDevMiddlewares = require('./addDevMiddlewares');
    addDevMiddlewares(app, webpackConfig);
  }

  return app;
};

Error on node server starts

import React from 'react'
       ^^^^^

SyntaxError: Unexpected identifier

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'styled-components',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
  ],
  env: {
    production: {
      plugins: [
        'lodash',
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
      ],
    },
    test: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
        'dynamic-import-node',
      ],
    },
  },
};

I have seen my project have exactly same setup for react ssr but this one does not work.

Upvotes: 0

Views: 287

Answers (0)

Related Questions