Create react app to vite migration

[lokeshwarobuli]

I recently migrated from create-react-app to vite and the build is failing on vite for the following reason

Uncaught TypeError: Failed to resolve module specifier "d3-color". Relative references must start with either "/", "./", or "../".

Then I did npm ls d3-color which gave me the following

and I read a blog regarding this here https://formidable.com/blog/2022/victory-esm/

Is there anything we can do here ??

[ryan-roemer]

@lokeshwarobuli can you create a minimal reproduction of this in a public github project with install + build + error reproduction steps?

Offhand, I'm guessing vite isn't correctly digesting the package.json:exports correctly of victory-vendor. Thanks!

[lokeshwarobuli]

@ryan-roemer, I have minimal idea of how to recreate the same issue with a public repo. All I did was migrate from CRA to Vite and the error was popping and I googled and found the blog link and added the victory vendor to the list of packages in package.json. Still the error continues. Will it be helpful if I share the package.json or the component file where I use victory charts. I am sorry !!

[ryan-roemer]

I have a minimal repository here which just displays a VictoryPie chart with a simple Vite react build: https://github.com/FormidableLabs/victory-vite-example

Everything works fine in that so far. If you could open a PR with changes that exhibit the same failure as you're seeing in your project that would be the next step to help us diagnose. Thanks!

[lokeshwarobuli]

We tried the same, like creating a Vite project and then installing victory charts which works fine, but the problem with our scenario is our entire project is in CRA and we are trying to migrate to Vite and that's when it causes an issue. Also thanks a lot for all the help !!

[lokeshwarobuli]

This is where I use the Victory Area

and following is my vite.config.js

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import linaria from '@linaria/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
import viteTsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  build: {
    // rollupOptions: {
    //   external: ['d3-color'],
    // },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupVitest.ts',
  },
  server: {
    port: 3000,
    host: '0.0.0.0',
    force: true,
    open: true,
  },
  esbuild: {
    loader: 'tsx',
  },
  plugins: [react(), viteTsconfigPaths(), svgrPlugin(), linaria()],
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis',
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  define: {
    define: {
      'process.env.VITE_APP_ZENDESK_KEY': process.env.VITE_APP_ZENDESK_KEY || null,
    },
  },
  resolve: {
    alias: {
      // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
      // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
      // process and buffer are excluded because already managed
      // by node-globals-polyfill
      util: 'rollup-plugin-node-polyfills/polyfills/util',
      sys: 'util',
      events: 'rollup-plugin-node-polyfills/polyfills/events',
      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
      path: 'rollup-plugin-node-polyfills/polyfills/path',
      querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
      punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
      url: 'rollup-plugin-node-polyfills/polyfills/url',
      string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
      http: 'rollup-plugin-node-polyfills/polyfills/http',
      https: 'rollup-plugin-node-polyfills/polyfills/http',
      os: 'rollup-plugin-node-polyfills/polyfills/os',
      assert: 'rollup-plugin-node-polyfills/polyfills/assert',
      constants: 'rollup-plugin-node-polyfills/polyfills/constants',
      _stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
      _stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
      _stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
      _stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
      _stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
      timers: 'rollup-plugin-node-polyfills/polyfills/timers',
      console: 'rollup-plugin-node-polyfills/polyfills/console',
      vm: 'rollup-plugin-node-polyfills/polyfills/vm',
      zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
      tty: 'rollup-plugin-node-polyfills/polyfills/tty',
      domain: 'rollup-plugin-node-polyfills/polyfills/domain',
    },
  },
});

[ryan-roemer]

Thanks. For the code I also need the actual import/require/whatever statements, not the usage. For configs are there other configs like for Vite or TS?

[lokeshwarobuli]

This is the tsconfig.json that I have

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

the babelrc.json

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react",
    "@linaria"
  ],
  "plugins": []
}

This is how I import the VictoryArea

Also Thanks a lot for all the help. I appreciate it a lot !!

[ryan-roemer]

Nothing is sticking out as an obvious culprit to me. Maybe you can pull down my minimal repository, branch, and experiment and try to add some of the configs you have above to see if anything can reproduce the error?

[lokeshwarobuli]

We tried couple of ways, then we ripped out the entire project and created a new vite app and then imported the existing things. Thanks for the help, appreciate it