Not possible to use JSX

[nimabrownlee]

So I went ahead and created a project using the CLI.

npm init solid app my-app

Success. Added .babelrc.

{
  "presets": ["babel-preset-solid"]
}

Then I created a simple component called Box and imported it in App.

const Box = () => {
  return (
    <div>
      test
    </div>
  )
}

export default Box

But I get this error

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

So I install @babel/preset-react and add it to .babelrc. Still no success. Anyone have a clue as to JSX support is still not enabled?

[ryansolid]

Interesting, i never tried adding a .babelrc which I'm gathering is messing it up for some reason. Do you need to? Generally if you just leave as is JSX works without changing anything. The example template that ships with the project uses JSX without touching anything unless Im misunderstanding you. You should never need/want to install the React ones even though babel default error messages tell you to do so. Did you have any issues running the CLI generated project before adding the babelrc?

Looking a bit further, this CLI is forked from Create React App which doesn't generally allow config override without ejecting. I haven't seen an official docs suggesting this works.

[nimabrownlee]

@ryansolid Hey, I've tried it without .babelrc but I face the same error. The actual problem is that I just get a white screen. And the weird thing is that it only happens when importing other components. If I declare everything in App.js, then it works fine. Maybe that's the reason all the examples are just one file?

I'm open to suggestions as to how I can setup Solid in other ways to get it working. It seems very interesting so I want to try it out.

[ryansolid]

I see. The Solid Hacker News Web Component example uses the CLI but admittedly a different template but I've never had any issues in this regard.

I just did a clean install and see if I have any luck reproducing. The setup already does import out of the box between the test setup and the index importing in App.js. I had no problem importing the Box component. I tried it next to App and in nested folders and tried both .js and .jsx extensions and still had no issue.

Where are the components you are trying to import are located? I think that might be the problem. The CRA setup seems to only transpile the src folder (and nested folders). If your file is in fact in the src folder then I mean the only thing I can suggest is showing me how you are importing it. For reference I used your component above and imported it like this (when in the src folder):

import Box from "./Box"

function App() {
  return <Box />;
}

export default App;

I also tried moving it nested like ./components/Box which is arguably a better pattern if you have lots of components or pages etc.. It does occur to me that given isomorphic patterns we're going to start promoting publishing JSX instead of JS so the end applications can compile for different platforms I will need to change this. We are working on a replacement for the current CLI, but this I believe should suffice for current things.

I hope this points things in the right direction. There are other starter templates you can clone down to give Solid a try. https://github.com/ryansolid/solid/blob/master/documentation/resources/projects.md#starters. Running degit is a pretty straight forward way to get these locally. Most are TypeScript but maybe one of the Parcel ones might be a good JS starter.

[nimabrownlee]

@ryansolid That was it! I moved the components folder to src and it works completely fine now. Thanks Ryan.