After done with my development, I run npm run build
to build the production app. but I will get:
Uncaught SyntaxError: Unexpected token '<'
from bundle.js
.
I am running on svelte 3.0.0
. How can I resolve this?
Update1
Below is my rollup.config.js
:
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import preprocess from 'svelte-preprocess';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
dev: !production,
preprocess: preprocess(),
css: css => {
css.write('bundle.css');
}
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
I don't quite remember, but I believe the only changes I made is all that related to preprocess for the css
part.
Update2 I just test with the new svelte
project without touching anything. I practically follow the instructions from the website:
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run build
the only different is I run build
rather than dev
. and immediately already got the same error:
bundle.js:1 Uncaught SyntaxError: Unexpected token '<'
below is the rollup.config.js
:
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
css({ output: 'bundle.css' }),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
Other than taking out the comments, all the code is the brand new from the download.
How can I resolve this issue?
Try using latest node version.
For example:
nvm install 14.17.5
nvm use 14.17.5
nvm
github: https://github.com/nvm-sh/nvm
You can use n
also: https://github.com/mklement0/n-install
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.