Trying to import { GoogleSpreadsheet } from 'google-spreadsheet' in my React App but getting this nasty error
Uncaught ReferenceError: process is not defined
at loadProxy (gaxios.ts:66:5)
at node_modules/gaxios/build/src/gaxios.js (gaxios.ts:75:1)
at __require (chunk-RSJERJUL.js?v=0db569af:3:50)
at node_modules/gaxios/build/src/index.js (index.ts:15:1)
at __require (chunk-RSJERJUL.js?v=0db569af:3:50)
at node_modules/gcp-metadata/build/src/index.js (index.ts:8:1)
at __require (chunk-RSJERJUL.js?v=0db569af:3:50)
at node_modules/google-auth-library/build/src/auth/googleauth.js (googleauth.js:19:21)
at __require (chunk-RSJERJUL.js?v=0db569af:3:50)
at node_modules/google-auth-library/build/src/index.js (index.js:17:22)
here below is a screenshot of my current app structure that I have started using Vite (which maybe is why this is not working?)
package.json
{
"name": "tinder-triage",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"google-spreadsheet": "^3.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"vite": "^4.1.0"
}
}
vite.config.js
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
Related
Hhile deploying I am getting error, it is Vite + React + Typescript app.
9:27:22 AM: $ tsc && vite build
9:27:23 AM: src/App.tsx(2,23): error TS2307: Cannot find module './components/AppFooter' or its corresponding type declarations.
9:27:23 AM: src/App.tsx(3,23): error TS2307: Cannot find module './components/AppHeader' or its corresponding type declarations.
Where I am getting error, appheader and appfooter contains just printing "working".
import "./App.css";
import AppFooter from "./components/AppFooter";
import AppHeader from "./components/AppHeader";
function App() {
return (
<>
<AppHeader></AppHeader>
<AppFooter></AppFooter>
</>
);
}
export default App;
My file structure:
package.json file:
{
"name": "vite---react---typescript",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "npx http-server ./dist",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"#types/react": "^18.0.0",
"#types/react-dom": "^18.0.0",
"#vitejs/plugin-react": "^1.3.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.2.4",
"typescript": "^4.6.3",
"vite": "^2.9.9"
}
}
I tried changing the casing and changing the file name, it is working perfectly fine on my local but not when I deploy.
It looks like your components are in ./components/main, so you will need to update the paths on the imports, e.g.
import AppFooter from "./components/main/AppFooter";
I'm trying to setup a component testing strategy for a new react repo that we are working on here.
Based on Cypress documentation there are no useful details about how to configure component testing using a custom dev server like this.
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer(cypressConfig) {
// return dev server instance or a promise that resolves to
// a dev server instance here
},
},
})
My package.json looks like this one:
"source": "src/index.ts",
"exports": {
"require": "./dist/index.cjs",
"default": "./dist/index.modern.js"
},
"main": "./dist/index.cjs",
"module": "./dist/index.module.js",
"unpkg": "./dist/index.umd.js",
"typings": "dist/index",
"scripts": {
"build": "microbundle",
"dev": "microbundle watch",
"pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
"test": "jest",
"ci:start-example": "cd example; npm start",
"cy:open": "npx cypress open"
},
"dependencies": {
"react-style-object-to-css": "^1.1.2"
},
"peerDependencies": {
"react": "16 - 18",
"react-dom": "16 - 18"
},
"devDependencies": {
"#testing-library/cypress": "^8.0.3",
"#types/jest": "^28.1.6",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"cypress": "^10.3.1",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"jest": "^28.1.3",
"microbundle": "^0.15.0",
"prettier": "^2.7.1",
"ts-jest": "^28.0.7",
"typescript": "^4.7.4"
},
"files": [
"dist"
]
}
Is there someone facing the same issue with custom dev servers?
I'm not too familiar with microbundle and setting this up comparing with webpack or vite. Would appreciate any help please!
I have an issue with my app, everything was working fine until i ran npm run audit fix force then when i ran my app after this i am getting the error message below related to svg file.
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
i don't understand what went wrong.
Can someone help me, please?
package.json
{
"name": "myskillreactapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#babel/preset-env": "^7.15.8",
"bootstrap": "^5.0.0-beta3",
"bootstrap-dark-5": "^1.1.3",
"font-awesome": "^4.7.0",
"next": "^10.0.4",
"next-images": "^1.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"react-placeholder": "^4.1.0"
},
"devDependencies": {
"babel-plugin-inline-react-svg": "^2.0.1",
"eslint": "7.32.0",
"eslint-config-next": "^0.2.4",
"file-loader": "^6.2.0",
"sass": "^1.43.3"
}
}
next-config.js
const webpack = require('webpack');
module.exports = {
reactStrictMode: true,
entry: './src/index.js',
module: {
rules: [
//...
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[hash]-[name].[ext]',
},
},
],
},
],
},
//...
};
_app.js
//import 'bootstrap/dist/css/bootstrap.css';
//import '/node_modules/bootstrap/scss/bootstrap.scss';
import '../styles/globals.scss';
import '../styles/Home.module.scss';
import 'font-awesome/css/font-awesome.min.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
The got solved by running npm run audit fix force again and it reverted back to normal. hope it helps someone. Thx
Leo
I'm a junior frontend engineer and I trying to createContext name StoreContext, which has initial parameter
type is 'class'. here is my codes
( I set my project with npx create-next-app)
import React,{createContext} from 'react';
import {TodoList} from './TodoList';
export const StoreContext = createContext<TodoList>({} as TodoList);
export const StoreProvider = StoreContext.Provider;
I use typescript and there is a compile fail in line 4
export const StoreContext = createContext<TodoList>({} as TodoList);
unexpected token, expected ","
problem occurred at {} as Todolist
I tried to fix it with install some babel modules, but didn't work. here is my package.json and .babelrc, babel.config.js
package.json
{
"name": "mobx-sample",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#babel/core": "^7.7.7",
"#babel/plugin-proposal-decorators": "^7.7.4",
"#babel/plugin-transform-react-jsx": "^7.7.7",
"mobx": "^5.15.1",
"mobx-react-lite": "^1.5.2",
"next": "9.1.7",
"react": "16.12.0",
"react-dom": "16.12.0"
},
"devDependencies": {
"#babel/node": "^7.7.7",
"#babel/plugin-transform-destructuring": "^7.7.4",
"#babel/preset-env": "^7.7.7",
"#babel/preset-react": "^7.7.4",
"#types/node": "^13.1.4",
"#types/react": "^16.9.17",
"typescript": "^3.7.4"
}
}
.babelrc
{
"plugins": ["#babel/plugin-transform-destructuring"]
}
babel.config.js
module.exports = {
presets: ["#babel/preset-react","#babel/preset-env"],
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
["#babel/plugin-transform-destructuring",{"useBuiltIns":true}]
],
};
how do I fix compile error?
and what's the name of that syntax
{} as TodoList
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'
class Store {
_number = 0
increment = () => {
this._number++
}
get number() {
return String(this._number)
}
}
// All of those are defined
console.log('TEST', {action, decorate, computed, observable, observer})
decorate(Store, {
_number: observable,
increment: action,
number: computed,
})
class TestComponent extends React.Component {
static defaultProps = {
clickableComponent: 'button',
numberElement: 'div',
}
store = new Store()
render() {
const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
const {number, increment} = this.store
return <Fragment>
<ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
<NumberElement>{number}</NumberElement>
</Fragment>
}
}
export default observer(TestComponent)
In browser (react) app I get the following error:
Failed to compile
PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
In native app (react-native) I get the following runtime error:
error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root package.json:
{
"name": "monorepo-rn",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"workspaces": {
"packages": [
"packages/**"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"scripts": {
"run:web": "yarn workspace web start",
"run:native:ios": "yarn workspace nativeapp react-native run-ios",
"run:native:android": "yarn workspace nativeapp react-native run-android"
}
}
Here is the package.json of the shared package:
{
"name": "test-component",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir lib"
},
"peerDependencies": {
"mobx": "^4.x",
"mobx-react": "^5.x",
"react": "^16.x",
"react-dom": "^16.x"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"dependencies": {}
}
Here is the package.json of the webapp:
{
"name": "web",
"version": "0.1.0",
"dependencies": {
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3",
"test-component": "1.0.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewire-babel-loader": "^0.1.1",
"react-app-rewired": "^2.0.3"
}
}
And here is the package.json of the react-native app:
{
"name": "nativeapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"test-component": "1.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "16.6.3",
"react-native": "0.58.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.