Failed to minify the code from this file

[rbndg]

Failed to minify the code from this file

I keep running to this error with many packages that i'm using in my project, most notably bitcoinjs-lib.

The current solutions provided in the documentation are in my opinion unhelpful, basically requiring other libraries to work with CRA instead of other way around.

I know that this project doesn't want to developer to mess around with webpack/babel settings but allowing the user to skip minification for some files/folders without ejecting would be very helpful or make CRA work libs in node_modules.

Thanks

[gaearon]

I empathize with your frustration but the solution you propose (run Babel with the app config on dependencies) is unsafe and incorrect.

It seems correct from your point of view because it would solve your immediate problem. But I know that if we do this, we’ll get equally frustrated people with different kinds of breakages.

We are tracking this problem in https://github.com/facebookincubator/create-react-app/issues/1125. If you want to send a PR to fix it in the correct way as explained in that issue, you’re most welcome. If you don’t, unfortunately you’ll have to wait for somebody else to come around and fix it.

[gaearon]

(That said there’s also an unrelated problem of Uglify not handling ES6 code which will be fixed separately. But even if we do this, and minification works, your code still won’t work in order browsers.)

[gaearon]

FYI, we're starting the work to compile deps with babel-preset-env in Create React App: https://github.com/facebookincubator/create-react-app/pull/3776

Let us know if you have feedback about how this should work.

[rbndg]

@gaearon I don't have any special work flow for this, I have a gulp task that compiles the dependency in the node_modules folder before I building using CRA and so far it seems to be working for me.

[kirkins]

Hello I just started using react. I'm running react-script build and getting an error similar to the one posted here.

> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

    ./node_modules/fb/lib/fb.js:130 

Read more here: http://bit.ly/2tRViJ9

The app works fine with npm start. Is this a babel-webpack issue?

@rbndg can you link to solutions you mentioned?

[rbndg]

@kirkins The issue is that CRA currently doesn't compile dependencies.

So you should either move the dependency to outside of the node_modules folder and run build or compile the the dependency before you run build

[gaearon]

@kirkins Please follow the link in the error message you posted, it literally explains the problem. If something isn’t clear there we’re happy to clarify but please try to read the information we specifically put at that link URL first 🙂 Thank you!

[kirkins]

@gaearon thanks, I was tired, didn't see the link at first.

I found it last night and made the issue as suggested.

Apparently it's not supposed to work with front-end, but I've already used it and it works perfectly fine in my React app, aside from compiling.

So I want to compile myself as I don't want to re-write the app right now.

I'm getting an error on ::has I'm unfamiliar with the syntax. Is it something from the ES6/ES7 that can't be compiled to ES5? Here is a picture of trying on babel GUI (also have cli and it returned the same):

Is it possible to compile this to ES5?

[gaearon]

Yes, it's probably using a dropped or outdated Babel proposal. Maybe ticking stage-0 will fix it.

[kirkins]

@gaearon thanks seems to be working.

https://www.npmjs.com/package/fb-es5 https://github.com/kirkins/facebook-node-sdk

[remidej]

I'm getting a similar error (Failed to minify the code from this file), but the package that makes the build fail is a dev dependency. Shouldn't it be ignored in a production build?

[gaearon]

If you see this error you are importing that package.

[remidej]

Indeed it's actually a JS file that is only meant for development that is importing it. But how can I remove that file from the build?

[gaearon]

Don’t import it?

Sorry, it’s hard to help based on a vague description. Perhaps you can create a new issue with a reproducing project?

[remidej]

It's not really an issue, I just haven't figured out how to do this in the docs.

I'll be more specific. I have a file called scraper.js that I use to crawl a website and store some of its data in a JSON file. To do so I import in that file an npm package called image-downloader. My problem is that I don't want scraper.js to be part of the build generated by yarn build, since that file is only used to generate data and isn't actually used in the final app.

After some research I found a similar issue. However the solution you gave (npm run build then delete then unwanted parts) wouldn't work for me since the package required by scraper.js makes the entire build crash.

I hope that's clearer. Thanks for the help anyway (and on a sunday!)

[gaearon]

Sorry, this is still not very clear 🙂

My problem is that I don't want scraper.js to be part of the build generated by yarn build, since that file is only used to generate data and isn't actually used in the final app.

It won’t be a part of the build unless you explicitly import it in your app. If it’s just something you manually run once in a while I don’t see why it would end up in the build.

My only guess is you’re doing some dynamic require like import(filename).then(...) and webpack has to bundle every single file in the folder. Which is really bad for performance and you should avoid such patterns.

It’s really hard to help at this point without a reproducing project. If you experience this please file an issue with a minimal example and we will take a look.

But rest assured that a file won’t be included in the build unless your code (traced from src/index.js) imports it.

[remidej]

The only mention I have of that file throughout my app scraper.js is in my package.json, where I added the following script: "scrape": "node --max-old-space-size=8192 src/scraper.js".

Could that be what imports the file in the build?

edit: After some testing I see that this line in package.json has no impact on the build, it still crashes after removing it. The only way for the build to work is to just delete my file. But if my file is being imported somewhere, shouldn't it crash the build?

[gaearon]

At this point we can’t help without a reproducing file. Yes, it should crash the build.

The only case that I’m aware of in which it wouldn’t is related to dynamic imports (the case I described in my above comment).

[remidej]

Sorry for the delay, I couldn't reproduce the issue and kinda gave up, but found a fix eventually. The file was simply included in the build because it was in the src directory. I thought that folder was meant for all the development, but it actually makes sense that all of it gets compiled in the build.
Anyway sorry for the trouble and thank you for your the fast replies!

[murugaratham]

referring to https://github.com/facebook/create-react-app/issues/3734#issuecomment-358844785

I tried compiling https://github.com/wagenaartje/neataptic/issues/81 myself but i am still getting the error.

/* Import */
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

/* Update readme and read license */
var version = require('./package.json').version;
var readme = fs.readFileSync('./README.md', 'utf-8').replace(
  /cdn\/(.*)\/neataptic.js/, `cdn/${version}/neataptic.js`
);
fs.writeFileSync('./README.md', readme);

var license = fs.readFileSync('./LICENSE', 'utf-8');

/* Export config */
module.exports = {
  context: __dirname,
  entry: {
    'dist/neataptic': './src/neataptic.js',
    [`mkdocs/theme/cdn/${version}/neataptic`]: './src/neataptic.js'
  },
  resolve: {
    modules: [
      path.join(__dirname, 'node_modules')
    ]
  },
  output: {
    path: __dirname,
    filename: '[name].js',
    library: 'neataptic',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.BannerPlugin(license),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CopyWebpackPlugin([
      { from: 'src/multithreading/workers/node/worker.js', to: 'dist' }
    ])
  ],
  externals: [
    'child_process',
    'os'
  ],
  node: {
    __dirname: false
  },
  module: { //<-- added this entire block into the libraries' config to compile to es5, 
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015'],
      }
    }]
  }
};

I've read that we should be raising an issue with authors but https://github.com/wagenaartje/neataptic/issues/112 he is no longer actively maintaining it, can someone point me in the right direction and i'll send him a PR

[chandas]

Have a similar issue with npm run build, shows an error:

Failed to minify the code from this file: ./node_modules/query-string/index.js:8

Failed at the pwa-experiment@0.1.0 build script

[mikdatdogru]

@chandas you can use qs package. the outputs are compatible, you can easily implement.

import qs from 'qs';
const qsParsed = qs.parse(this.props.location.search.slice(1));

I solved it this way

[chandas]

@mikdatdogru thanks for your suggestions. Kindly pardon my mistakes if any with this code as I am totally new to this development in React.

I have the following code snippet: getIdFromVideoString(vString) { const urlArr = vString.split('/'); const idString = urlArr[urlArr.length - 1]; const queryParams = qs.extract(vString); qs.extract();

    return (queryParams && qs.parse(queryParams).v) || idString || '';
}

and now as per your suggestion when I changed the import from 'query-string' to 'qs', then I am getting the following error: TypeError: __WEBPACK_IMPORTED_MODULE_0_qs___default.a.extract is not a function

So is there any way I can refactor this code snippet to make it work with import of 'qs'

Thanks for your suggestions.

[mikdatdogru]

@chandas
.extract is a query-string method.

[janoist1]

importing "qs" solved this particular problem but in my case it has introduced another one. While query-string's stringify() handles null values properly qs does not. { param1: "val", param2: null } will be param1=val&param2= as opposed to param1=val&param2 which should be correct. Update { strictNullHandling: true } solved it.

[Timer]

We have started compiling node modules in the 2.0 beta (next tag) release. This should mitigate majority of these problems.

Search for the 2.0 roadmap for more details!

[gaearon]

This shipped in 2.0. https://reactjs.org/blog/2018/10/01/create-react-app-v2.html