search

jthegedus / firebase-functions-next-example

Host a Next.js SSR React app on Cloud Functions for Firebase with Firebase Hosting
https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2
Other
222 stars 24 forks source link

Cannot find module 'babel-runtime/regenerator' #20

Closed pierrederuel closed 4 years ago

pierrederuel commented 6 years ago

Hi,

First I would like to thank you for this great contribution!

I used your project as a base to integrate a template which uses next and react and I got an error Cannot find module 'babel-runtime/regenerator', when the project has been deployed on firebase.

Your base project works fine on firebase, but the problem seems to be related to next/react. Here is my deps part of package.json, could you take a look ?

"dependencies": { "antd": "^3.0.3", "antd-local-icon": "^0.1.3", "auth0-lock": "^11.7.2", "babel-plugin-inline-import": "^3.0.0", "card-react": "^1.2.7", "chart.js": "^2.7.2", "clone": "^2.1.1", "cookie-parser": "^1.4.3", "coolors-to-hex": "^1.0.3", "firebase-admin": "^5.12.1", "firebase-functions": "^1.0.4", "frappe-charts": "^1.1.0", "google-maps-react": "^2.0.2", "immutable": "^3.8.2", "inline-import": "^1.0.0", "isomorphic-fetch": "^2.2.1", "js-cookie": "^2.2.0", "js-info-bubble": "git+https://github.com/RedQ/js-info-bubble.git", "js-rich-marker": "^1.1.2", "jwt-decode": "^2.2.0", "leaflet": "^1.3.1", "leaflet-routing-machine": "^3.2.8", "leaflet.markercluster": "^1.3.0", "lru-cache": "^4.1.3", "next": "^6.0.3", "next-redux-saga": "^3.0.0-beta.1", "next-redux-wrapper": "^2.0.0-beta.6", "nprogress": "^0.2.0", "prop-types": "^15.6.1", "react": "^16.4.0", "react-addons-shallow-compare": "^15.6.2", "react-big-calendar": "^0.19.1", "react-chartjs-2": "^2.7.2", "react-cookie": "^2.2.0", "react-custom-scrollbars": "^4.2.1", "react-dates": "^16.7.0", "react-dnd": "^4.0.5", "react-dnd-html5-backend": "^4.0.5", "react-dom": "^16.4.0", "react-drawer": "^1.3.4", "react-dropzone-component": "^3.2.0", "react-flip-move": "^3.0.2", "react-ga": "^2.5.3", "react-google-charts": "^1.6.6", "react-helmet": "^5.2.0", "react-instantsearch": "^5.1.0", "react-intl": "^2.4.0", "react-motion-drawer": "^3.1.0", "react-placeholder": "^3.0.1", "react-quill": "^1.2.7", "react-redux": "^5.0.7", "react-smooth-scrollbar": "^8.0.6", "react-speech-recognition": "^1.0.6", "react-tag-box": "^1.6.0", "react-throttle": "^0.3.0", "react-trend": "^1.2.4", "react-vis": "^1.9.4", "react-window-size-listener": "^1.2.1", "react-youtube": "^7.6.0", "recharts": "^1.0.0-beta.10", "redux": "^4.0.0", "redux-saga": "^0.16.0", "redux-thunk": "^2.3.0", "reselect": "^3.0.1", "rheostat": "^2.2.0", "smooth-scrollbar": "^8.3.0", "styled-components": "^3.3.2", "styled-theme": "^0.3.3", "styled-tools": "^0.5.0", "uppy": "^0.25.5", "uuid": "^3.2.1" }, "devDependencies": { "@babel/cli": "^7.0.0-beta.42", "@babel/core": "^7.0.0-beta.42", "@babel/preset-env": "^7.0.0-beta.42", "@firebase/app-types": "^0.3.2", "cpx": "^1.5.0", "firebase-tools": "^3.18.6", "prettier": "^1.13.5", "rimraf": "^2.6.2", "babel-plugin-import": "^1.4.0", "babel-plugin-styled-components": "^1.1.7", "babel-plugin-transform-define": "^1.3.0", "cross-env": "^5.0.5", "webpack-bundle-analyzer": "^2.9.2", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "node-sass": "^4.9.0", "image-webpack-loader": "^4.3.1", "css-loader": "^0.28.11", "file-loader": "^1.1.11" }

Thank you

Pierre

jthegedus commented 6 years ago

Thanks for reporting.

Which npm script did you run to throw this error?

Are you using the next.js _app.js feature? If so, I would refer you here - https://github.com/zeit/next.js/issues/4401#issuecomment-390397914

pierrederuel commented 6 years ago

Thanks for your quick reply! Yes I'm using the _app.js feature, If I understand it correctly I just need to remove the references to babel in the package json?

jthegedus commented 6 years ago

You'll need to install @babel/runtime explicitly. I've updated the readme here with the information from https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md#_appjs

If this solves your problem feel free to close this issue :smile:

pierrederuel commented 6 years ago

Unfortunately I still have the same error even after adding the dependency explicitly... Any idea ?

jthegedus commented 6 years ago

doing a fresh install seems to work. It may be something else in your specific setup that is causing a conflict with babel or is installing the old babel/runtime package.

The first place I would be looking is at upgrading all your other babel deps. ie: the babel plugins. you'll need to check the babel monorepo as they are probably renamed

mdrideout commented 6 years ago

I experienced this issue after adding async / await functions to my app. I updated all of my packages to the latest version (including babel), and the issue persisted. I tried including @babel/runtime in my package.json and the issue persisted. I tried updating cloud functions to node 8, and the issue persisted.

I changed from async / await, to a traditional return new Promise style function, and it successfully deployed.

jthegedus commented 4 years ago

Hi all, sorry for not providing a concrete solution to this problem 😞

Onward and upwards! I am deprecating this example in favor of another approach, which can be found in this repo (https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs).

I've been very busy the last few months and getting back into the swing of OSS and writing so if you are having issues I will truly try and be more prompt next time. Cheers.