Vite react build error: Unexpected "<"

Describe the bug

Reproduction

Vite build error

yarn dev
yarn run v1.22.10
$ vite
 > resources/js/app.js:12:2: error: Unexpected "<"
    12 │   <App
       ╵   ^

error when starting dev server:
Error: Build failed with 1 error:
resources/js/app.js:12:2: error: Unexpected "<"
    at failureErrorWithLog (/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:1224:15)

    at buildResponseToResult (/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:936:32)
    at /Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:1035:20
    at /Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:568:9
    at handleIncomingPacket (/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:657:9)
    at Socket.readFromStdout (/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/esbuild/lib/main.js:535:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

$ npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
Need to install the following packages:
  envinfo
Ok to proceed? (y) y

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz
    Memory: 1.01 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 90.0.4430.85
    Safari: 14.0.2
  npmPackages:
    vite: ^2.2.1 => 2.2.1

Used package manager:

Logs

$ yarn dev --debug
yarn run v1.22.10
$ vite --debug
  vite:config bundled config file loaded in 981ms +0ms
[dotenv][DEBUG] did not match key and value when parsing line 6:
[dotenv][DEBUG] did not match key and value when parsing line 9:
[dotenv][DEBUG] did not match key and value when parsing line 16:
[dotenv][DEBUG] did not match key and value when parsing line 22:
[dotenv][DEBUG] did not match key and value when parsing line 24:
[dotenv][DEBUG] did not match key and value when parsing line 28:
[dotenv][DEBUG] did not match key and value when parsing line 37:
[dotenv][DEBUG] did not match key and value when parsing line 42:
[dotenv][DEBUG] did not match key and value when parsing line 47:
[dotenv][DEBUG] did not match key and value when parsing line 50:
[dotenv][DEBUG] did not match key and value when parsing line 52:
  vite:config using resolved config: {
  vite:config   base: '/',
  vite:config   publicDir: '/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/resources/static',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'public/build',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Array] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: true,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:laravel',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   server: { host: 'localhost', https: false, port: 3000 },
  vite:config   configFile: '/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Applications/XAMPP/xamppfiles/htdocs/chat-system-example',
  vite:config   cacheDir: '/Applications/XAMPP/xamppfiles/htdocs/chat-system-example/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +6ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /Applications/XAMPP/xamppfiles/htdocs/chat-system-example/resources/js/app.js
  vite:deps   /Applications/XAMPP/xamppfiles/htdocs/chat-system-example/resources/js/bootstrap.js +0ms
 > resources/js/app.js:12:2: error: Unexpected "<"
    12 │   <App
       ╵   ^

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[myckhel]

Thank you for your response.

Error solved 👍🏽 .

[Shinigami92]

You my try to contact these library teams and tell them they should use valid extension names for their files. It’s kinda writing markdown in a plain .txt file 🤔