Vite + Tailwind + PostCSS Import - Internal server error

[scott-lc]

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

• Follow our Code of Conduct
• 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.
• 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.
• The provided reproduction is a minimal reproducible example of the bug.

[scott-lc]

Possibly similar issue #1600

[rzane]

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.

[jessedobbelaere]

Same here. Ran into the exact same error as described. Prevents me from using Tailwind v3. Using latest versions of everything:

• "postcss-import": "14.0.2",
• "tailwindcss": "3.0.7",
• "vite": "2.7.7",

[Niputi]

vite/packages/vite/src/node/server/pluginContainer.ts

Line 314 in eb08ec5

if (ctx._activeId && !err.id) err.id = ctx._activeId

ctx._activeId is the original css file
when err is a error, err.file is the correct reported file by postcss which path needs to be normalized

vite/packages/vite/src/node/server/pluginContainer.ts

Line 349 in 4a05a6e

// css preprocessors may report errors in an included file

this doesn't look to be true anymore

[mahnoork18]

How to fix this issue I have written tailwind CSS classes and followed all the instructions to run the command twice but still, it's not working? help please

[Niputi]

@mahnoork18 fix will be released in 2.8