search

vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.5k stars 6.18k forks source link

The requested module does not provide an export named #11783

Closed omerfaran closed 1 year ago

omerfaran commented 1 year ago

Describe the bug

Sometimes, after editing in my IDE and saving, the page reloads and I receive an error along those lines:

Uncaught SyntaxError: The requested module '/src/app/App.tsx?t=1674391177584' does not provide an export named 'default' (at main.tsx:4:8)

What comes after 'named' may be different. When this error appears, nothing renders on the screen. In the terminal no error appears.

To "fix" this, what I have to do is undo in my IDE, redo, and save again (basically change nothing), and then the error will go away. If instead of this I just try to refresh the page the error will still be there.

In addition, I see the following error at all times (on each reload), even when everything seems to work fine: Uncaught (in promise) TypeError: Cannot convert undefined or null to object

What I did notice is that the strange bug happens once I import from another lib in my app. Therefore I created a very simple reproduction repo, where in my App.tsx I import a React component from another lib and render it on the screen.

Reproduction

https://github.com/omerfaran/vite-test

Steps to reproduce

Please download the repo, run pnpm install, and then 'nx serve main'.

Everything should work, but if you for example comment out <Testlib1 /> (which is an imported component), and then comment it in, or out again (it's pretty random), you should get the unexpected error, and the page won't render.

System Info

(I actually have Windwos 11 if it matters)

  System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 48.06 GB / 63.78 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.1 
    vite: ^4.0.1 => 4.0.4

Used Package Manager

pnpm

Logs

No response

Validations

Qualterink commented 1 year ago

Hi,

I think we have the same problem. Unfortunately no one has replied yet.

I noticed that the build sometimes goes through and sometimes it doesn't. Esbuild generates files of various sizes. Below are my observations.

https://github.com/vitejs/vite/discussions/11782

https://github.com/vitejs/vite/discussions/11770

I have a very big problem because for a few days now I can't build the project properly because it randomly stops working.

MtFranke commented 1 year ago

Same issue here.

omerfaran commented 1 year ago

Thanks for your input everyone,

@sapphi-red if the repo is working fine for you, can you please share your system info? Maybe it's something about that

sapphi-red commented 1 year ago

Yeah, it worked fine for me. This is my system info.

  System:
    OS: Windows 10 10.0.19044
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 12.69 GB / 31.92 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.61)
    Internet Explorer: 11.0.19041.1566

Posting screen recordings and logs with --debug here may help resolving this.

omerfaran commented 1 year ago

@sapphi-red Thanks for your response!

I tried to update my node version to 18.13.10, also tested on Edge, but same issue.

I tried to run vite build --debug

But it just hangs forever on the last line:

.......
2023-01-25T12:36:03.717Z vite:time 9.96ms ..\..\libs\testlib1\src\lib\Testlib1.tsx
2023-01-25T12:36:03.726Z vite:time 0.38ms ..\..\node_modules\.vite\deps\@emotion_react_jsx-dev-runtime.js.map
2023-01-25T12:36:03.727Z vite:time 0.31ms ..\..\node_modules\.vite\deps\chunk-55TKCHUQ.js.map
2023-01-25T12:36:03.728Z vite:time 0.71ms ..\..\node_modules\.vite\deps\chunk-CEFGKQAD.js.map
2023-01-25T12:36:03.729Z vite:time 0.47ms ..\..\node_modules\.vite\deps\react.js.map
2023-01-25T12:36:03.729Z vite:time 0.42ms ..\..\node_modules\.vite\deps\@emotion_styled.js.map
2023-01-25T12:36:03.730Z vite:time 1.59ms ..\..\node_modules\.vite\deps\chunk-MDXLD7PD.js.map
2023-01-25T12:36:03.734Z vite:time 5.54ms ..\..\node_modules\.vite\deps\react-dom_client.js.map
2023-01-25T12:36:03.833Z vite:deps ✨ static imports crawl ended
2023-01-25T12:36:03.893Z vite:time 0.45ms /favicon.ico

Should I post the whole log? Or is it stored in a file?

Thanks a lot for your help

sapphi-red commented 1 year ago

@omerfaran A whole log in <details> tag would be ok. Does this happen without nx?

omerfaran commented 1 year ago

@sapphi-red Sorry for the silly question but should I run this command in the "main" app package, or at the root level? When running at the root, it complains that I didn't create a vite.config file. Inside "main" it now works without issues:


  vite:config bundled config file loaded in 189.12ms +0ms
  vite:esbuild init tsconfck (root: E:/haveri/haveri) +0ms
  vite:esbuild init tsconfck (root: E:/haveri/haveri) +0ms
  vite:esbuild init tsconfck (root: E:/haveri/haveri) +1ms
  vite:esbuild init tsconfck (root: E:/haveri/haveri) +0ms
  vite:esbuild init tsconfck end +3ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +1ms
  vite:esbuild init tsconfck end +0ms
  vite:config using resolved config: {
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     port: 4200,
  vite:config     host: 'localhost',
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite-tsconfig-paths',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   test: {
  vite:config     globals: true,
  vite:config     cache: { dir: '../../node_modules/.vitest' },
  vite:config     environment: 'jsdom',
  vite:config     include: [ 'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}' ]
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   esbuild: {
  vite:config     jsxDev: false,
  vite:config     jsx: 'automatic',
  vite:config     jsxImportSource: undefined,
  vite:config     jsxSideEffects: false
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: 'E:/haveri/haveri/apps/main/vite.config.ts',
  vite:config   configFileDependencies: [ 'E:/haveri/haveri/apps/main/vite.config.ts' ],
  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     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'E:/haveri/haveri/apps/main',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: 'E:\\haveri\\haveri\\apps\\main\\public',
  vite:config   cacheDir: 'E:/haveri/haveri/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: 'localhost',
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'vite:watch-package-data',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +22ms
vite v4.0.4 building for production...
✓ 66 modules transformed.
dist/index.html                  0.41 kB
dist/assets/index-dc0be11f.js  168.19 kB │ gzip: 55.90 k
```B

Thanks again in advance, any help is appreciated
omerfaran commented 1 year ago

@sapphi-red Yes it happens only with the combination of Nx + Vite, with Nx plus Webpack it's all working fine

sapphi-red commented 1 year ago

If it only happens with Nx, I guess this is related to Nx. I'll close this for now but if it turns out it's an issue of Vite, feel free to create a new issue.

joeyfigaro commented 1 year ago

For anyone stumbling into this issue, try clearing out node_modules and reinstalling. After doing that and starting everything back up the error went away. It looked like a caching issue–when I checked the response for my offending file the content was old and was indeed missing the listed exports. After reinstalling everything and starting it back up the response showed the correct contents with my latest changes.

omerfaran commented 1 year ago

@sapphi-red I found out that it actually happens not just with Nx, but by creating a new Vite app, I will still get this error from time to time. Obviously it means it's something with my environment, node version, maybe. Even though I tried jumping between versions, also tried on Edge, not just Chrome. I'm out of ideas

@joeyfigaro for me at least that didn't help, also just creating a new Vite app creates this error....

Jonathanpatta commented 1 year ago

I'm also getting the same error from importing firebase as well. Normal vite app is working fine, only occurs when trying to import firebase stuff. image

lucas-wendell commented 1 year ago

I have the same problem.

sapphi-red commented 1 year ago

I found out that it actually happens not just with Nx, but by creating a new Vite app, I will still get this error from time to time.

@omerfaran Would you upload that new project including node_modules to GitHub? Maybe I can find something.

LeTranAnhVu commented 1 year ago

In my case, after config these in tsconfig.json in the shared-lib 

    "module": "esnext",
    "target": "ESNext",
    "moduleResolution": "Node",

It works

github-actions[bot] commented 1 year ago

Hello @omerfaran. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

nedsalk commented 1 year ago

I've had a similar issue and stumbled upon this one while searching for a solution. Later on I managed to fix my issue by changing the import style. In the case of the issue OP posted, I suppose the fix for the problematic file would be changing

import styled from '@emotion/styled';

into

import * as styled from '@emotion/styled';.

way2ex commented 1 year ago

I have encounter this problem too when vite in node_modules update to v3.2.5. Back to v3.2.4 resolve my problem.

ar7casper commented 1 year ago

It seems like this issue is happening only on windows machines.

maxloo2 commented 1 year ago

@ar7casper Not really, I am running into this problem on my Ubuntu VM too.

Nx + Vite, just a random typescript interface that cannot be exported/ imported whatsoever, while the other enums and types from the same file have no problems at all. Same behavior as @omerfaran - nothing renders, no error during build time, The problem goes away when I remove the code that uses the imported interface and everything goes back to normal.

I am importing all my types and stuff from my Nodejs backend project to my React frontend project, but literally everything else works except this specific export.

Update: I am export an enum and an interface from the same file, importing them in my React project, and when I import both it doesnt work, if I remove only the enum it works with the interface alone being in used. But I am not sure if the problem is with typescript enum because the browser says that the missing export is of this interface that works instead of the enum that doesnt.

same problem mentioned here: https://github.com/nrwl/nx/issues/13704

I am not sure if everyone is having this problem due to typescript enums but I am pretty sure mine is, I solved my problem by moving my enums to the types/index.ts instead of having them in seperate files doing barrel export.