Dynamic import doesn't work with combined CRA and SSR

Question

I've created a website with create-react-app and now I want to use server side rendering because of seo.

After a long research I've found a simple tool here.

It works fine but in my code I have a dynamic import await import("localization/" + newLanguage + "/" + newLanguage + ".json"); and because of that I get a SyntaxError: Unexpected token import error.

I've also tried using System.import. That worked for SSR but CRA says 'System.import' is restricted from being used. Please use import() instead..

How can I solve this problem? I don't want to eject or similiar and hold it easy.

My index.js:

require('ignore-styles');
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env','react-app'],
  plugins: ["syntax-dynamic-import"]
});

require('./server');

And this is my server file:

import express from 'express';
import http from 'http';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from "react-router";
import App from "./src/App";

const port = 3000;
const app = express();
const server = http.createServer(app);

app.use((req, res) => {

    const context = {}
    const html = ReactDOMServer.renderToString(
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );

    if(context.url){
        res.status(302).redirect(context.url);
        return;
    }

    res.status(200).send(html);
});

server.listen(port, function(){
    console.log('Node server running on port ' + port + '.');
    console.log("Time: " + new Date(Date.now()));
});

Answer 1

Ok. I've got it.

I've used the syntax-dynamic-import plugin from babel. With dynamic-import-node from airbnb it works.