Search code examples
node.jsvue.jstailwind-cssvue-cli

Building App with npm - Unhandled rejection Error: No element indexed by 9

I'm working on a vue app using tailwind, postcss and other packages.

When I do npm run serve the command vue-cli-service serve is called and it works without any problems.

When I do 'npm run build' the commadn vue-cli-service build is called and error "Building for production...Unhandled rejection Error: No element indexed by 9" occurs. After that the building process seems to run into a loop.

Building for production...tailwindcss: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

\  Building for production...Unhandled rejection Error: No element indexed by 9
    at ArraySet_at [as at] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\array-set.js:109:9)
    at BasicSourceMapConsumer.<anonymous> (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-map-consumer.js:155:58)
    at Array.map (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-map-consumer.js:146:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-node.js:86:24)
    at SourceMapSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\SourceMapSource.js:32:25)
    at ReplaceSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ReplaceSource.js:82:27)
    at CachedSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\CachedSource.js:18:24)
    at ReplaceSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ReplaceSource.js:82:27)
    at C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\SourceAndMapMixin.js:29:18)
    at CachedSource.sourceAndMap (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\CachedSource.js:58:31)
    at getTaskForFile (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack\lib\SourceMapDevToolPlugin.js:65:30)
    at C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack\lib\SourceMapDevToolPlugin.js:215:20

\  Building for production...

I had to do compatibility build of postcss like here: https://v2.tailwindcss.com/docs/installation#post-css-7-compatibility-build

Could anybody provide some help or guidance how to resolve errors like this?

I already tried to delete node_modules and do npm install again.

Thanks!

Solution

  • I solved the issue by removing "@tailwindcss/forms": "^0.5.2"" from the dependencies.

    After that I removed folder node_modules again. Then I did npm i an I recognized some warnings from npm. I fixed the waraings with npm audit fix. To fixe the issues which are not fixable with with this command I had to run npm audit fix --force.