Error while running example vue app with --production or build

[WayneUong]

Steps:

1. Create an example app with meteor create --vue nfc-vue3
2. Run with meteor --production or build with meteor build --architecture=os.linux.x86_64 --server-only ./bundle
3. Error:

WARNING: The output directory is under your source tree.
         Your generated files may get interpreted as source code!
         Consider building into a different directory instead
         meteor build ../output
                                              
⚡️ Building packages to make them available to export analyzer...
⚡️ Packages built (24047.86ms)
⚡️ Building with Vite...
vite v3.2.5 building for production...
transforming...
✓ 33 modules transformed.
rendering chunks...
node_modules/.vite-meteor/dist/meteor-entry.js   0.02 KiB / gzip: 0.04 KiB
node_modules/.vite-meteor/dist/About.js          0.59 KiB / gzip: 0.33 KiB
node_modules/.vite-meteor/dist/main.js           285.62 KiB / gzip: 67.41 KiB

⚡️ Build successful (1835.6ms)
Errors prevented bundling:                    
While minifying app code:                     
packages/minifyStdJS/plugin/minify-js.js:49:25: terser minification error (SyntaxError:"Import" statement may only appear at the top level)
Source file: client/main.js  (2:0)
Line content: import "./vite/meteor-entry.js"

at maybeThrowMinifyErrorBySourceFile (packages/minifyStdJS/plugin/minify-js.js:49:25)
at packages/minifyStdJS/plugin/minify-js.js:77:11
at Array.forEach (<anonymous>)
at MeteorMinifier.processFilesForBundle (packages/minifyStdJS/plugin/minify-js.js:66:11)


While minifying app stylesheet:
app/client/main.css: While loading postcss config: Must use import to load ES Module: /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js
require() of ES modules is not supported.
require() of /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js from /Users/wayneuong/Downloads/nfc-vue3/node_modules/lilconfig/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json
contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/wayneuong/Downloads/nfc-vue3/package.json.


While minifying app code:
packages/minifyStdJS/plugin/minify-js.js:49:25: terser minification error (SyntaxError:"Import" statement may only appear at the top level)
Source file: client/main.js  (2:0)
Line content: import "./vite/meteor-entry.js"

at maybeThrowMinifyErrorBySourceFile (packages/minifyStdJS/plugin/minify-js.js:49:25)
at packages/minifyStdJS/plugin/minify-js.js:77:11
at Array.forEach (<anonymous>)
at MeteorMinifier.processFilesForBundle (packages/minifyStdJS/plugin/minify-js.js:66:11)


While minifying app stylesheet:
app/client/main.css: While loading postcss config: Must use import to load ES Module: /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js
require() of ES modules is not supported.
require() of /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js from /Users/wayneuong/Downloads/nfc-vue3/node_modules/lilconfig/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json
contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/wayneuong/Downloads/nfc-vue3/package.json.

[WayneUong]

Update: according to this forum post not using dynamic import of components solved one of the issues. However, these errors remain:

Warning: The --production flag should only be used to simulate production bundling for testing purposes. Use
meteor build to create a bundle for production deployment. See: https://guide.meteor.com/deployment.html
[[[[[ ~/Downloads/nfc-vue3 ]]]]]              

=> Started proxy.                             
=> Started HMR server.                        
⚡️ Building packages to make them available to export analyzer...
⚡️ Packages built (23707.55ms)
⚡️ Building with Vite...
vite v3.2.5 building for production...
transforming...
✓ 33 modules transformed.
rendering chunks...
node_modules/.vite-meteor/dist/meteor-entry.js   295.17 KiB / gzip: 69.45 KiB

⚡️ Build successful (2016.09ms)
=> Started MongoDB.                           
=> Errors prevented startup:                  
   
   While minifying app stylesheet:
   app/client/main.css: While loading postcss config: Must use import to load ES Module:
   /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js
   require() of ES modules is not supported.
   require() of /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js from
   /Users/wayneuong/Downloads/nfc-vue3/node_modules/lilconfig/dist/index.js is an ES module file as it is a
   .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that
   package scope as ES modules.
   Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove
   "type": "module" from /Users/wayneuong/Downloads/nfc-vue3/package.json.
   
   
   While minifying app stylesheet:
   app/client/main.css: While loading postcss config: Must use import to load ES Module:
   /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js
   require() of ES modules is not supported.
   require() of /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js from
   /Users/wayneuong/Downloads/nfc-vue3/node_modules/lilconfig/dist/index.js is an ES module file as it is a
   .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that
   package scope as ES modules.
   Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove
   "type": "module" from /Users/wayneuong/Downloads/nfc-vue3/package.json.
   
   
=> Your application has errors. Waiting for file change.
=> Modified -- restarting.                    
=> Errors prevented startup:                  
   
   While minifying app stylesheet:
   app/client/main.css: While loading postcss config: Must use import to load ES Module:
   /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js
   require() of ES modules is not supported.
   require() of /Users/wayneuong/Downloads/nfc-vue3/postcss.config.js from
   /Users/wayneuong/Downloads/nfc-vue3/node_modules/lilconfig/dist/index.js is an ES module file as it is a
   .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that
   package scope as ES modules.
   Instead rename postcss.config.js to end in .cjs, change the requiring code to use import(), or remove
   "type": "module" from /Users/wayneuong/Downloads/nfc-vue3/package.json.
   
   
=> Your application has errors. Waiting for file change.

[MomenYasser]

Guys I’m facing the same problems in production and I’m totally blocked! Any help please?

[JorgenVatle]

Just re-opening this one for the moment as we haven't quite yet gotten the latest changes into the official package.