Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
vinhdevie opened this issue May 31, 2017 · 15 comments
Closed

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

vinhdevie opened this issue May 31, 2017 · 15 comments
Milestone

Comments

@vinhdevie
Copy link

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
Copy link
Author

vinhdevie commented Jun 1, 2017

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

@vinhdevie
Copy link
Author

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

@vinhdevie
Copy link
Author

vinhdevie commented Jun 1, 2017

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

@vinhdevie vinhdevie reopened this Jun 1, 2017
@gaearon
Copy link
Contributor

gaearon commented Jun 1, 2017

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
Copy link
Author

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

@gaearon
Copy link
Contributor

gaearon commented Jun 1, 2017

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

@gaearon gaearon reopened this Jun 1, 2017
@gaearon gaearon added this to the 1.0.x milestone Jun 1, 2017
@codeaid
Copy link

codeaid commented Jun 1, 2017

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 typescript@2.3.4 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
Copy link
Contributor

gaearon commented Jun 1, 2017

@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
Copy link

codeaid commented Jun 1, 2017

@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
Copy link
Contributor

gaearon commented Jun 1, 2017

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
Copy link

codeaid commented Jun 1, 2017

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.

tlvince added a commit to tlvince/create-react-app that referenced this issue Jun 6, 2017
This crops up in the form of uglify errors during a production build, e.g. facebook#2236, facebook#2433, facebook#2475. The suggestion there is to transpile deps down to ES5 and/or remove `module`. However, `module` is there specifically to indicate ES module support, which uglify doesn't support, so ask webpack not to resolve it.
@onpaws
Copy link

onpaws commented Jun 14, 2017

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
Copy link
Contributor

gaearon commented Jun 14, 2017

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
Copy link
Contributor

gaearon commented Jun 27, 2017

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.

@gaearon gaearon closed this as completed Jun 27, 2017
@onpaws
Copy link

onpaws commented Jun 27, 2017

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! 💯

@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants