Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

'Attempting to import from the SRC folder directly results in failures within the WITE environment.'

After encountering some issues with npx i, I decided to create my react app using Vite by creating a new folder and moving my project into it. To integrate the existing code, I replaced the src folder into the vite app. However, this has resulted in a lot of "Failed to resolve import" errors. The reason for this is that the npx-built app had a jsconfig.jsos file with the base URL pointing at the src folder, and all my imports were beginning with components/ or hooks/. To resolve this, I referred to an article that guided me in modifying my vite-config.js file to:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: '/src',
    },
  },
});
I also created a jsconfig.json file and included:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["./src/*"],
      "components/*": ["./src/components/*"]
    }
  }
}
Currently, I'm seeking assistance to learn how to implement direct imports from src when using Vite without requiring manual resolution of errors, which would be highly time-consuming.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can create absolute imports by configuring the Vite configuration file to use an alias for your source files. For example, you can import a component like this - import Button from "src/components/Button"; using absolute imports. In your case, you can modify your vite-config.js file to include an alias for your source files as follows: 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});
This will allow you to use direct imports from src without requiring manual resolution of errors.

Sources

https://stackoverflow.com/questions/66043612How To Create Absolute Imports In Vite React App: A step-by-step GuideEnvironment-specific imports · vitejs vite · Discussion #4172Vite + Vue Router - Dynamic Imports - Stack Overflow
avatar
Tolerim
a month ago
To be able to import directly from the src folder in a Vite app, you should follow these steps: 1. First, you need to change the baseUrl value in the jsconfig.json file to the same value you set in the alias property of the vite.config.js file. In your case, both should be set to: 
"baseUrl": "./"
2. Then, you need to update the import statements in your code to use the src folder as the starting point for your paths. For example, if you have a file named Button.js located in the src/components folder, you can import it like this: 
import Button from 'src/components/Button'
This should work because you have set up the alias in your vite.config.js and jsconfig.json files. By following these steps, you should be able to import modules directly from the src folder in your Vite app without encountering any "Failed to resolve import" errors.
;