SyntaxError: Unexpected token

[tezml]

error code ↓↓↓↓

` ERROR in ../pc-react-next/src/index.js
Module build failed: SyntaxError: /Users/tezml/Desktop/pc-react-next/src/index.js: Unexpected token (362:9)

  360 | 		let {levels=[], names={}} = level1 
  361 | 
> 362 | 		return <div className={divider ? "cndzk-entrance-divider" : 'cndzk-entrance'} style={style}>`

import ↓↓↓↓

[babel-bot]

Hey @tezml! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

Where did you save your Babel config?

[tezml]

您在哪里保存了Babel配置？

{ "presets": [ "/usr/local/lib/node_modules/**/**/node_modules/_@babel_preset-env@7.0.0@@babel/preset-env/lib/index.js", "/usr/local/lib/node_modules/**/**/node_modules/_@babel_preset-react@7.0.0@@babel/preset-react/lib/index.js", "/usr/local/lib/node_modules/**/**/node_modules/_babel-preset-airbnb@4.4.0@babel-preset-airbnb/index.js" ], "plugins": [ "/usr/local/lib/node_modules/**/cndzk-dzfe/node_modules/_@babel_plugin-transform-runtime@7.0.0@@babel/plugin-transform-runtime/lib/index.js" ] }

this is my .babelrc

[tezml]

您在哪里保存了Babel配置？

[nicolo-ribaudo]

In which directory is it saved?

[tezml]

In which directory is it saved?

.babel save in my develop root directory
Top code is babel scaffold

[nicolo-ribaudo]

Ok, we need to understand if the babel config is being loaded.

Please try adding some invalid code to .babelrc so that it should throw a SyntaxError. Does Babel start complaining about the invalid config file?

.babel save in my develop root directory

Is it /Users/tezml/Desktop/pc-react-next/? (It should be there)
Also, it should be called .babelrc (or better, babel.config.json if you are using Babel 7.8), not .babel.

[tezml]

Ok, we need to understand if the babel config is being loaded.

Please try adding some invalid code to .babelrc so that it should throw a SyntaxError. Does Babel start complaining about the invalid config file?

.babel save in my develop root directory

Is it /Users/tezml/Desktop/pc-react-next/? (It should be there)
Also, it should be called .babelrc (or better, babel.config.json if you are using Babel 7.8), not .babel.

Before using babel 6.x has been no problem.So it's not a question of quotation.

/Users/tezml/Desktop/pc-react-next is a Component
/Users/tezml/Desktop/pc-react-next-demo is my Develop directory

Both of these are .babelrc
I tried it just now. '.babel' doesn't work either

[nicolo-ribaudo]

In Babel 7, .babelrc is only applied in the directory where it's saved. This means that if it is in /Users/tezml/Desktop/pc-react-next-demo, it will only be applied to files inside pc-react-next-demo.

You can read more about it at https://babeljs.io/docs/en/config-files.

You can either duplicate the file in both directories, or have a babel.config.json/babel.config.js file in the directory where you are running Babel from.

[tezml]

In Babel 7, .babelrc is only applied in the directory where it's saved. This means that if it is in /Users/tezml/Desktop/pc-react-next-demo, it will only be applied to files inside pc-react-next-demo.

You can read more about it at https://babeljs.io/docs/en/config-files.

You can either duplicate the file in both directories, or have a babel.config.json/babel.config.js file in the directory where you are running Babel from.

In Babel 7, .babelrc is only applied in the directory where it's saved. This means that if it is in /Users/tezml/Desktop/pc-react-next-demo, it will only be applied to files inside pc-react-next-demo.

You can read more about it at https://babeljs.io/docs/en/config-files.

You can either duplicate the file in both directories, or have a babel.config.json/babel.config.js file in the directory where you are running Babel from.

ok,I know.But this does not solve the problem

[nicolo-ribaudo]

Try using babel.config.js, and pass the configFile: "path/to/babel.config.js" option to babel-laoder.

But this does not solve the problem

"this" what?

[avindra]

Noticed this issue too after bumping some @babel deps to 7.8.8

No custom .babelrc, just a vanilla create-react-app package. Our application unit tests started failing on failure to transform JSX after updating the babel deps.

[ChrisCoppola-Avlino]

I have the same issue with all @babel packages at 7.8.8, and also tried 7.9.0.

I have a custom babel file, .babelrc.js which worked on previous versions. And I have checked that at least the callback is being called. Nothing super fancy.

export default (api) => {
	let isProd = api.cache(() => process.env.NODE_ENV === 'production')
	let isTest = api.cache(() => process.env.NODE_ENV === 'test')

	const presets = [
		'@babel/env',
		'@babel/preset-typescript',
		'@babel/preset-react'
	]
	const plugins = [
		'@babel/plugin-proposal-object-rest-spread',
		'@babel/plugin-proposal-nullish-coalescing-operator',
		'@babel/plugin-proposal-optional-chaining',
		'@babel/plugin-transform-runtime'
	]

	if(isProd) {
		plugins.push('babel-plugin-unassert')
		plugins.push(['babel-plugin-transform-remove-console', { 'exclude': [ 'error', 'warn' ] }])
	} else if(isTest){
		plugins.push('require-context-hook')
	}

	return {
		presets,
		plugins
	}
}

[nicolo-ribaudo]

Could you share a small repository which reproduces the issue 🙏

[ChrisCoppola-Avlino]

@nicolo-ribaudo I don't have time at the moment, but I will attempt to in the next few days.

[ChrisCoppola-Avlino]

Hey @nicolo-ribaudo just want to point out that, this was a false alarm in my case.

Ended up being a bug in my build process. My .tsconfig file had emitDeclarationOnly removed from it, and was supposed to have --emitDeclarationOnly flag added to the npm script, but somehow had neither. I was running typescript compiler after webpack to generate d.ts files for a library, causing it to overwrite my index.js (the webpack bundle), and use non-bundled jsx code.

So, completely unrelated to babel 💃 . Sorry I won't be able to help any further! Was just a coincidence it happened in the same commit/pull-request.

[avindra]

@nicolo-ribaudo also a false alarm in my case. I let the issue sit for a while... did > yarn.lock && rm -fr node_modules && yarn install today and I'm not seeing this issue anymore.

[JLHwung]

@tezml Please use the following combinations:

{
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "babel-loader": "^8.0.0",
  }
}

babel-loader@7 does not support @babel/core@7.

I am gonna close this issue as we don't have reproduction repo.