search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.77k stars 26.87k forks source link

Build is generating invalid sourcemaps with uglify? #7238

Closed urdaneta88 closed 5 years ago

urdaneta88 commented 5 years ago

Is this a bug report?

Yes. I think so.

Did you try recovering your dependencies?

Yes, i delete node_modules and reinstalled npm

Which terms did you search for in User Guide?

sourcemaps, uglify, browserify+uglifyjs

Environment

Environment:
  OS:  Windows 10
  Node:  10.14.2
  Yarn:  1.12.3
  npm:  6.5.0
  Watchman:  Not Found
  Xcode:  N/A
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: ^16.7.0 => 16.7.0
  react-dom: ^16.7.0 => 16.7.0
  react-scripts: ^2.1.8 => 2.1.8

Steps to Reproduce

before this i install source map explorer npm install --save source-map-explorer and add this line to the scripts of react in the package.json

"scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
  1. npm run build
  2. npm run analyze

Expected Behavior

To have a build working fine.

Actual Behavior

The problem is that my build freeze when i use some parts of the proyect, for example, when i call the "Modal" of the package "reactstrap" in a page, the entire page stop working in the console shows this message: 

DevTools failed to parse SourceMap: http://rtems.swa.com/static/js/main.e6774a6b.chunk.js.map
DevTools failed to parse SourceMap: http://rtems.swa.com/static/css/2.ac301416.chunk.css.map
DevTools failed to parse SourceMap: http://rtems.swa.com/static/css/main.67815a1c.chunk.css.map
DevTools failed to parse SourceMap: http://rtems.swa.com/static/js/2.a96c4751.chunk.js.map

If this help in any case this are the package that i use in the project:

+-- @fortawesome/fontawesome-svg-core@1.2.14
+-- @fortawesome/free-solid-svg-icons@5.7.1
+-- @fortawesome/react-fontawesome@0.1.4
+-- apexcharts@3.6.8
+-- bootstrap@4.3.1
+-- file-saver@2.0.2
+-- glamor@2.20.40
+-- html2canvas@1.0.0-rc.1
+-- UNMET PEER DEPENDENCY jquery@1.9.1 - 3
+-- jspdf@1.5.3
+-- react@16.7.0
+-- react-apexcharts@1.3.3
+-- react-data-export@0.5.0
+-- react-data-grid@5.0.5
+-- react-dom@16.7.0
+-- react-redux@6.0.0
+-- react-router-dom@5.0.0
+-- react-scripts@2.1.8
+-- react-tabulator@0.9.1
+-- react-toastify@5.0.0
+-- reactstrap@7.1.0
+-- redux@4.0.1
+-- redux-logger@3.0.6
+-- redux-thunk@2.3.0
+-- source-map-explorer@2.0.0
+-- video-react@0.13.6
+-- xlsx@0.14.3

When i run the analize in source map explorer this is the error that shows

 source-map-explorer 'build/static/js/*.js'

build/static/js/2.137bd8b6.chunk.js
  Unable to map 130/4583986 bytes (0.00%)
build/static/js/main.f251e00f.chunk.js
  Unable to map 597/336617 bytes (0.18%)
build/static/js/runtime~main.a8a9905a.js
  1. Your source map only contains one source (../webpack/bootstrap).
  This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
  2. Unable to map 62/1501 bytes (4.13%)
Unable to open web browser. El proceso no tiene acceso al archivo porque est� siendo utilizado por otro proceso.
Either run with --html, --json, --tsv, --file, or view HTML for the visualization at:
C:\Users\JOSEUR~1\AppData\Local\Temp\sme-result-2019517-4680-k4wcxg.22cw.html
bugzpodder commented 5 years ago

It sounds like the build succeeded, only that it "freezes on some parts of the project"? It sounds more like a bug in your code rather than a build problem? Please upgrade to latest react-scripts (3.0.1) and try again.

DevTools failed to parse SourceMap should not be an error that affects your production build in any way.

if you are still encountering issues please provide a minimal repro and any steps you did.

urdaneta88 commented 5 years ago

I upgraded to the latest react-script 3.0.1 and the problem persist.

When i make the build it show this warining

react-scripts build

Creating an optimized production build...
Compiled with warnings.

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  1.14 MB   build\static\js\2.6ae8ed30.chunk.js
  40.41 KB  build\static\js\main.e88dd3f4.chunk.js
  35.21 KB  build\static\css\2.bfed5757.chunk.css
  3.38 KB   build\static\css\main.4c56e9aa.chunk.css
  762 B     build\static\js\runtime~main.a8a9905a.js

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The project was built assuming it is hosted at the server root.

  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

The freeze problem only appears when a run the project in the build form, otherwise in development it runs fine.

Using the source-map-explorer and running the analyze show me this error:

source-map-explorer 'build/static/js/*.js'

build/static/js/2.6ae8ed30.chunk.js
  Unable to map 130/4401456 bytes (0.00%)
build/static/js/main.e88dd3f4.chunk.js
  Unable to map 597/336578 bytes (0.18%)
build/static/js/runtime~main.a8a9905a.js
  1. Your source map only contains one source (../webpack/bootstrap).
  This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
  2. Unable to map 62/1501 bytes (4.13%)
Unable to open web browser. El proceso no tiene acceso al archivo porque est� siendo utilizado por otro proceso.
Either run with --html, --json, --tsv, --file, or view HTML for the visualization at:
C:\Users\JOSEUR~1\AppData\Local\Temp\sme-result-2019519-12500-c1mkx1.zk44.html

That's why i think is the source map that make uglify, but i really have no other clue.

bugzpodder commented 5 years ago

The source map is fine, the same messages show up in a new create-react-app build. Open your chrome and point it out to C:\Users\JOSEUR~1\AppData\Local\Temp\sme-result-2019519-12500-c1mkx1.zk44.html and you should be able to view it.

The app freeze is most likely caused by your code and has nothing to do with create-react-app.

urdaneta88 commented 5 years ago

But i don't understand, why in development the app runs fine, all the parts are working fine, but when i make the build and start navigating the app freeze and stop working, i don't get it.

urdaneta88 commented 5 years ago

Btw man, thanks for the help and for having the time to answers my questions, i really appreciate it.

bugzpodder commented 5 years ago

Agreed that build and development should be the same behavior. But without more information or a demo showing the freezing, it's impossible to tell why.

Things that come to mind is that, production might use a javascript minifier (like terser) which outputs invalid/buggie code. Or that there are if conditions in the code that checks (process.env.DEVELOPMENT) do_this(), or maybe you just have different environment variables in prod vs dev. But all of these are just things are just guesses and its impossible to know without more info.

urdaneta88 commented 5 years ago

I can't show it or link the code because i'm on a NDA, but the "function" that i call is a modal, in this modal body a have a component that fetch some data and mount another component to display the images or videos that was fetched. I don't know if making this sort of calls can make the page to freeze, but that's the case, and i don't have the same problem in dev mode, don't know if any of this info help me to explain my problem.

bugzpodder commented 5 years ago

Yeah, unfortunately there is nothing I can do here then. You may want to put a bunch of console.log in your code to see if React is rendering your components in an infinite loop.