Build fails in fresh sveltejs/template-webpack setup

[julKali]

When using the (official) Svelte Webpack template, the build fails.

Steps to reproduce

• npx degit sveltejs/template-webpack svelte-test
• npm install svelte-jsoneditor
• Modify App.svelte like so:

<script>
	import { JSONEditor } from "svelte-jsoneditor";

	export let name;
</script>

<main>
	<JSONEditor></JSONEditor>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	...
</style>

• npm run build

Expected outcome

No compilation errors

Actual outcome

Compilation fails with a long error message. It seems to be an issue with ESM.

A snippet from the error log (full below):

ERROR in ./node_modules/svelte-jsoneditor/utils/jsonUtils.js 5:0-40
Module not found: Error: Package path . is not exported from package /home/julian/svelte-test/node_modules/jsonrepair (see exports field in /home/julian/svelte-test/node_modules/jsonrepair/package.json)
 @ ./node_modules/svelte-jsoneditor/index.js 22:0-149 22:0-149 22:0-149 22:0-149 22:0-149 22:0-149 22:0-149 22:0-149 26:0-53 26:0-53
 @ ./src/App.svelte 22:0-47 35:18-28
 @ ./src/main.js 3:0-31 5:16-19

Full error log:
output.log

[julKali]

It works (compiles) when using vanilla-jsoneditor and standalone.js, but then I run into the well known issue #2 .

[julKali]

For more information (defined in the template-webpack repo):

package.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "svelte": "^4.0.0",
    "svelte-loader": "^3.1.9",
    "webpack": "^5.70.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "webpack serve"
  },
  "dependencies": {
    "svelte-jsoneditor": "^0.23.2"
  }
}

webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
	entry: {
		'build/bundle': ['./src/main.js']
	},
	resolve: {
		alias: {
			svelte: path.resolve('node_modules', 'svelte/src/runtime')
		},
		extensions: ['.mjs', '.js', '.svelte'],
		mainFields: ['svelte', 'browser', 'module', 'main'],
		conditionNames: ['svelte', 'browser']
	},
	output: {
		path: path.join(__dirname, '/public'),
		filename: '[name].js',
		chunkFilename: '[name].[id].js'
	},
	module: {
		rules: [
			{
				test: /\.svelte$/,
				use: {
					loader: 'svelte-loader',
					options: {
						compilerOptions: {
							dev: !prod
						},
						emitCss: prod,
						hotReload: !prod
					}
				}
			},
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			}
		]
	},
	mode,
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css'
		})
	],
	devtool: prod ? false : 'source-map',
	devServer: {
		hot: true,
		static: {
			directory: path.join(__dirname, 'public'),
		}
	}
};

[josdejong]

Thanks for reporting Julian.

The error message suggests that your setup has an issue importing code from the jsonrepair library used by svelte-jsoneditor.

Can you test whether the same error occurs when you use jsonrepair itself in your setup? (ie. remove usages of svelte-jsoneditor, and install and import jsonrepair like import { jsonrepair } from 'jsonrepair', then see if the same error occurs).

[julKali]

Thanks for looking at this?

Indeed, using only jsonrepair also doesn't work:

ERROR in ./src/App.svelte 18:0-40
Module not found: Error: Package path . is not exported from package /home/julian/svelte-test/node_modules/jsonrepair (see exports field in /home/julian/svelte-test/node_modules/jsonrepair/package.json)
 @ ./src/main.js 3:0-31 5:16-19

If you look at the full error log, there are many packets with such an error:

ERROR in ./node_modules/svelte-jsoneditor/components/modes/textmode/TextMode.svelte 71:0-82:26
Module not found: Error: Package path . is not exported from package /home/julian/svelte-test/node_modules/@codemirror/view (see exports field in /home/julian/svelte-test/node_modules/@codemirror/view/package.json)
 @ ./node_modules/svelte-jsoneditor/components/modes/JSONEditorRoot.svelte 21:0-50 231:16-24
 @ ./node_modules/svelte-jsoneditor/components/JSONEditor.svelte 59:0-59 104:22-36
 @ ./node_modules/svelte-jsoneditor/index.js 1:0-56 9:0-22
 @ ./src/App.svelte 22:0-47 35:18-28
 @ ./src/main.js 3:0-31 5:16-19

ERROR in ./node_modules/svelte-jsoneditor/components/modes/textmode/TextMode.svelte 95:0-66
Module not found: Error: Package path . is not exported from package /home/julian/svelte-test/node_modules/@codemirror/lint (see exports field in /home/julian/svelte-test/node_modules/@codemirror/lint/package.json)
 @ ./node_modules/svelte-jsoneditor/components/modes/JSONEditorRoot.svelte 21:0-50 231:16-24
 @ ./node_modules/svelte-jsoneditor/components/JSONEditor.svelte 59:0-59 104:22-36
 @ ./node_modules/svelte-jsoneditor/index.js 1:0-56 9:0-22
 @ ./src/App.svelte 22:0-47 35:18-28
 @ ./src/main.js 3:0-31 5:16-19

ERROR in ./node_modules/svelte-jsoneditor/components/modes/tablemode/contextmenu/createTableContextMenuItems.js 2:0-97
Module not found: Error: Can't resolve '../../../../logic/selection' in '/home/julian/svelte-test/node_modules/svelte-jsoneditor/components/modes/tablemode/contextmenu'
Did you mean 'selection.js'?
BREAKING CHANGE: The request '../../../../logic/selection' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/svelte-jsoneditor/components/modes/tablemode/TableMode.svelte 163:0-84 2826:23-50
 @ ./node_modules/svelte-jsoneditor/components/modes/JSONEditorRoot.svelte 22:0-53 148:17-26
 @ ./node_modules/svelte-jsoneditor/components/JSONEditor.svelte 59:0-59 104:22-36
 @ ./node_modules/svelte-jsoneditor/index.js 1:0-56 9:0-22
 @ ./src/App.svelte 22:0-47 35:18-28
 @ ./src/main.js 3:0-31 5:16-19

But online I found little about this. It may be something with ESM and CJS but I have little knowledge on how these work exactly. Do you have an idea on this?

[julKali]

Okay, this could simply be a problem with svelte-loader for Webpack, but I think it will be easier for me to just move to Vite. I'll close this, thanks!

[josdejong]

Good to hear, thanks for sharing your solution!