ES2015 for node

[DB-Alex]

Is it possible to use ES2015 modules in node?

[jamesknelson]

Not directly. They'll need to be compiled to commonjs. Universal-react-scripts should take care of this for any modules in your src directory, but will not do so for anything in node_modules - just as with create-react-app.

[DB-Alex]

But what i don't understand is in the client mode the Unexpected token export does not come up. So it should be compiled somewhere in the dev server right?

[jamesknelson]

I’m honestly not sure why this is, but if this is with loadable components then it’s out of my experience so I can’t support it, sorry.

On Wed, Jul 24, 2019 at 23:45 Alex van der Vegt notifications@github.com wrote:

But what i don't understand is in the client mode the Unexpected token export does not come up. So it should be compiled somewhere in the dev server right?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/jamesknelson/create-react-app/issues/1?email_source=notifications&email_token=AABHPK6KNVR6BRKKHVX2JLDQBBTJPA5CNFSM4IGQZCX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2WSFBQ#issuecomment-514663046, or mute the thread https://github.com/notifications/unsubscribe-auth/AABHPK4S7WF6O4QOFCFWPY3QBBTJPANCNFSM4IGQZCXQ .

[DB-Alex]

No this has nothing to with loadable components for now, i am just using the preloadAll function before i start rendering the index.node.js response.

This also includes some modules from the node_modules folder and then the error turns up.

[jamesknelson]

I see. It may be to do with the modules exporting both a “main” and a “web” field from package.json. In this case, the “web” file will be used in the browser, while the “main” file will be used on node.js.

Can you take a look at the relevant package.json and see if this could be it?

On Wed, Jul 24, 2019 at 23:50 Alex van der Vegt notifications@github.com wrote:

No this has nothing to with loadable components for now, i am just using the preloadAll function before i start rendering the index.node.js response.

This also includes some modules from the node_modules folder and then the error turns up.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/jamesknelson/create-react-app/issues/1?email_source=notifications&email_token=AABHPK5ZGHSLFGZIKL2FHIDQBBT2HA5CNFSM4IGQZCX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2WST7Q#issuecomment-514664958, or mute the thread https://github.com/notifications/unsubscribe-auth/AABHPK2ERIGGASLEY4QWKDLQBBT2HANCNFSM4IGQZCXQ .

[DB-Alex]

I dont see a web file, i think?

{ "name": "@material-ui/core", "private": false, "author": "Material-UI Team", "version": "3.9.3", "description": "React components that implement Google's Material Design.", "keywords": [ "react", "react-component", "material design", "material-ui" ], "repository": { "type": "git", "url": "https://github.com/mui-org/material-ui.git" }, "license": "MIT", "bugs": { "url": "https://github.com/mui-org/material-ui/issues" }, "homepage": "https://material-ui.com/", "peerDependencies": { "react": "^16.3.0", "react-dom": "^16.3.0" }, "dependencies": { "@babel/runtime": "^7.2.0", "@material-ui/system": "^3.0.0-alpha.0", "@material-ui/utils": "^3.0.0-alpha.2", "@types/jss": "^9.5.6", "@types/react-transition-group": "^2.0.8", "brcast": "^3.0.1", "classnames": "^2.2.5", "csstype": "^2.5.2", "debounce": "^1.1.0", "deepmerge": "^3.0.0", "dom-helpers": "^3.2.1", "hoist-non-react-statics": "^3.2.1", "is-plain-object": "^2.0.4", "jss": "^9.8.7", "jss-camel-case": "^6.0.0", "jss-default-unit": "^8.0.2", "jss-global": "^3.0.0", "jss-nested": "^6.0.1", "jss-props-sort": "^6.0.0", "jss-vendor-prefixer": "^7.0.0", "normalize-scroll-left": "^0.1.2", "popper.js": "^1.14.1", "prop-types": "^15.6.0", "react-event-listener": "^0.6.2", "react-transition-group": "^2.2.1", "recompose": "0.28.0 - 0.30.0", "warning": "^4.0.1" }, "sideEffects": false, "publishConfig": { "access": "public" }, "engines": { "node": ">=6.0.0" }, "main": "./index.js", "module": "./index.es.js" }

[DB-Alex]

I also got some feedback on the material-ui github:

Somewhere in your build setup you're aliasing to the ES 8 build without transpiling it for the server.

referencing this page: https://material-ui.com/guides/minimizing-bundle-size/#ecmascript

[jamesknelson]

Okay, I have one idea for the issue. For whatever reason, the node version must be resolving the "module" string instead of the "main" one.

I'm not sure if this is actually the case though. I haven't run into this in my project, which uses a number of 3rd party modules.

If you'd like to have a go at fixing this I'd definitely accept a PR, but unfortunately I can't dedicate any time to it right now.

[DB-Alex]

If you can point me a bit in the direction i am willing to try

[jamesknelson]

Unfortunately I don't think I really understand this issue any better than you do yourself, so you'd be on your own for this one.

[DB-Alex]

If i do a little test like this:

"main": "./index.es.js", "module": "./index.es.js"

I get another error:

`/node_modules/@material-ui/core/index.es.js:6 import * as colors from './colors'; ^^^^^^

SyntaxError: Unexpected token import at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:617:28) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) `

[DB-Alex]

It is indeed using the main entry and not the module entry. But when i do the test as described above it still does not compile correct.

[DB-Alex]

If you add the "@material-ui/core": "^3.9.3" package to your installation you will see the bug right away. Would be great if we can fix this.

[DB-Alex]

I am really pulling my hair out, maybe this is saying something to you:

https://github.com/babel/babel/issues/8638

[DB-Alex]

Hi,

I hope you will have a few more minutes for me. I spent all night debugging the issue and I suspect it is in this file:

https://github.com/facebook/create-react-app/pull/6747/files#diff-7482288d6d13860f434d0b8171f20431

I created a SSR server myself and there the issue does not exist. I think it has to do with the index.js that is booting the server some other way then you do. But I don't see it.

Here is my index.js:

require('@babel/polyfill');
require('@babel/register')({
    ignore: [/\/(build|node_modules)\//],
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        'dynamic-import-node'
    ]
});

require('./server');

The server.js is an exact copy of the index.node.js I use in universal-react-scripts.

package.json:

"devDependencies": {
        "@babel/cli": "^7.5.5",
        "@babel/core": "^7.5.5",
        "@babel/node": "^7.5.5",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/plugin-transform-runtime": "^7.5.5",
        "@babel/polyfill": "^7.4.4",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "babel-plugin-import-static-files": "^1.0.4",
        "babel-plugin-module-resolver": "^3.2.0"
    },

I am on node v8.15.0.

I am really looking forward to a reply.

[jamesknelson]

Running @babel/register on the server will definitely fix the problem, as it will cause every file that your server loads to be transpiled by babel -- whether there are modules are not. The problem is that it's slow and probably unstable, and you definitely don't want to be doing it in production.

The funny thing to me is that there's any code with ES6 modules being loaded in the first place. I've taken a look at the file you pointed out, and it's possible that it may be the source of the problem. However, that file actually tells babel to do extra module->commonjs transpilation for node.js, while leaving modules as-is on the browser.

It's a bit of a mystery to me. Unfortunately actually fixing these kinds of issues often involves spending a few hours on them even for me, and it'll be a while before I can put the time in.

[DB-Alex]

Thanks for your reply! Where can I include teh babel/register in the config so I can debug the issue and check if its working then.

[jamesknelson]

babel/register is something that needs to run at runtime, so you'd just put it directly in index.node.js

[DB-Alex]

When I put this at top of the index.node.js

require('@babel/polyfill');
require('@babel/register')({
    ignore: [/\/(build|node_modules)\//],
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        'dynamic-import-node',
        [
            'transform-assets',
            {
                'extensions': [
                    'png',
                    'jpg',
                    'gif',
                    'svg',
                ],
                'name': 'static/media/[name].[hash:8].[ext]',
            },
        ],
    ],
});

import fs from 'fs';
import React from 'react';

I still have the same error: SyntaxError: Unexpected token export

That's weird right?

[DB-Alex]

I really don't get it anymore, I am going to wait for you to have a look.

[DB-Alex]

After days of debugging I found the issue, and its a really stupid one :D

Turns out my editor was referencing Typography somehow from another package as the rest. So everything is solved now!

Thanks a lot for all your help in this, I will start testing it thoroughly now :)

import Typography from '@material-ui/core/es/Typography';
import {Button, Hidden, IconButton} from '@material-ui/core';

[jamesknelson]

Hey, that's great to hear! Glad you got it working :D

[jamesknelson]

@alexvandervegt The lack of reply on the thread on the create-react-app repository makes me wonder if we might need to start a separate project for maintenance of this, at least in the short term.

Would you be interested in putting together a FAQ with this issue and anything else you run into while setting things up, mainly as a resource to help anyone else trying to get started with universal-react-scripts? Hopefully, making it easier to dive in will get more people using this, and thus result in more people sharing the maintenance work.

[DB-Alex]

Sure, tell me what you need.

[jamesknelson]

To start with, it'd be great if you could put together a small PR with a FAQ.md, with any questions you run into while setting it up (like the above), and a short answer detailing the answer.