VuePress build failing (locally or on Netlify)

ErickPetru commented 3 years ago

We started working on our Brazilian Portuguese translation inside our fork and wanted to share the current progress with our collaborators deploying the previews on Netlify:

Build command: yarn build
Publish directory: src/.vuepress/dist

Unfortunately, the deploy stops with the error Error: [BABEL] /opt/build/repo/node_modules/@vuepress/core/lib/client/clientEntry.js: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'. The full log is here: https://app.netlify.com/sites/vuejsbr-docs-next/deploys/5f62a16ee28b45000723bad7.

Fearing that we crashed something inside the fork I cloned this repository from scratch in my machine and tried to run locally without any changes. But the same error appeared here.

Then I tried to clean things deleting yarn.lock and running a new yarn install. After that, I tried a yarn build locally, which gave me another error: TypeError: Class constructor Parser cannot be invoked without 'new'.

So I was not able to build for deploy even locally and have not found a solution. Is it a known problem?

bencodezen commented 3 years ago

@ErickPetru Strange. What version of Node and yarn are you on?

ErickPetru commented 3 years ago

Yes @bencodezen, absolutely strange!

In my machine (Windows 10 x64 19041.508) it's Node 14.8.0 and Yarn 1.22.4. I also just tried to test here with NPM 6.14.7, deleting node_modules and trying a fresh install with npm i and then npm run build, but the problem persists.

Here's the complete error stack:

(undefined) ./node_modules/@vuepress/core/lib/client/clientEntry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\client\clientEntry.js: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
Require stack:
- D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js
- D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\@vue\babel-preset-app\index.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\config\files\plugins.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\config\files\index.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\babel-loader\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\loader-runner\lib\loadLoader.js
- D:\projects\vuejs\docs-next\node_modules\loader-runner\lib\LoaderRunner.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\NormalModule.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\NormalModuleFactory.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\webpack.js
- D:\projects\vuejs\docs-next\node_modules\webpack-dev-server\lib\Server.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\node\dev\index.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\node\App.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\vuepress\lib\registerCoreCommands.js
- D:\projects\vuejs\docs-next\node_modules\vuepress\cli.js (While processing: "D:\\Projetos\\vuejs-br\\docs-next\\node_modules\\@vue\\babel-preset-app\\index.js")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
    at Function.Module._load (internal/modules/cjs/loader.js:923:27)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js:10:55)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\index.js:29:44)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
 @ multi ./node_modules/@vuepress/core/lib/client/clientEntry.js app[0]
(undefined) ./node_modules/@vuepress/core/lib/client/serverEntry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\client\serverEntry.js: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
Require stack:
- D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js
- D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\@vue\babel-preset-app\index.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\config\files\plugins.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\config\files\index.js
- D:\projects\vuejs\docs-next\node_modules\@babel\core\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\babel-loader\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\loader-runner\lib\loadLoader.js
- D:\projects\vuejs\docs-next\node_modules\loader-runner\lib\LoaderRunner.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\NormalModule.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\NormalModuleFactory.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js
- D:\projects\vuejs\docs-next\node_modules\webpack\lib\webpack.js
- D:\projects\vuejs\docs-next\node_modules\webpack-dev-server\lib\Server.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\node\dev\index.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\node\App.js
- D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\index.js
- D:\projects\vuejs\docs-next\node_modules\vuepress\lib\registerCoreCommands.js
- D:\projects\vuejs\docs-next\node_modules\vuepress\cli.js (While processing: "D:\\Projetos\\vuejs-br\\docs-next\\node_modules\\@vue\\babel-preset-app\\index.js")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
    at Function.Module._load (internal/modules/cjs/loader.js:923:27)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\polyfills\corejs3\usage-plugin.js:10:55)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (D:\projects\vuejs\docs-next\node_modules\@babel\preset-env\lib\index.js:29:44)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
 @ multi ./node_modules/@vuepress/core/lib/client/serverEntry.js app[0]
Error: Failed to compile with errors.
    at D:\projects\vuejs\docs-next\node_modules\@vuepress\core\lib\node\build\index.js:180:16
    at finalCallback (D:\projects\vuejs\docs-next\node_modules\webpack\lib\MultiCompiler.js:254:12)
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\MultiCompiler.js:277:6
    at done (D:\projects\vuejs\docs-next\node_modules\neo-async\async.js:2931:13)
    at runCompilers (D:\projects\vuejs\docs-next\node_modules\webpack\lib\MultiCompiler.js:181:48)
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\MultiCompiler.js:188:7
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\MultiCompiler.js:270:7
    at finalCallback (D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js:257:39)
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\projects\vuejs\docs-next\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (D:\projects\vuejs\docs-next\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js:271:21)
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\projects\vuejs\docs-next\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\projects\vuejs\docs-next\node_modules\tapable\lib\Hook.js:154:20)
    at D:\projects\vuejs\docs-next\node_modules\webpack\lib\Compiler.js:678:31

The worst part is that the problem isn't only in my environment, as the Netlify build can't finish too. There the container is running on Node 12.18.0 and Yarn 1.22.4.

Alex-Sokolov commented 3 years ago

Try remove yarn.lock and run yarn again to regenerate it. This will fix

ErickPetru commented 3 years ago

Hi @Alex-Sokolov, thanks for the help.

I already had tried the yarn.lock delete without success. But I tried again deleting everything first, then cloned vuejs/docs-next again, deleted yarn.lock, run yarn and yarn build. Finally it worked in my machine. Half the problem is solved!

So, how could I make it working when deploying? Should I force delete yarn.lock on our vuejs-br/docs-next fork first, before sending it to Netlify?

ErickPetru commented 3 years ago

Hi again @Alex-Sokolov and @bencodezen. I sent an update to Netlify deleting the yarn.lock but our deploy wasn't successful still. Maybe we need more configs to use Yarn on Netlify that I'm not sure about. Anyway, I was able to get it working with npm run build so problem solved without Yarn for now.

Furthermore, since other communities collaborators will fork this repo and start working on their own machines, shouldn't the yarn.lock be deleted here in the main repo to avoid this confusion to repeat?

ErickPetru commented 3 years ago

Okay, continuing the saga ... Basically, you can disregard the previous message.

Although the first deploy after deleting yarn.lock was successful on Netlify, new automatic deploys and deploy previews are failing, every time, with the same error Cannot find module '@babel/compat-data/corejs3-shipped-proposals'. Here's the full log of one of those deploys: https://app.netlify.com/sites/vuejsbr-docs-next/deploys/5f63c10160ac3646e3a5ea0d.

So, continuous integration is inviable with this build error happening.

AjaiKN commented 3 years ago

For me, it works locally with Node 13, but not with Node 14 or Node 12.

My best guess about why it doesn't work in Node 14 was that node-sass 4.13 doesn't support Node 14, but that doesn't explain why it fails in Node 12.

https://github.com/vuejs/docs-next/blob/f6430c07272db705f61d39c584e3307697a3d931/yarn.lock#L5398-L5399

bencodezen commented 3 years ago

Okay, continuing the saga ... Basically, you can disregard the previous message.

Although the first deploy after deleting yarn.lock was successful on Netlify, new automatic deploys and deploy previews are failing, every time, with the same error Cannot find module '@babel/compat-data/corejs3-shipped-proposals'. Here's the full log of one of those deploys: app.netlify.com/sites/vuejsbr-docs-next/deploys/5f63c10160ac3646e3a5ea0d.

So, continuous integration is inviable with this build error happening.

So it looks like this may be Node problem. Gonna have to look into this further on VuePress itself. But if you provide an NODE_VERSION environment variable to Netlify for 10.22 it should be okay for now. I believe that's what we're on.

ErickPetru commented 3 years ago

Hi @bencodezen, really thank you! After sticking NODE_VERSION on 10.22, four subsequent deploys was successful.

atmosuwiryo commented 3 years ago

I'm on node v12.18.4, fixed this by add "@babel/compat-data": "^7.9.0"

Based on this

vuejs / docs

VuePress build failing (locally or on Netlify) #488