Production build fails with ES6 javascript files in the project

[tko]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Didn't try.

Which terms did you search for in User Guide?

npm run build fails to minify

Basically if you follow the step "3. If the dependency is small enough, copy it to your src/ folder and treat it as application code." in react-scripts-ts project you get this bug.

Environment

1. npm ls react-scripts-ts (if you haven’t ejected): react-scripts-ts@2.6.0
2. node -v: v8.2.1
3. npm -v: 5.3.0
4. yarn --version (if you use Yarn): 0.27.5
5. npm ls react-scripts-ts (if you haven’t ejected):

   test@0.1.0 /private/tmp/test
   └── react-scripts-ts@2.6.0
   

Then, specify:

1. Operating system: macos 10.11.6 (15G1611)
2. Browser and version (if relevant): N/A

Steps to Reproduce

Add an import of ES6 javascript (.js) file and run build:

1. create-react-app --scripts-version=react-scripts-ts test
2. cd test
3. echo 'export default class Test {}' > src/Test.js
4. add to src/App.tsx:

   import Test from './Test';
   console.log('Test', Test);

5. yarn run build

In the real-world example I encountered this the javascript file is a dependency that I can only copypaste into the project as it is not distributed otherwise.

Expected Behavior

Successful production build.

Actual Behavior

Development server works, but production build fails.

yarn run build:

yarn run v0.27.5
$ react-scripts-ts build
Creating an optimized production build...
Warning: The 'no-use-before-declare' rule requires type information.
ts-loader: Using typescript@2.4.2 and /private/tmp/test/tsconfig.json
Failed to compile.

static/js/main.ff9586e3.js from UglifyJs
Unexpected token: name (Test) [./~/source-map-loader!./src/Test.js:1,0][static/js/main.ff9586e3.js:21758,6]

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The code on line 21758 is class Test { -- the code around it:

/* 178 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
class Test {
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Test;



/***/ }),

[wmonk]

Is this a duplicate of #21?

[wmonk]

You can not compile es6 with uglify AFAIK. And we do not currently support es6 JS compilation within react-scripts-ts.

[tko]

It's duplicate only in the sense that es6 file breaks the build; in #21 such file is generated by tsc, in my case it's added by hand.

I don't suppose there's easy workaround short of ejecting? Is es6 JS compilation support completely out because of reasons (dependencies, perhaps?) or to be expected some day? I'd naively imagine it would be just a matter of deleting fewer lines from react-scripts webpack config.

[wmonk]

I'm inclined not to add JS transpilation. I believe that it's just another place where "bugs" will be reported from. If you look through some of the closed issues where people have asked for it - they are using react-scripts-rewired, but seem to be ending up with issues around bundle sizes.

I'm going to close this, as I think you're after babel, which is something that won't be added to this project.