Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite + Tailwind + PostCSS Import - Internal server error

See original GitHub issue

Describe the bug

Start w/ a default Vite (v2.6.14 + React) project. Add tailwindcss and the postcss/postcss-import plugin.

Use an @import statement in the main .css file. If there is an issue in the @imported CSS file, an exception will occur in the formatError function.

Run npm run dev and load the page. An exception will occur in:

[vite] Internal server error: Cannot read properties of undefined (reading 'length')
      at posToNumber (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:4081:27)
      at generateCodeFrame (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:4106:13)
      at formatError (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42239:42)
      at TransformContext.error (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42185:19)
      at Object.transform (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42399:25)
      at async doTransform (./node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:56801:29)

formatError is being called with:

error = {
  ...
  reason: `CssSyntaxError: ./src/styles.css:12:10: The `foobar` class does not exist.`,
  file: './src/styles.css',
  line: 12,
  column: 10
};

postition = undefined;

ctx = {
  ...
  _activeId: '/private/tmp/vite-issue/src/index.css',
  _activeCode: "@import './styles.css';\n"
}

Since ctx._activeId and ctx._activeCode don’t actually reference the location of the error (instead they reference the top-level CSS file that @imported the problematic CSS file), generateCodeFrame ends up crashing.

Reproduction

https://github.com/scott-lc/vite-issue-20211111

System Info

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 302.36 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.1 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2021.09.27.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 94.0.1
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-react: 1.0.8 => 1.0.8 
    vite: 2.6.14 => 2.6.14

Used Package Manager

npm

Logs

vite:config bundled config file loaded in 85.25ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  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:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  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:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   optimizeDeps: {
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/private/tmp/vite-issue-20211111/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: { fs: [Object] }
  vite:config   },
  vite:config   root: '/private/tmp/vite-issue-20211111',
  vite:config   base: '/',
  vite:config   publicDir: '/private/tmp/vite-issue-20211111/public',
  vite:config   cacheDir: '/private/tmp/vite-issue-20211111/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  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   },
  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     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +3ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /private/tmp/vite-issue-20211111/index.html +0ms
  vite:resolve 0.37ms /src/main.jsx -> /private/tmp/vite-issue-20211111/src/main.jsx +0ms
  vite:resolve 1.70ms react -> /private/tmp/vite-issue-20211111/node_modules/react/index.js +3ms
  vite:resolve 0.85ms react-dom -> /private/tmp/vite-issue-20211111/node_modules/react-dom/index.js +1ms
  vite:deps Scan completed in 26.96ms: {
  react: '/private/tmp/vite-issue-20211111/node_modules/react/index.js',
  'react-dom': '/private/tmp/vite-issue-20211111/node_modules/react-dom/index.js'
} +12ms
  vite:resolve 0.40ms react/jsx-dev-runtime -> /private/tmp/vite-issue-20211111/node_modules/react/jsx-dev-runtime.js +0ms
Pre-bundling dependencies:
  react
  react-dom
  react/jsx-dev-runtime
(this will be run only when your dependencies or config have changed)
  vite:resolve 0.12ms react -> /private/tmp/vite-issue-20211111/node_modules/react/index.js +0ms
  vite:resolve 0.94ms object-assign -> /private/tmp/vite-issue-20211111/node_modules/object-assign/index.js +1ms
  vite:resolve 0.56ms scheduler -> /private/tmp/vite-issue-20211111/node_modules/scheduler/index.js +29ms
  vite:resolve 0.99ms scheduler/tracing -> /private/tmp/vite-issue-20211111/node_modules/scheduler/tracing.js +1ms
  vite:deps deps bundled in 75.90ms +0ms
Port 3000 is in use, trying another one...

  vite v2.6.14 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose

  ready in 309ms.

  vite:time 0.71ms / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 18.62ms /index.html +34ms
  vite:resolve 1.00ms /@vite/client -> /private/tmp/vite-issue-20211111/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 0.24ms /src/main.jsx -> /private/tmp/vite-issue-20211111/src/main.jsx +3ms
  vite:load 0.02ms [plugin] /@react-refresh +0ms
  vite:import-analysis 2.39ms [no imports] /@react-refresh +0ms
  vite:transform 5.14ms /@react-refresh +0ms
  vite:time 6.03ms /@react-refresh +41ms
  vite:load 9.46ms [fs] /@vite/client +6ms
  vite:resolve 0.68ms @vite/env -> /private/tmp/vite-issue-20211111/node_modules/vite/dist/client/env.mjs +13ms
  vite:resolve 0.18ms /node_modules/vite/dist/client/env.mjs -> /private/tmp/vite-issue-20211111/node_modules/vite/dist/client/env.mjs +0ms
  vite:import-analysis 3.95ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +8ms
  vite:transform 4.95ms /@vite/client +7ms
  vite:time 19.51ms /@vite/client +8ms
  vite:load 15.24ms [fs] /src/main.jsx +9ms
  vite:transform [reuse pending] for /node_modules/vite/dist/client/env.mjs +137ms
  vite:resolve 0.06ms react -> /private/tmp/vite-issue-20211111/node_modules/.vite/react.js?v=9d9b4eb8&es-interop +139ms
  vite:resolve 0.18ms /node_modules/.vite/react.js?v=9d9b4eb8&es-interop -> /private/tmp/vite-issue-20211111/node_modules/.vite/react.js?v=9d9b4eb8&es-interop +0ms
  vite:resolve 0.04ms react-dom -> /private/tmp/vite-issue-20211111/node_modules/.vite/react-dom.js?v=9d9b4eb8&es-interop +4ms
  vite:resolve 0.24ms /node_modules/.vite/react-dom.js?v=9d9b4eb8&es-interop -> /private/tmp/vite-issue-20211111/node_modules/.vite/react-dom.js?v=9d9b4eb8&es-interop +0ms
  vite:resolve 0.20ms ./index.css -> /private/tmp/vite-issue-20211111/src/index.css +1ms
  vite:resolve 0.13ms /src/index.css -> /private/tmp/vite-issue-20211111/src/index.css +0ms
  vite:resolve 0.03ms react/jsx-dev-runtime -> /private/tmp/vite-issue-20211111/node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8&es-interop +0ms
  vite:resolve 0.13ms /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8&es-interop -> /private/tmp/vite-issue-20211111/node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8&es-interop +0ms
  vite:resolve 0.14ms /node_modules/.vite/react.js?v=9d9b4eb8 -> /private/tmp/vite-issue-20211111/node_modules/.vite/react.js?v=9d9b4eb8 +1ms
  vite:resolve 0.13ms /node_modules/.vite/react-dom.js?v=9d9b4eb8 -> /private/tmp/vite-issue-20211111/node_modules/.vite/react-dom.js?v=9d9b4eb8 +0ms
  vite:resolve 0.12ms /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 -> /private/tmp/vite-issue-20211111/node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +1ms
  vite:import-analysis 7.04ms [4 imports rewritten] src/main.jsx +145ms
  vite:transform 145.09ms /src/main.jsx +10ms
  vite:load 147.04ms [fs] /node_modules/vite/dist/client/env.mjs +146ms
  vite:import-analysis 0.02ms [no imports] node_modules/vite/dist/client/env.mjs +4ms
  vite:transform 0.16ms /node_modules/vite/dist/client/env.mjs +2ms
  vite:time 11.95ms /node_modules/vite/dist/client/env.mjs +148ms
  vite:load 1.47ms [fs] /node_modules/.vite/react.js?v=9d9b4eb8 +2ms
  vite:resolve 0.16ms ./chunk-NFTZ4EPM.js -> /private/tmp/vite-issue-20211111/node_modules/.vite/chunk-NFTZ4EPM.js +5ms
  vite:resolve 0.15ms /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 -> /private/tmp/vite-issue-20211111/node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +1ms
  vite:import-analysis 0.88ms [1 imports rewritten] node_modules/.vite/react.js?v=9d9b4eb8 +2ms
  vite:transform 1.41ms /node_modules/.vite/react.js?v=9d9b4eb8 +2ms
  vite:load 3.72ms [fs] /src/index.css +2ms
  vite:load 5.57ms [fs] /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +2ms
  vite:import-analysis 1.27ms [1 imports rewritten] node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +5ms
  vite:transform [reuse pending] for /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +5ms
  vite:transform 1.60ms /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +0ms
  vite:time 171.09ms /src/main.jsx +8ms
  vite:load 9.68ms [fs] /node_modules/.vite/react-dom.js?v=9d9b4eb8 +4ms
  vite:import-analysis 15.03ms [1 imports rewritten] node_modules/.vite/react-dom.js?v=9d9b4eb8 +34ms
  vite:transform [reuse pending] for /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +34ms
  vite:transform 15.55ms /node_modules/.vite/react-dom.js?v=9d9b4eb8 +0ms
  vite:load 44.94ms [fs] /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +38ms
  vite:import-analysis 0.48ms [no imports] node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +9ms
  vite:transform 0.79ms /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +9ms
  vite:cache [memory] /node_modules/.vite/react.js?v=9d9b4eb8 +0ms
  vite:time 0.75ms /node_modules/.vite/react.js?v=9d9b4eb8 +43ms
  vite:cache [memory] /node_modules/.vite/react-dom.js?v=9d9b4eb8 +1ms
  vite:time 17.32ms /node_modules/.vite/react-dom.js?v=9d9b4eb8 +18ms
  vite:transform [reuse pending] for /src/index.css +36ms
  vite:cache [memory] /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +35ms
  vite:time 1.61ms /node_modules/.vite/chunk-NFTZ4EPM.js?v=9d9b4eb8 +19ms
  vite:cache [memory] /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +3ms
  vite:time 1.44ms /node_modules/.vite/react_jsx-dev-runtime.js?v=9d9b4eb8 +2ms
  vite:resolve 0.15ms ./styles.css -> /private/tmp/vite-issue-20211111/src/styles.css +0ms
3:01:08 PM [vite] Internal server error: Cannot read properties of undefined (reading 'length')
      at posToNumber (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:4081:27)
      at generateCodeFrame (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:4106:13)
      at formatError (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42239:42)
      at TransformContext.error (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42185:19)
      at Object.transform (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42399:25)
      at async doTransform (/private/tmp/vite-issue-20211111/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:56801:29)
  vite:time 2180.12ms /src/index.css +2s

Validations

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
rzanecommented, Dec 17, 2021

I’ve also been experiencing this issue. It can be quite frustrating because it makes it impossible to errors deriving from failed PostCSS compilation.

As a workaround, I’m using patch-package to patch posToNumber. My patch wraps this line in if (lines[i]). This is enough for me to see the error message, so I’m able to continue working, but I am certain that there must be a better solution.

0reactions
Niputicommented, Jan 3, 2022

@mahnoork18 fix will be released in 2.8

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sanity.io [vite] Internal server error: [postcss] Cannot read ...
I ended up creating a tailwind.config.js file in the sanity folder with the following information. It fixed it.
Read more >
[vite] Internal server error: Cannot read properties of undefined ...
Problem: You've just installed TailwindCSS but you get the error below as well as some indication that it might related to the PostCSS...
Read more >
Features | Vite
The above will throw an error in the browser. Vite will detect such bare module imports in all served source files and perform...
Read more >
Error in running "npm run dev" - Laracasts
Running "npm run dev " gives the following error. Can someone help me solve this? laravel-mix: github:JeffreyWay/laravel-mix#master; tailwind-css: ^2.0.4.
Read more >
Install Tailwind CSS with Vite
Setting up Tailwind CSS in a Vite project. ... Terminal. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Problem with Vite and CommonJS package in monorepo

Next page

@vitejs/plugin-react - Wrong JSX runtime used in linked dependency