Snowpack can't find /src/index.jsx no matter what I do?

Question

Man... no idea wth is going on. Keep getting the error:

:~/plasma$ npm run start

> plasma@1.0.0 start
> snowpack dev

[14:33:25] [snowpack] Ready!
[14:33:25] [snowpack] Server started in 55ms.
[14:33:25] [snowpack] Local: http://localhost:8080
[14:33:25] [snowpack] Network: http://192.168.178.76:8080
[14:33:26] [snowpack] [404] Not Found (/src/index.jsx)
⠹ watching for file changes..

I run snowpack init leaving default config, my packages.json looks like so:

{
  "name": "plasma",
  "version": "1.0.0",
  "description": "Converting a vanilla JS app (plasma) into React",
  "main": "index.js",
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "author1",
  "license": "UNLICENSED",
  "dependencies": {
    "snowpack": "^3.8.8"
  },
// I tried doing things without the following, but here it's included:
  "snowpack": {
    "entrypoints": [
      "src/index.jsx"
    ]
  }
}

Files for a project titled 'plasma':

~/plasma$ tree -I 'node_modules'
.
├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App
│   │   ├── App.jsx
│   │   └── index.js
│   └── index.jsx
└── style.css

index.html references index.jsx like so

    <body>
        <div id="root"></div>
        <script type="module" src="./src/index.jsx"></script>
    </body>

(also tried naming it .js instead of .jsx)

index.jsx imports react, react-dom, and App, then renders into dom like so:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));
App.jsx:
import React from 'react';

export const App = () => {
    return(<>Hello from the app component</>);
};
index.js:
export * from './App';

Looked at the above several times over, and could not find an issue.

score 0 · Answer 1 · answered Mar 20 '23 at 21:42

In your HTML, you must point your <script> tag to the transpiled/output version with .js.

We can see in the documentation they recommend you to use:

<script type="module" src="/index.js"></script>

https://www.snowpack.dev/tutorials/react

I have a sample template using TypeScript+JSX and custom mount point that you could have a look:

https://github.com/oieduardorabelo/snowpack-react-tanstack-router

Snowpack can't find /src/index.jsx no matter what I do?

1 Answers1