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>

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

- `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](https://github.com/josdejong/svelte-jsoneditor/files/15182049/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!