Nuxt 3 Uncaught ReferenceError: require is not define - nuxtjs3

Nuxt3 project
npm run build
npm run start
Nuxi 3.0.0 15:16:13
ℹ Node.js version: 14.21.2 15:16:13
ℹ Preset: node-server 15:16:13
ℹ Working dir: .output 15:16:13
ℹ Loading .env. This will not be loaded when running the server in production. 15:16:13
ℹ Starting preview command: node ./server/index.mjs 15:16:13
15:16:13
Listening http://[::]:3000
http://localhost:3000/
then got error in browser
entry.042ab8e0.js:19 Uncaught ReferenceError: require is not defined
at entry.042ab8e0.js:19:3018
upgrade my node 14 to 18 then still got the same error

Short answer: ordered-uuid library is designed to be used by a "traditional" Node backend and not for frontend.
Longer answer: require is something coming from CommonJS, which is what NodeJs uses. It was used as a way to dynamically import modules. However since the introduction to JavaScript Modules in ES6 (aka JS 2015 aka ECMAScript 2015, aka ECMAScript 6) import and export are the new standard of doing things. Also Nuxt follows ES
require is not recognised by ES6 and thus the reason why you get this error. Since ordered-uuid hasn't been updated in the last 6 years. I suggest you to find something that suits your needs more. For example: https://github.com/danielboven/ordered-uuid-v4
npm install ordered-uuid-v4
This library has both a CommonJS compatible approach as well as a ES6 compatible approach.
Nuxt actually has a nice page explainting everything about CommonJS, ES Modules in depth: take a look here.

Related

Cloud Firestore build error with preact-cli

I'm trying to use Firebase's Cloud Firestore from a preact-cli generated project but have been caught at the first hurdle. I chose Firebase's v9 SDK, that's in beta, to get ahead of the curve (but maybe that was a mistake). When building, there's an error from a Firebase SDK file but I'm not sure if it's caused by the SDK itself, babel, webpack, preact-cli or a combination. I also don't know how to go about diagnosing it, since I'm new to these tools.
Steps below, any ideas what the cause of this error might be?
npx preact-cli create typescript webapp
npm install --save firebase#9.0.0-beta.1
Then in src/components/app.tsx, make use of the Firestore SDK by adding
import { getFirestore } from "firebase/firestore";
getFirestore();
But the build fails.
$ npm run build
> webapp#0.0.0 build
> preact build
Build [== ] 12% (1.3s) building(13200:6) switch-case fall-through not supported - added break. See https://github.com/MatAtBread/nodent#differences-from-the-es7-specification
[BABEL] Note: The code generator has deoptimised the styling of ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js as it exceeds the max of 500KB.
✖ ERROR ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js 5055:431
Module parse failed: Unsyntactic break (5055:431)
File was processed with these loaders:
* ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
(Source code omitted for this binary file)
# ../node_modules/firebase/firestore/dist/index.esm.js 1:0-36 1:0-36
# ./components/app.tsx
# ./index.ts

Angular ERROR: PostCSS received undefined instead of CSS string

Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.

How to integrate Google Cloud Text-to-Speech with Meteor

I'm trying to use Google Cloud Text-to-Speech API in Meteor app, but get an error on the Meteor console and crash when trying to use the import function described in the instructions:
("Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf (<anonymous>)")
Here's what I've done (in app directory) before starting meteor:
meteor npm install google-tts-api
export GOOGLE_APPLICATION_CREDENTIALS="/data/authenticationinfo.json"
The problems are related to the inclusion of this line at the top of my js file:
import textToSpeech from '#google-cloud/text-to-speech';
This line cause the following Meteor startup error on the console:
"Unable to resolve some modules: "http2" in /app/node_modules/#grpc/grpc-js/build/src/channel.js (web.browser)
If you notice problems related to these missing modules, consider running:
meteor npm install --save meteor-node-stubs
Actually, I ran the above command, but it has no effect. When I run start the app, it crashes quickly with the error :
Uncaught TypeError: Cannot convert undefined or null to object
at Function.getPrototypeOf ()
at module.exports (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:91277)
at index.js (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:86991)
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
at jwtclient.js (modules.js?hash=59a3378abff937a73bf3a9865d654fce71b9583a:79821)
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
I have tested it on a barebones node app, and my Google authentication json file works fine, so that's definitely not the problem.
I realize there are are some Meteor packages for Google TTS, but they're really old and use Google Translate (which won't work for long) instead of the new cloud services.
So, it turns out the import has to happen on the server side, NOT the client side.

Meteor app can't find routes

New to meteor. Just cloned a git repo, and upon launching the app, I get a router.js:347 There is no route for the path: / error.
This is my route for root in imports/startup/client/routes.js
FlowRouter.route('/', {
name: 'Home',
action() {
BlazeLayout.render('app_body', {tabs: 'tabs', inbox: 'inbox', upload: 'upload', invite: 'invite'});
console.log('root loaded');
},
});
Here is the list of packages
accounts-facebook 1.0.10 Login service for Facebook accounts
accounts-password 1.2.14* Password support for accounts
alanning:roles 1.2.15 Authorization package for Meteor
aldeed:collection2 2.9.1 Automatic validation of insert and update operations on the client and server.
aldeed:simple-schema 1.5.3 A simple schema validation object with reactivity. Used by collection2 and autoform.
arillo:flow-router-helpers 0.5.2 Template helpers for flow-router
blaze-html-templates 1.0.4 Compile HTML templates into reactive UI with Meteor Blaze
check 1.2.3 Check whether a value matches a pattern
dburles:collection-helpers 1.0.4 Transform your collections with helpers that you define
ecmascript 0.5.7* Compiler plugin that supports ES2015+ in all .js files
email 1.1.16* Send email messages
es5-shim 4.6.13* Shims and polyfills to improve ECMAScript 5 support
hpx7:youtube-iframe-player 0.4.15 Control YouTube's embedded player using Meteor
http 1.2.8* Make HTTP calls to remote servers
jazeee:spiderable-longer-timeout 1.2.13 Extended spiderable package: SSL, caching, longer timeout, no stdin issues, publish flag
jchristman:tagsinput-autocomplete-edited 1.1.0+ A combination of the mizzao:autocomplete library and a tagsinput-like functionality
jquery 1.11.9 Manipulate the DOM using CSS selectors
kadira:blaze-layout 2.3.0 Layout Manager for Blaze (works well with FlowRouter)
kadira:flow-router 2.12.1 Carefully Designed Client Side Router for Meteor
keepnox:perfect-scrollbar 0.6.8 Perfect-scrollbar packaged for meteor
manuel:reactivearray 1.0.5 Reactive Array for Meteor
matb33:collection-hooks 0.8.3* Extends Mongo.Collection with before/after hooks for insert/update/remove/find/findOne
meteor-base 1.0.4 Packages that every Meteor app needs
meteorhacks:aggregate 1.3.0 Proper MongoDB aggregations support for Meteor
mobile-experience 1.0.4 Packages for a great mobile user experience
momentjs:moment 2.14.4 Moment.js (official): parse, validate, manipulate, and display dates - official Meteor packaging
mongo 1.1.10* Adaptor for using MongoDB and Minimongo over DDP
reactive-dict 1.1.8 Reactive dictionary
reactive-var 1.0.10 Reactive variable
sacha:spin 2.3.1 Simple spinner package for Meteor
saucecode:timezoned-synced-cron 1.2.11 Fork of original w/ timezone support. Define and run scheduled jobs across multiple servers.
session 1.1.6 Session variable
spiderable 1.0.13 Makes the application crawlable to web spiders
standard-minifier-css 1.1.8* Standard css minifier used with Meteor apps by default.
standard-minifier-js 1.1.8* Standard javascript minifiers used with Meteor apps by default.
tomwasd:flow-router-seo 0.0.3 A simple way to set the title and meta tags for sites using flow router
tracker 1.1.0 Dependency tracker to allow reactive callbacks
twbs:bootstrap 3.3.6 The most popular front-end framework for developing responsive, mobile first projects on the web.
What is it that is causing the app not to find the routes file? I have looked through the following posts for some guidance, but have found none.
Meteor Routing Error : There is no route for the path: /
https://github.com/kadirahq/flow-router/issues/608
https://github.com/kadirahq/flow-router/issues/185
http://coderchronicles.org/2016/04/08/getting-started-with-meteor-1-3-react-and-flowrouter/
Any help solving the problem would be appreciated. I feel like I'm missing something simple.
-S
**project file structure
imports/
startup/
client/
index.js
routes.js
server/
fixtures.js
index.js
api/
server/
publications.js
ui/
components/
layouts/
pages/
client/
main.js
head.js
main.js
server/
main.js
fixtures.js
server-global.js
Are you importing the routes file into your app's main container?
For example, if you have a /client/main.js file that gets loaded from client side at startup, then it should include the import reference to routes file as follows:
import '/imports/startup/client';
Or, import '/imports/startup/client/routes.js';
Put your route file in 'imports/starup/lib' (lib - for example). In fast-render package recommended use 'lib', if you wanna use it. If no - 'client';
Then make sure you imported your route file in 'root/client/main.js';
Please, read this part of docs: https://guide.meteor.com/structure.html#javascript-structure
It is very helpful article.
UPD:
Please, remove duplicate files in your client/main.js
When, in client/main.js
import '/imports/startup/client';
In your imports/startup/client/index.js
import './routes.js';
And now it will work.
Dont forget, you must import all views you wanna use in your route.
Problem fixed. Instead of launching with meteor run, need to launch with meteor --settings settings.json --production

Updating to Meteor 0.9.1 woes (broke the app big time)

I’ve had some serious problems after updating meteor to 0.9.1.
Here are some example errors from the console.
Uncaught TypeError: undefined is not a function -- in dynamic_template.js
Uncaught TypeError: Cannot read property ‘prototype’ of undefined -- in helpers.js
Uncaught TypeError: undefined is not a function -- in router.js
Uncaught TypeError: Cannot read property ‘RouteController’ of undefined -- in iron-router-progress.js
Uncaught TypeError: Cannot read property ‘RouteController’ of undefined -- in global-imports.js
And dozens of: Uncaught ReferenceError: Template is not defined -- in client view js files, both the hard copies that I have created and the apparently ephemeral files that meteor apparently creates on the fly.
And fewer dozens of: Uncaught ReferenceError: Meteor is not defined -- in the same kind of files.
And one: Uncaught ReferenceError: Spacebars is not defined -- in login_buttons_dialogs.html
And about 10 sockjs errors on GET — net:ERR_CONNECTION_REFUSED
I can’t help thinking that either something very basic was not accomplished during the update procedure or there are some very basic and widespread changes that need to be made in my code in order for it to run 0.9.1.
I’m building a app that is an extension and morph of the microscope app. It's not rocket science at this point. It was working last night before the update. It was 0.9.0.1 before the update.
All help and insight is appreciated.
Thanks for the guidance. All seems to be well now. This is what I did:
I created a new meteor app, removed 2 default packages, then added:
bootstrap
iron:router
mrt:accounts-ui-bootstrap-dropdown
accounts-password
mrt:iron-router-progress
sacha:spin
Then I copied my files from the broken app to the new app and viola', everything worked.
I see that the directory structure and its naming conventions have changed, colons in place of dashes in a few spaces and the direcory or namespace prefixes such as mrt, iron, and sacha.
Here's an unexpected thing. I previously had a folder called packages in which there was a folder for each package containing all its files. Now that folder is empty, but everything is still working. I'm clearly under informed about a few things.
Again, thanks for the guidance. Even though this was a pain, I see that the resulting changes needed to happen.
Best, Alex
Many packages are breaking on Meteor#0.9.1, I suggest you create a new Meteor app like so:
$ meteor create --release 0.9.0 app
$ cd app
$ meteor remove insecure
$ meteor remove autopublish
and then add all the packages you need with meteor add packagename and copy over all the files from your app.
Stick with Meteor#0.9.0 until you know you can safely upgrade!

Resources