Open UIX-Design opened 5 years ago
@UIX-Design do you have a leading forward slash in your <script src="dist/bundle.js">
on index.html
?
If not, try to add it. I had the same issue and that fixed it.
@gabrielizaias thanks for your answer, but when i change the script-tag in the index.html
like this:
<script src="dist/main.js"></script>
it doesn't work. I still get 404 Not Found
I've also tried this:
historyApiFallback: 'index.html'
or historyApiFallback: '/index.html'
or historyApiFallback: 'dist/index.html'
- but doesn't work too.
my full rollup.config.js
looks like this:
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import {terser} from 'rollup-plugin-terser';
import svelte_preprocess_postcss from 'svelte-preprocess-postcss';
import serve from 'rollup-plugin-serve'
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
format: 'iife',
sourcemap: true,
name: 'app',
file: 'dist/main.js',
},
plugins: [
svelte({
dev: !production,
preprocess: {
style: svelte_preprocess_postcss(),
},
css: css => {
css.write('dist/components.css');
},
}),
resolve(),
commonjs(),
postcss({
extract: true,
}),
serve({
contentBase: 'dist',
host: 'localhost',
port: 5000,
historyApiFallback: true
}),
!production && livereload('dist'),
production && terser(),
],
};
when i change the script-tag in the index.html like this:
<script src="dist/main.js"></script>
it doesn't work.
Does that mean you removed the leading forward slash? You have to add it, otherwise any request to a nested route like http://example.com/lorem/ipsum
will try to load your script from http://example.com/lorem/ipsum/dist/main.js
, which is why it fails.
There doesn't seem to be anything wrong in your rollup.config.js
from what I can tell.
@gabrielizaias Yes, when i add the leading forward slash like this <script src="/dist/main.js"></script>
i also still get 404 - Svelte can‘t find the main.js
file.
How can i solve the issue?
If you can confirm that the file exists in the file system at the correct path, then Rollup is doing its job. What's your index.html
looking like?
@gabrielizaias i hope we can find my issue
my index.html
looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="msapplication-TileColor" content="#4e598c">
<meta name="theme-color" content="#4e598c">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#4e598c">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="components.css">
<title>Svelte App</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Doublecheck that dist/index.html exists and set <script src="/main.js">
host is optional
@thgh thanks for your help, but it doesn't work.
my project structure looks like this:
- project
- dist
- index.html
- main.js
- main.css
- src
- App.svelte
- main.js
- store.js
- rollup.config.js
- package.json
The dist/index.html
exists, but my console say this:
I set in the index.html
<script src="/main.js">
, i also tried this config in the rollup.config.js
serve({
contentBase: 'dist',
port: 5000,
historyApiFallback: 'dist/index.html'
}),
and i also tried to run npm run dev
as admin on my macbook, but nothing working.
Here are my scripts
from the package.json
file:
"scripts": {
"build": "rollup -c",
"build:auto": "rollup -c -w",
"serve": "sirv dist",
"serve:dev": "sirv dist --dev",
"dev": "run-p build:auto serve:dev"
},
Try changing historyApiFallback: 'dist/index.html' To historyApiFallback: '/index.html' Or historyApiFallback: true
@thgh I'd like to tell you something else, but nothing's changed.
Could be interesting to make a repo so we can see what's going wrong.
It's https://github.com/thgh/rollup-plugin-serve/blob/0e17e0359860a5e84fdd3174102e2edfcf3a0426/src/index.js#L38 that is causing this issue.
The below if statement should be on top then all will be well.
If I have time i'll do a pull request for this.
In fact, this error message should just be removed and let it do a 404
Do you mind checking if rollup-plugin-serve@2.0.0-beta.0
has a working historyApiFallback?
I can confirm the all Not wokings
above .
Also tried rollup-plugin-serve@2.0.0-beta.0
and still is not working.
Hi, thank you very much for this repo. I want to use the plugin for my new svelte spa app.
My config looks like this:
But the
historyApiFallback
isn't working. When i go tolocalhost:5000/solutions/technic
i still get404 Not Found
and i don't see theindex.html
How can i solve this?