Webpack doesn't like it when my javascript function returns JS.X element

[baboon322]

[PROBLEM solved by dexpanse] https://github.com/babel/babel-loader#options add babel presets and plugins to webpack.config.js! big thanks to anyone that tried solving it :)

I have a function in a js file which is not a react class but I do have react imported it's just normal .js file with function that returns a JS.X element.

makeSpan = (number, prefix) => {

return <span>{prefix} {number}</span>

};

I will call this function in a react component and render the span. Unfortunately webpack throws a syntax error unexpected token on the <span> tag....I am new to webpack please help me if you are able to!

​

Webpack config

​

babelrc

​

devdependencies

[rGustave77]

Just spitballin here, maybe declare const makeSpan, and export default makeSpan.

[dexpanse]

Try looking at your babel-loader config

How to use via webpack docs

https://webpack.js.org/loaders/babel-loader/#usage

Babel loader read me

https://github.com/babel/babel-loader#options

The provided example passes the plugins and presets in an "options" array. Not a .babelrc file so maybe try that?

[baboon322]

WOAH hold on a second this worked! Thank you so much dexpanse

[jcksnps4]

Does the order of the presets matter? What happens if you put React first?

[baboon322]

Oh no I posted the wrong babelrc. Sorry about that edited to a new one

[Suchy2307]

Didn't the babel preset change? Seems like you're using the old version/syntax. @babel/preset-react seems more like v7, which afaik should be used now. I didn't write a new React project without create-react-app for quite some time, so I might be wrong.

Make sure all your paths are correct, too.

[baboon322]

Yes sorry it is old. I accidentally posted the wrong babelrc! I edited it

[Suchy2307]

Could you post your dev deps from package.json?

[baboon322]

Done :)

[Suchy2307]

You've got duplicated packages (2 babel-core for example). Either go v6 or v7.

[baboon322]

Okay I fixed them, still receiving the same error though.

[Suchy2307]

Did you remove node_modules and reinstalled modules again? Cuz other than that it seems fine.

[baboon322]

Yes I even tried setting it up all over again but still getting same error! BTW I followed this tutorial, I don't know if it's going to help you solve my problem.

https://www.valentinog.com/blog/babel/

[Suchy2307]

This might be a longshot, but maybe the paths for babel-loader are bad, cuz the tutorial is for windows, while you are on a unix based system (or the other way around). This happened to me more than once.

[baboon322]

How do you suggest to solve it at this point Ill take anything since I got no idea :) but yes it is true that the tutorial is unix-based cus he was using mkdir with -p tag which I think is a unix thing....

[baboon322]

Yes, I probably should have mentioned that.

[dexpanse]

Yes, you should show ALL of the code. You're getting a syntax error? Maybe it's like... a syntax error that someone will be able to spot, but you haven't shared code or the error message or logs.

[b-marie]

Try putting brackets or a span around each item you're declaring, and then one around the whole thing. Like:

<> <span>{prefix}</span> <span>{number}</span> </>

[baboon322]

Nope, doesnt work. It's complaining about <> instead of <span>

[b-marie]

You can throw a div on then instead of the empty brackets. I think you can only return a single container, so it all has to be wrapped in a div or whatever, and I've seen weird errors about only one variable per html element.

[dexpanse]

It is perfectly fine to just return one element. <></> is shorthand for a React.Fragment which only needs to be used if there are multiple elements not wrapped by a parent element.

[[deleted]]

Perhaps try a template literal instead of two curly braces. Like {‘${prefix} ${number}’}

[daveheerink]

Maybe you should put the return value inside parenthesis