I'm getting the following error when running npm start on my React app using Vite.
16:42:54 [vite] Internal server error: Failed to resolve import "./encode.js" from "node_modules/@libp2p/mplex/src/mplex.ts?v=3146d3a3". Does the file exist?
Plugin: vite:import-analysis
File: /Users/matiasvallone/Proyectos/FE/frontend-2/node_modules/@libp2p/mplex/src/mplex.ts?v=3146d3a3
2 | import { pushableV } from "it-pushable";
3 | import { abortableSource } from "abortable-iterator";
4 | import { encode } from "./encode.js";
| ^
5 | import { decode } from "./decode.js";
The file does exists, but it is a .ts file. The rest of my application uses a mix of js, ts, jsx and tsx and they all behave correctly, but this external package is breaking my local development environment.
building the app works as expected and the output files produce no errors, this error only triggers on develop environment.
Relevant files:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import analyze from 'rollup-plugin-analyzer'
export default defineConfig({
server: {
port: 3001
},
envPrefix: 'VITE_',
plugins: [
react(),
tsconfigPaths(),
],
build: {
sourcemap: true,
target: 'es2020',
minify: true,
// disable @rollup/plugin-commonjs https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
// should be removable with vite 4 https://vitejs.dev/blog/announcing-vite3.html#esbuild-deps-optimization-at-build-time-experimental
commonjsOptions: {
include: []
},
rollupOptions: {
output: {
manualChunks: {
ipfs: ["ipfs-core"],
apexcharts: ["react-apexcharts", "apexcharts"]
},
},
plugins: [analyze({
limit: 10,
})],
},
},
define: {
'process.env.NODE_DEBUG': 'false',
'global': 'globalThis'
},
optimizeDeps: {
// enable esbuild dep optimization during build https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
// should be removable with vite 4 https://vitejs.dev/blog/announcing-vite3.html#esbuild-deps-optimization-at-build-time-experimental
disabled: false,
// target: es2020 added as workaround to make big ints work
// - should be removable with vite 4
// https://github.com/vitejs/vite/issues/9062#issuecomment-1182818044
esbuildOptions: {
target: 'es2020'
}
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
}
}
});
package.json
{
"name": "Frontend",
"version": "1.5.3",
"private": true,
"engines": {
"node": "16.14.2"
},
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@faker-js/faker": "^7.2.0",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.9.3",
"@sentry/react": "^7.1.1",
"@sentry/tracing": "^7.1.1",
"@stripe/react-stripe-js": "^1.7.2",
"@stripe/stripe-js": "^1.27.0",
"@testing-library/react": "^11.2.2",
"@toast-ui/react-chart": "^1.0.2",
"apexcharts": "^3.22.2",
"aws-amplify": "^4.3.11",
"axios": "^0.21.4",
"bootstrap": "^4.5.3",
"chartist": "^0.11.4",
"classnames": "^2.2.6",
"dayjs": "^1.11.3",
"dotenv": "^8.2.0",
"echarts": "^4.9.0",
"echarts-for-react": "^2.0.16",
"gravatar": "^1.8.1",
"i18next": "^19.8.4",
"i18next-browser-languagedetector": "^6.0.1",
"ipfs-core": "^0.16.0",
"js-cookie": "^2.2.1",
"lodash": "^4.17.20",
"lodash.clonedeep": "^4.5.0",
"prismjs": "^1.25.0",
"prop-types": "^15.7.2",
"qrcode.react": "^1.0.1",
"react": "^17.0.1",
"react-apexcharts": "^1.3.7",
"react-chartist": "^0.14.3",
"react-chartjs-2": "^2.11.1",
"react-countdown": "^2.3.1",
"react-dom": "^17.0.1",
"react-dropzone": "^11.2.4",
"react-flatpickr": "^3.10.6",
"react-ga": "^3.3.0",
"react-hook-form": "^7.29.0",
"react-i18next": "^11.7.3",
"react-markdown": "^5.0.3",
"react-rangeslider": "^2.2.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.0",
"react-sparklines": "^1.7.0",
"react-stripe-elements": "^6.1.2",
"react-syntax-highlighter": "^15.4.3",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.7",
"reactstrap": "^8.7.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sass": "^1.49.0",
"simplebar-react": "^2.3.0",
"uuid": "^8.3.2"
},
"scripts": {
"build": "vite build",
"serve": "vite dev --port 3001",
"start": "npm run serve",
"lint": "eslint .",
"format": "prettier --write \"**/*.{js,ts,jsx,tsx,json,md,html,css,less,scss}\"",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/gravatar": "^1.8.3",
"@types/jest": "^28.1.6",
"@types/js-cookie": "^3.0.2",
"@types/lodash.debounce": "^4.0.7",
"@types/qrcode.react": "^1.0.2",
"@types/react-flatpickr": "^3.8.7",
"@types/react-router-dom": "^5.3.3",
"@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^2.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-react": "^7.20.6",
"husky": "^7.0.4",
"lint-staged": "^12.3.3",
"prettier": "^2.5.1",
"react-error-overlay": "^6.0.9",
"rollup-plugin-analyzer": "^4.0.0",
"util": "^0.12.4",
"vite": "^3.1.0",
"vite-tsconfig-paths": "^3.5.0"
},
"lint-staged": {
"*.{js,jsx,json,md,html,css,less,scss}": "prettier --write"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
"types": ["vite/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",
"baseUrl": "./src"
},
"include": ["src"]
}
I can't figure out if this error is because of Vite, because of @libp2p or because of a misconfiguration on my project.