I updated my project using npm-check-updates. Then I started to get a weird error. I did the suggestion on the terminal and installed polyfill-node but did not work. Nothing really helpful on the net on this issue.
Error on terminal:
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "http", "https", "url", "stream", "assert", "zlib" and "util". You might need to include https://github.com/FredKSchott/rollup-plugin-pol
yfill-node
LiveReload enabled
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
http (guessing 'require$$1')
https (guessing 'require$$2')
url (guessing 'require$$0')
stream (guessing 'require$$3')
assert (guessing 'require$$4')
zlib (guessing 'require$$8')
util (guessing 'require$$0$1')
created public/build/bundle.js in 15.5s
[2022-09-15 18:00:16] waiting for changes...
> [email protected] start
> sirv public --no-clear --single "--dev"
Your application is ready~! üöÄ
‚û° Port 8080 is taken; using 65526 instead
- Local: http://localhost:65526
- Network: Add `--host` to expose
package.json
{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear --single",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^22.0.2",
"@rollup/plugin-node-resolve": "^14.1.0",
"@rollup/plugin-typescript": "^8.5.0",
"@tsconfig/svelte": "^3.0.0",
"@types/leaflet": "^1.7.11",
"carbon-components-svelte": "^0.70.6",
"carbon-icons-svelte": "^11.2.0",
"rollup": "^2.79.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.50.1",
"svelte-check": "^2.9.0",
"svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0",
"typescript": "^4.8.3"
},
"dependencies": {
"@rollup/plugin-replace": "^4.0.0",
"axios": "^0.27.2",
"date-fns": "^2.29.3",
"dotenv": "^16.0.2",
"leaflet": "^1.8.0",
"maplibre-gl": "^2.4.0",
"qs": "^6.11.0",
"sirv-cli": "^2.0.2",
"svelte-navigator": "^3.2.2"
}
}
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 sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
import replace from '@rollup/plugin-replace';
import { config } from 'dotenv';
const production = !process.env.ROLLUP_WATCH;
const configToReplace = {};
if (!production) {
for (const [key, v] of Object.entries(config().parsed)) {
configToReplace[`process.env.${key}`] = `'${v}'`;
}
} else {
const keys = ["ENV", "APP_SUBDOMAIN", "DOMAIN"]
for (const key of keys) {
console.log(key, process.env[key]);
configToReplace[`process.env.${key}`] = `'${process.env[key]}'`;
}
}
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.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
inlineDynamicImports: true,
},
plugins: [
replace({
include: ["src/**/*.ts", "src/**/*.svelte"],
preventAssignment: true,
values: configToReplace,
}),
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
My old package.json before updating
{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0",
"@types/leaflet": "^1.7.9",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-check": "^2.0.0",
"svelte-preprocess": "^4.0.0",
"tslib": "^2.0.0",
"carbon-icons-svelte": "^11.2.0",
"carbon-components-svelte": "^0.70.6",
"typescript": "^4.0.0"
},
"dependencies": {
"@rollup/plugin-replace": "^4.0.0",
"@types/google-maps": "^3.2.3",
"axios": "^0.27.2",
"date-fns": "^2.29.3",
"dotenv": "^16.0.2",
"leaflet": "^1.7.1",
"maplibre-gl": "^2.1.6",
"qs": "^6.10.3",
"sirv-cli": "^2.0.0",
"svelte-navigator": "^3.2.2"
}
}
This what npm-check-updates changed:
@rollup/plugin-commonjs ^17.0.0 ‚Üí ^22.0.2
@rollup/plugin-node-resolve ^11.0.0 ‚Üí ^14.1.0
@rollup/plugin-typescript ^8.0.0 ‚Üí ^8.5.0
@tsconfig/svelte ^2.0.0 ‚Üí ^3.0.0
@types/leaflet ^1.7.9 ‚Üí ^1.8.0
leaflet ^1.7.1 ‚Üí ^1.8.0
maplibre-gl ^2.1.6 ‚Üí ^2.4.0
qs ^6.10.3 ‚Üí ^6.11.0
rollup ^2.3.4 ‚Üí ^2.79.0
rollup-plugin-livereload ^2.0.0 ‚Üí ^2.0.5
rollup-plugin-svelte ^7.0.0 ‚Üí ^7.1.0
rollup-plugin-terser ^7.0.0 ‚Üí ^7.0.2
sirv-cli ^2.0.0 ‚Üí ^2.0.2
svelte ^3.0.0 ‚Üí ^3.50.1
svelte-check ^2.0.0 ‚Üí ^2.9.0
svelte-preprocess ^4.0.0 ‚Üí ^4.10.7
tslib ^2.0.0 ‚Üí ^2.4.0
typescript ^4.0.0 ‚Üí ^4.8.3
CodePudding user response：
I cannot tell you what exactly is causing the problem, but you have multiple major version upgrades that could have breaking changes in them. You should check their release history/change logs for information on that.
In general you can use NPM to upgrade a single package to a specific version using install, you can use show to view information including the latest version of a package.
E.g. if Svelte is currently at version 2, you could run this to go to version 3:
npm install svelte@3
npm-check-updates has various options to control what it does. I would recommend using the -i flag to upgrade your packages interactively.
I would do all minor version upgrades at once, check if there are issues, then move on the major version upgrades. You can upgrade those individually to identify which package causes trouble if the migration guides/change logs do not provide enough info.