Error: Couldn't find preset "latest"

[eatrocks]

I'm not sure if this is the correct place to post this issue however... I'm using react-helmet in my project which I build with webpack and babel.js. When I build I get

ERROR in ./~/react-helmet/lib/Helmet.js Module build failed: Error: Couldn't find preset "latest" relative to directory /path/to/my/project/node_modules/react-helmet.

I believe this started because of version af13c9c of package.json where the react-helmet babel config was moved into it's package.json.

The error indicates that the latest babel.js preset was not found, which the babel config within react-helmet is calling for. Therefore the error will only show up for projects that are not already using the latest babel preset.

I have verified that my project uses the built version of Helmet.js found in ./node_modules/react-helmet/lib. What baffles me is why Babel is reading config from the react-helmet package.json. I understand node.js needs to read the main property to know where to find the code, but since that code is already transpiled I don't know why babel would need to read config from there.

I'm using react-helmet@3.2.2.
Workarounds include

• adding the "latest" preset in the consuming project
• manually removing the babel config from the react-helmet package.json
• using react-helmet@3.1.0 or below

[cwelch5]

hi @eatrocks what version of Babel are you running in your project? I haven't been able to reproduce yet. It does seem odd, your project shouldn't be affected by Helmet's babel configuration.

[eatrocks]

Hi @cwelch5 thanks for your help. My node version is 6.9.1, npm version is 3.10.8. My babel versions are below, and all are latest according to npmjs.org...

babel-cli 6.18.0
babel-core 6.18.2
babel-loader 6.2.7
babel-plugin-react-require 3.0.0
babel-preset-es2015 6.18.0
babel-preset-react 6.16.0 
babel-preset-stage-2 6.18.0

You might be able to reproduce it by using the tuxsudo react-starter with the following steps...

• git clone https://github.com/tuxsudo/react-starter.git tuxsudo-react-starter
• cd tuxsudo-react-starter/
• replace the "babel-preset-latest": "^6.16.0", devDependency with "babel-preset-es2015": "^6.18.0", in package.json
• npm i
• npm run dev
• You should see the error in the output of the app starting up.
• Control+c to stop the server.

[cwelch5]

@eatrocks I gave it a try, and I do get an error referring to "latest" but it doesn't mention Helmet anywhere. I rolled back Helmet to 3.1.0 and I get the same error. I think you're error (based on the steps you provided) is caused by your babelrc referring to "latest", but you are swapping your package.json to use es2015 instead.

[eatrocks]

@cwelch5 I apologize, I left that out of the reproduction steps. You are correct, .bablerc also needs "latest" changed to "es2015" to be able to reproduce the issue that references react-helmet. At that point running npm run dev will produce the error. However I'm getting the feeling that I should have posted this issue against babel

[eatrocks]

@terrysahaidak I see your fix/commit. Thanks! Do you know if it is expected behavior of babel to read babel config from child package.json files?

[terrysahaidak]

@eatrocks yes, it's a normal behavior. My current workaround is to install babel-preset-latest. But it's strange, because in my second project with the same babel and react-helmet versions and etc everything works great without any errors.

[cwelch5]

@terrysahaidak in the last minor release we moved babel configuration from .babelrc to package.json. It seems as if moving babel configuration back to .babelrc will fix the issue, would you agree?

[terrysahaidak]

@eatrocks it would be a solution :)

[andykenward]

It is strange as the published version 3.2.2 of react-helmet no longer uses the es6 version or even refers to it in package.json anymore. So it would load the es5 in webpack. Unless you are directly accessing the src folder in this package which would then need to be compiled by babel in your project. The es6 build that is in the es folder on a build doesnt need babel.

The babel latest preset has the 2015 preset in it. Babel site recommends you use the latest preset to stay update.

@eatrocks It would be a good idea to lockdown your npm dependencies versions in tuxsudo react-starter

from

"react-helmet": "^3.0.1",

to

"react-helmet": "3.2.2",

As anyone using it could potential run into different issues based on when they happen to do the npm install and one of your npm dependency does a release that breaks something :(.

[cwelch5]

@andykenward I believe @eatrocks 's issue is that the babel configuration in Helmet's package.json is affecting his babel transpilation. And according to @terrysahaidak it's expected for their to be a conflict when you move babel configuration to package.json. What's your take?

[andykenward]

@cwelch5 @eatrocks I just looked into tuxsudo/react-starter repo more and it is a webpack issue.

The webpack babel-loader isnt ignoring the /node_modules folder and is transforming all the js files in there.

See lines 22 -23 in webpack.base.babel.js

@eatrocks & @terrysahaidak
You need to add in a exclude to your webpack loaders.

exclude: /(node_modules|bower_components)/,

I recommend you change the babel-loader config in your repo to this

 {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader'
}

You dont need to test for jsx as you are using js files in your repo. Also you might as well call all your loaders by the full name as in the webpack 2 they have stopped adding on the -loader for you. Only mentioned that i see an issue about Update to webpack 2

If you read the readme of the babel-loader it shows you this.

Also check the troubleshooting section of babel-loader.

It just happens to error out on react-helmet when webpack babel-loader is transforming the js and gets the babel config from react-helmet and it cant find that preset to use.

@cwelch5 So you can close this issue

[cwelch5]

Thanks @andykenward for investigating. That clears things up. @eatrocks - give that a try and let us know if that resolves things. Thanks.

[eatrocks]

Thanks @andykenward and @cwelch5 - I appreciate your detailed look into our project and your suggestions, especially adding "-loader", using "latest", and targeting just ".js".

We are working on the best way to exclude node_modules from babel processing. We have chosen to publish components to npm that still require "building" so we can end up with the smallest built artifacts possible because some of our apps are consumed globally. So we are not sure of the best way to exclude node_modules since white-listing modules that need to be built adds a developer step, not excluding node_modules all together adds build time (and sometimes errors like this), and flagging modules that need to be built adds a step for the component publisher. Any thoughts on this matter are certainly not required but appreciated.

You already have committed to master a fix that pulls the babel config out of your package.json file. Would you be willing to keep and publish that change even though it's not required and not the cause of the problem? You may see some benefit to keeping the config in the package.json file, and if so, I understand. Thanks again!!

[andykenward]

@eatrocks you should research into compiling es6 npm modules.

react-helmet compiles a es6 version using babel into a /es folder. This then removes the need for babel to compile react-helmet when used in a project. It is currently not referenced in the package.json as a entry. So doesnt get imported via webpack etc. This was due to #190 & #197 (long read). I gave up trying to explain to people how export default and import actually works in es6 + babel within their projects.

Check out how redux and redux-saga do a es6 build.

I also suggest you switch to webpack 2 for its tree shaking feature.

Will do a pull request to move babel config to .babelrc file.