I have a module in my nextjs project which is mentioned under dependencies in package.json. It works locally. But when I build and deploy to firebase function I get the following error
Cannot find module 'react-lazyload'
My package.json
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"predeploy": "next build",
"deploy": "firebase use popcorntales-40767 & firebase deploy"
},
"engines": {
"node": "10"
},
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#zeit/next-css": "^1.0.1",
"bootstrap": "^4.5.0",
"cacheable-response": "^2.1.0",
"chart.js": "^2.9.3",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.1",
"next": "9.4.4",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-chartkick": "^0.4.0",
"react-dom": "16.13.1",
"react-lazyload": "^3.0.0",
"react-responsive-carousel": "^3.2.9",
"react-share": "^4.2.0"
},
"devDependencies": {
"firebase-functions-test": "^0.2.0"
}
}
Commands used
1) next build
2) firebase deploy
Related
I have Bootstrap5 installed, I only want to include a few components from Bootstrap5 sources, how do I do that?
package.json
{
"name": "Blog",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/svg": "^0.3.0",
"bootstrap": "^5.1.3",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"sass": "^1.47.0",
"sass-loader": "^10.2.0"
}
}
I use fabric.js in my project and I got this error Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) when I build my project. Please help me, how to resolve it.
my package.json
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"fabric": "^4.2.0",
"nodemon": "^2.0.4",
"nuxt": "^2.13.3",
"nuxt-i18n": "^6.13.8",
"sqlite3": "^5.0.0",
"vue-axios": "^2.1.5",
},
"devDependencies": {
"#vue/test-utils": "^1.0.3",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^26.0.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.0.1",
"prettier": "^2.0.5",
"vue-jest": "^3.0.4"
}
}
Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.
Just upgraded my react-native project from version 0.46.4 to 0.60.0 using yarn or npm and run with visual studio code result following error.
[Error] Error: Can't get fulfillment value from any promise, all promises were rejected.
This is my old package.json:
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "2.2.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
"react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
"react-native-tabbar-bottom": "^1.0.4",
"react-native-numeric-input": "^1.8.0",
"react-navigation": "https://github.com/Maxeh/react-navigation.git",
"rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
},
"devDependencies": {
"babel-jest": "21.0.0",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.1",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
And my new package.json here
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.12.1",
"react": "^16.8.6",
"react-native": "^0.60.0",
"react-native-grid-view": "^0.4.1",
"react-native-i18n": "^2.0.15",
"react-native-numeric-input": "^1.8.0",
"react-native-scalable-image": "^0.5.1",
"react-native-tabbar-bottom": "^1.0.4",
"react-navigation": "^3.11.0",
"rn-viewpager": "^1.2.9"
},
"devDependencies": {
"babel-jest": "21.0.0",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.1",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
When I build my project with Visual Studio Code, show following error.
[Error] Error: Can't get fulfillment value from any promise, all promises were rejected.
Please let me upgrade my project and build it.
I found way to upgrade.
I changed dependencies carefully like following package.json.
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.8.6",
"react-native": "^0.60.0",
"react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
"react-native-numeric-input": "^1.8.0",
"react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
"react-native-tabbar-bottom": "^1.0.4",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "https://github.com/Maxeh/react-navigation.git",
"rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"eslint": "^6.0.1",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "^16.8.6"
},
"jest": {
"preset": "react-native"
}
}
As you can see I removed native-base and updated dev dependencies and add babel/core.
And delete node_modules, yarn or npm again.
I just started working with React Native. Now I am trying to get my client running however I'm facing this issue
Requiring unknown module "./lib/templates/bootstrap".If you are sure the module is there, try restarting the packager or running "npm install".
package.json
{
"name": "client",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"eslint": "^2.10.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-jsx-a11y": "^1.2.0",
"eslint-plugin-react": "^5.1.1",
"react": "15.3.2",
"react-native": "^0.37.0",
"tcomb-form-native": "^0.5.0",
"whatwg-fetch": "^1.0.0"
},
"jest": {
"preset": "jest-react-native"
},
"devDependencies": {
"babel-jest": "17.0.0",
"babel-preset-react-native": "1.9.0",
"jest": "17.0.0",
"jest-react-native": "17.0.0",
"react-test-renderer": "15.3.2"
}
}
Then I tried to search the text /lib/templates/bootstrap in my project and I found it in index.android.bundle.
module.exports=LoginView;
}, "client/views/LoginView.js");
__d(559 / tcomb-form-native/index.js /, function(global, require, module, exports) {var _lib=require(560 / ./lib /);var _lib2=babelHelpers.interopRequireDefault(_lib);
var _en=require(620 / ./lib/i18n/en /);var _en2=babelHelpers.interopRequireDefault(_en);
var _bootstrap=require('./lib/templates/bootstrap');var _bootstrap2=babelHelpers.interopRequireDefault(_bootstrap);
var _bootstrap3=require(621 / ./lib/stylesheets/bootstrap /);var _bootstrap4=babelHelpers.interopRequireDefault(_bootstrap3);
Anyone can shed some lights on this ?