Module not found: Error: Can't resolve '../types/utils' in '/my-app/node_modules/svelvet/Edges'

Question

I've been trying to get this to work for the last 30 hours with no luck, I have a Rails 6 app with Svelte 3, React 18, Node 18 using Shakapacker 6, when I try to compile I'm getting this error:

ERROR in ./node_modules/svelvet/Edges/utils.js 1:0-42
Module not found: Error: Can't resolve '../types/utils' in '/my-app/node_modules/svelvet/Edges'
Did you mean 'utils.js'?
BREAKING CHANGE: The request '../types/utils' 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.
resolve '../types/utils' in '/my-app/node_modules/svelvet/Edges'
  using description file: /my-app/node_modules/svelvet/package.json (relative path: ./Edges)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /my-app/node_modules/svelvet/package.json (relative path: ./types/utils)
      Field 'browser' doesn't contain a valid alias configuration
      /my-app/node_modules/svelvet/types/utils doesn't exist

ERROR in ./node_modules/svelvet/index.js 4:0-24
Module not found: Error: Can't resolve './types' in '/my-app/node_modules/svelvet'
Did you mean 'index.js'?
BREAKING CHANGE: The request './types' 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.
resolve './types' in '/my-app/node_modules/svelvet'
  using description file: /my-app/node_modules/svelvet/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /my-app/node_modules/svelvet/package.json (relative path: ./types)
      Field 'browser' doesn't contain a valid alias configuration
      /my-app/node_modules/svelvet/types is not a file

webpack 5.88.2 compiled with 2 errors in 24128 ms

I'm not an expert in the Webpacker / Shakapacker side so my config files might be missing something, here's the webpack.config.js

// const { webpackConfig, merge } = require('shakapacker')
const { webpackConfig: baseWebpackConfig, merge } = require('shakapacker')
const path = require('path');

console.log("baseWebpackConfig", baseWebpackConfig)

// See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.

const customConfig = {
  resolve: {
    extensions: [
      '.css',
      '.js',
      '.tsx',
      '.ts',
      '.svelte',
      '.jsx',
      '.mjs',
      '.scss',
      '.sass',
      '.module.sass',
      '.module.scss',
      '.module.css',
      '.png',
      '.svg',
      '.gif',
      '.jpeg',
      '.jpg'
    ]
  }
}

// const jsLoaderConfig = {
//   module: {
//     rules: [
//       {
//         test: /\.js?$/,
//         exclude: /node_modules/, //don't test node_modules folder
//         use: {
//             loader: 'babel-loader',
//         },
//       },
//     ]
//   }
// }

const sassLoaderConfig = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        // test: /\.css$/,
        include: /node_modules\/@cloudscape-design\//,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader"
        ],
      },
    ],
  },
}

// const mjsLoaderConfig = {
//   module: {
//     rules: [
//       {
//         test: /\.mjs$/,
//         include: /node_modules/,
//         type: "javascript/auto"
//       },
//     ],
//   },
// }

const svelteLoaderConfig = {
  resolve: {
    alias: {
      svelte: path.resolve('node_modules', 'svelte'),
      // '@restart/ui': path.resolve('node_modules', '@restart', 'ui'),
      // './ssr': path.resolve('node_modules', '@restart', 'ui', 'ssr'),
      // '@restart/ui/ssr': path.resolve('node_modules', '@restart', 'ui', 'ssr'),
      // '@restart/hooks': path.resolve('node_modules', '@restart', 'hooks'),
      // 'stylis': path.resolve('node_modules', 'stylis'),
      // 'is-plain-object': path.resolve('node_modules', 'is-plain-object'),
      // 'immer': path.resolve('node_modules', 'immer'),
      // 'sql-formatter': path.resolve('node_modules', 'sql-formatter'),
    },
    // extensions: ['.js', '.tsx', '.ts', '.mjs', '.css', '.svelte'],
    extensions: [
      '.css',
      '.js',
      '.tsx',
      '.ts',
      '.svelte',
      '.jsx',
      '.mjs',
      '.scss',
      '.sass',
      '.module.sass',
      '.module.scss',
      '.module.css',
      '.png',
      '.svg',
      '.gif',
      '.jpeg',
      '.jpg'
    ],
    mainFields: ['browser', 'module', 'main', 'types', 'svelte'],
    // conditionNames: ['browser', 'svelte']
    // mainFields: ['svelte', 'browser', 'module', 'main'],
    conditionNames: ['svelte', 'browser', 'import']
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/, //don't test node_modules folder
        loader: 'babel-loader',
        resolve: {
          fullySpecified: false,
        },
      },{
        test: /\.(ts|tsx)?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      },
      {
        test: /\.svelte?$/,
        loader: 'svelte-loader'
      },
      {
        // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
        test: /node_modules\/svelte\/.*\.mjs$/,
        exclude: /node_modules/, //don't test node_modules folder
        resolve: {
          fullySpecified: false
        }
      }
    ],
  },
}

const fallbackConfig = {
  resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "querystring": require.resolve("querystring-es3"),
      "url": require.resolve("url/")
    }
  }
}

// module.exports = merge({}, baseWebpackConfig, sassLoaderConfig, customConfig, jsLoaderConfig, mjsLoaderConfig, svelteLoaderConfig, svelteConfig)
module.exports = merge({}, baseWebpackConfig, sassLoaderConfig, customConfig, svelteLoaderConfig, fallbackConfig)

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.8.3",
    "@babel/helper-environment-visitor": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@babel/runtime": "7",
    "@cloudscape-design/components": "^3.0.352",
    "@cloudscape-design/global-styles": "^1.0.12",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@hotwired/stimulus": "^3.0.0-beta.2",
    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
    "@hotwired/turbo-rails": "^7.0.0-rc.3",
    "@jridgewell/gen-mapping": "^0.3.1",
    "@material-ui/core": "^4.8.3",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.15",
    "@panzoom/panzoom": "^4.5.1",
    "@rails/request.js": "^0.0.8",
    "@types/react": "^18.2.21",
    "@types/react-bootstrap": "^0.32.32",
    "@types/react-dom": "^18.2.7",
    "actioncable": "^5.2.4-4",
    "axios": "^0.19.1",
    "babel-loader": "8.2.5",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "buffer": "^6.0.3",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.1",
    "classnames": "^2.2.6",
    "closest": "^0.0.1",
    "compression-webpack-plugin": "9",
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "dagre": "^0.8.4",
    "dropzone": "^6.0.0-beta.2",
    "emotion": "^11.0.0",
    "fabric": "^4.3.0",
    "hammerjs": "^2.0.8",
    "history": "^4.10.1",
    "httpsnippet": "^1.25.0",
    "immutable": "^4.3.2",
    "jquery-ujs": "^1.2.2",
    "konva": "^4.1.5",
    "lodash": "^4",
    "mathjs": "^7.5.1",
    "mini-css-extract-plugin": "^2.7.6",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.9",
    "prettier": "^2.8.4",
    "prop-types": "^15.8.1",
    "querystring-es3": "^0.2.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-json-view": "^1.19.1",
    "react-redux": "^8.1.2",
    "react-refresh": "^0.14.0",
    "react-router-dom": "^6.15.0",
    "react-zoom-pan-pinch": "^3.1.0",
    "react_ujs": "^3.1.1",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.4.2",
    "resize-observer-polyfill": "^1.5.1",
    "shakapacker": "6.6.0",
    "slate": "^0.94.1",
    "slate-react": "^0.98.1",
    "sortablejs": "^1.15.0",
    "sql-formatter": "^12.1.0",
    "stimulus-clipboard": "3.3.0",
    "stimulus-dropdown": "^2.1.0",
    "stimulus-read-more": "^4.1.0",
    "stimulus-reveal-controller": "^4.1.0",
    "stimulus-sortable": "^4.1.1",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.3",
    "svelte": "^3.55.0",
    "svelte-loader": "^3.1.4",
    "svelvet": "^5.0.8",
    "terser-webpack-plugin": "5",
    "ts-loader": "^9.4.4",
    "typescript": "^4.9.5",
    "url": "^0.11.1",
    "util": "^0.12.5",
    "video.js": "^7.8.4",
    "webpack": "5",
    "webpack-assets-manifest": "5",
    "webpack-cli": "4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "5"
  },
  "version": "0.1.0",
  "browserslist": [
    "defaults"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11"
  }
}

babel.config.js

module.exports = function (api) {
  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
  const resultConfig = defaultConfigFunc(api)
  const isDevelopmentEnv = api.env('development')
  const isProductionEnv = api.env('production')
  const isTestEnv = api.env('test')

  const changesOnDefault = {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          },
          modules: 'commonjs'
        },
        '@babel/preset-react'
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      [
        '@babel/preset-react',
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ],
      [
        '@babel/preset-typescript',
        {
          'allExtensions': true,
          'isTSX': true
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-private-property-in-object',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-private-methods',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      // isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
      //   {
      //     removeImport: true
      //   }
      // ],
      process.env.WEBPACK_SERVE && 'react-refresh/babel'
    ].filter(Boolean),
  }

  resultConfig.presets = [...changesOnDefault.presets]
  resultConfig.plugins = [...changesOnDefault.plugins]

  return resultConfig
}