Build error: Skipping static resource ... - max size is 2.1 MB

[vinhdevie]

Hi all, I got problem when run yarn build.

⇒  yarn build
yarn build v0.24.5
$ react-scripts build
Creating an optimized production build...
Skipping static resource ".../react-example/build/static/js/main.aa0e5d44.js" (2.24 MB) - max size is 2.1 MB
Failed to compile.

static/js/main.aa0e5d44.js from UglifyJs
Unexpected token: operator (>) [./~/get-stream/buffer-stream.js:4,0][static/js/main.aa0e5d44.js:35510,23]

error Command failed with exit code 1.

I'm using the lates yarn with node 6.10.3

I created an example repo with build error here.

Can you help me to figure out why the project failed to compile? Thank you!!!

[vinhdevie]

I think I found out the root of this error. CRA build failed if I use package [email protected] to do http request.
But I not sure this is the CRA's bug or not.

[vinhdevie]

Replace got with request-promise solve the problem. Maybe there is a bug in get-stream used by got.

[vinhdevie]

As mentioned in #321, how can I make UglifyJS supports minifying ES2015 code during CRA build process?

[gaearon]

You can't. Please ask your dependencies to be compiled to ES5. Builds are pretty slow already, and compiling them with Babel is just going to make them slower. Additionally, Babel sometimes breaks code so we can't arbitrarily compile everything with it.

[vinhdevie]

I see now. Thank you, Dan. I will close this ticket.

[gaearon]

The message about "skipping" is misleading though. We should remove that message as it obscures the real issue.

[codeaid]

Can someone explain what the cause and solution to this is? I'm getting the same when trying to build a pretty much empty create-react-app TypeScript project with just a few dependencies added:

{
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1",
    "semantic-ui-css": "^2.2.10",
    "semantic-ui-react": "^0.68.4"
  },
  "devDependencies": {
    "@types/jest": "^19.2.3",
    "@types/node": "^7.0.22",
    "@types/react": "^15.0.25",
    "@types/react-dom": "^15.5.0",
    "@types/react-router-dom": "^4.0.4",
    "react-scripts-ts": "2.2.0"
  },
  "scripts": {
    "start": "NODE_PATH=src react-scripts-ts start",
    "build": "NODE_PATH=src react-scripts-ts build",
    "test": "NODE_PATH=src react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}

Do I need to eject and modify something in Webpack to get it working?

The error I'm getting is:

$ yarn build
yarn build v0.21.3
$ NODE_PATH=src react-scripts-ts build 
Creating an optimized production build...
Warning: Got empty options
Warning: The 'no-use-before-declare' rule requires type checking
ts-loader: Using [email protected] and /var/www/blah/tsconfig.json
Skipping static resource "/var/www/blah/build/static/js/main.2a54bce8.js" (2.25 MB) - max size is 2.1 MB
Failed to compile.

static/js/main.2a54bce8.js from UglifyJs
Unexpected token: punc ()) [./~/source-map-loader!./src/routes/config.js:2,0][static/js/main.2a54bce8.js:60936,86]

error Command failed with exit code 1.

[gaearon]

@codeaid Please report this to react-scripts-ts, we are not affiliated with this package in any way.
That said, the important error is here:

static/js/main.2a54bce8.js from UglifyJs
Unexpected token: punc ()) [./~/source-map-loader!./src/routes/config.js:2,0][static/js/main.2a54bce8.js:60936,86]

What is ./src/routes/config.js? Is this your code? Uglify appears to choke on that.

[codeaid]

@gaearon - my config.js looks like this:

import asyncComponent from 'components/AsyncComponent';
const HomeScreen = asyncComponent(() => import('screens/HomeScreen'));
const LoginScreen = asyncComponent(() => import('screens/LoginScreen'));

export default [
    {
        path: '/',
        title: 'Home',
        component: HomeScreen,
        layout: true,
    },
    {
        path: '/login',
        title: 'Login',
        component: LoginScreen,
    },
];

The async loader is taken from here and looks like this.

I don't think the react-scripts-ts package has anything to do with it. It just adds support for TypeScript, plus there are a few similar issues on here from people that don't use TS.

[gaearon]

There are similar issues because the underlying problem is the same: Uglify can only handle ES5 code. So if you give it ES6 it will choke. People having similar issues experience this because they are consuming dependencies that aren't compiled to ES5. The solution in this case is to raise an issue with authors of these packages and ask them to compile to ES5.

But in your case react-scripts-ts could be the issue. It probably doesn't fully support the import syntax and leaves something that isn't ES5 in the output, causing Uglify to crash.

The bottom line is:

• If it's our issue please prepare a project with vanilla react-scripts reproducing it.
• Otherwise it is likely a react-scripts-ts issue.

Also "it just adds support for TypeScript" is not very accurate description in my opinion. It is a fork, and forks can contain arbitrary mistakes.

[codeaid]

Hmm, converted my routes to load like this:

import HomeScreen from 'screens/HomeScreen';
import LoginScreen from 'screens/LoginScreen';

...and it built successfully, so you're probably right. Looks like TypeScript doesn't support import syntax yet and chokes on that based on this issue.

[onpaws]

Not to do with this specific PR, but same Uglify error.*

My IDE's syntax highlighting** was indicating an unresolved export in my component, so thinking I had done something wrong tried to import from within an NPM published module.

Bad idea, it turned out I managed to inadvertently import an ES6 file and determining why builds failed in the above-described manner was pretty tricky.

e.g.

MyComponent.js:
import {Action} from 'somecomponent/src';

node_modules/SomeComponent/
  /src          < ES6 the component is written in
  /lib          < ES5 that gets built and distributed
  /index.js     < where Action should have been exported from

* Posting in hopes this saves someone else (or future me) time resolving!
(Mods, if this isn't the right place, my apologies, please feel free to do whatever you see fit.)

** JetBrains (latest at time of writing).

[gaearon]

I suggest you not to rely on IDEs for imports too much. They don’t really understand what’s going on, and can offer confusing suggestions. You should write imports the way they’re written in package documentation, regardless of whether IDE thinks it’s right or not.

[gaearon]

Closing, as misleading message was removed in #2645. If you find this issue by googling because you see this message please check for Uglify error below: most likely that's the one you want to look at.

[onpaws]

Dan you make an excellent point regarding IDEs.
If you happen to have/know a .vimrc that's ES6 ready, I'd be quite interested.
Either way thanks for your efforts! 💯