I want to deploy my react app which was built using vite into AWS Amplify but the build is failing. Here's how my package.json looks
{
"name": "app",
"author": "ashiqdey",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
},
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"prettier": "^2.5.1",
"vite": "^3.1.0"
}
}
What wrong I am doing?
Edit : Here's my yml file, After getting vite command not found error I had added npm i vite -g, still no luck
After adding the npm i vite I am getting this error
Developing software: 49% time spent on cloud configuration, 49% on build scripts, 2% writing code. And this is with all the amazing new tools becoming available.
Your package file correct and just like mine (although my vite is older) so this answer may not help you.
The amplify.yml has a preBuild step that should be doing a yarn install (or npm install), so vite and other packages will be downloaded.
I have amplify.yml in the root of my project because I changed baseDirectory: / to baseDirectory: /dist.
I have a vite.config.ts:
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser',
},
]
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
}
})
My index.html has some extra for vite:
<body>
<div id="root"></div>
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
};
var exports = {};
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
EDIT
Here's my amplify.yml file:
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: dist/
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Revert the amplify configuration back to its original form and try to check your package.json for these following settings.
Related
I am working on a website using Preact, and I am trying to proxy requests made in the browser to the development server I'm using as the back end.
When I try to run the front end application with yarn client, it errors out and informs me it cannot find the http2-Proxy module despite my installing it.
My directory structure is as follows:
Website_Root:
| package.json
|
+---dummy-api
|
+---frontend
| package.json
| README.md
| snowpack.config.mjs
|
+---public
|
+---src
| index.jsx
|
+---assets
|
+---components
|
+---routes
I'm attempting to use the Yarn Workspaces feature; as such my package.json at the root level is as follows:
{
"name": "Website",
"packageManager": "yarn#3.1.1",
"scripts": {
"client": "yarn workspace frontend dev",
"mockapi": "yarn workspace dummy-api dev",
"dev": "yarn concurrently --kill-others-on-fail \"yarn client\" \"yarn mockapi\""
},
"workspaces": [
"frontend",
"dummy-api"
],
"devDependencies": {
"concurrently": "^6.4.0"
},
"dependencies": {
"preact": "^10.6.4"
}
}
The package.json inside of the frontend workspace is as follows:
{
"name": "frontend",
"private": true,
"proxy": "http://localhost:9000/api",
"scripts": {
"dev": "snowpack dev",
"build": "snowpack build",
},
"dependencies": {
"axios": "^0.24.0",
"http2-proxy": "^5.0.53",
"preact": "^10.6.4",
"preact-router": "^3.2.1",
"react-table": "^7.7.0"
},
"devDependencies": {
"#prefresh/snowpack": "^3.0.0",
"#snowpack/plugin-dotenv": "^2.1.0",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"snowpack": "^3.8.8"
}
}
And, finally, my snowpack.config.js is as follows:
import proxy from "http2-proxy";
/** #type {import("snowpack").SnowpackUserConfig } */
export default {
alias: {
react: "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
"react/jsx-runtime": "preact/jsx-runtime",
},
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: ["#snowpack/plugin-dotenv", "#prefresh/snowpack"],
routes: [
{
match: "all",
src: "/api/.*",
dest: (req, res) =>
proxy.web(req, res, { hostname: "localhost", port: "9000" }),
},
],
devOptions: {
open: "none",
},
};
I can't help but think I've set something up incorrectly; snowpack should be able to find http2-proxy since I've installed it, but I genuinely don't understand what the holdup is.
I've also tried installing http2-proxy at the root level to no avail.
I believe I discovered the problem.
I did not initialize the yarn workspaces correctly.
I tried out a minimum working example of preact with snowpack, and found that creating a parent yarn directory, creating the child directories, registering them in the parent package.json and then inside each child subdirectory running yarn init -y instead of yarn init -2 produced the necessary results.
I made a very simple gatsby site with AWS Amplify tho, site map was not created by 'gatsby-plugin-sitemap'.
[package.json]
{
"name": "web_matching",
"version": "1.0.0",
"private": true,
"description": "web_matching",
"author": "uekyo",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^2.26.1",
"gatsby-plugin-sitemap": "^2.11.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
[gatsby-config.js]
module.exports = {
siteMetadata: {
title: "web_matching",
siteUrl: `https://amp.d1aw1cuurv9iud.amplifyapp.com`,
},
plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
}
]
};
[amplify.yml]
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn build
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Do you guys have the same experience? By the way, if I enter the sitemap URL, it's moved to a top page automatically. However, it works on localhost. The problem seems to be in Amplify.
Running locally with gatsby develop will not serve up the sitemap.
You must run under production mode by running gatsby build && gatsby serve
Then the sitemap should be available via http://localhost:9000/sitemap.xml
I have a React library called pp-shared-components. It lives on a github repo, so to install it I do the following in my package.json file.
"dependencies": {
"pp-shared-components": "git+ssh://git#github.com/{org}/pp-shared-components.git#master",
}
In the pp-shared-components repo, I have an index.js file that imports React components and then exports then like so.
import ContentHeader from './components/content-header/ContentHeader.js';
import Wizard from './components/wizard/Wizard.js';
export {
ContentHeader,
Wizard
}
I use rollup to build my library.
My package.json in the pp-shared-components is as follows.
{
"name": "pp-shared-components",
"version": "1.0.0",
"description": "PP Shared Library for Components.",
"main": "build/index.cjs.js",
"module": "build/index.esm.js",
"browser": "build/index.js",
"style": "build/index.css",
"files": [
"build"
],
"scripts": {
"build": "rollup -c",
"watch": "rollup -c --watch",
"lint": "eslint --ext .js,.jsx .",
"prepare": "npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/{org}/pp-shared-components.git"
},
"publishConfig": {
"access": "public"
},
"devDependencies": {
...
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-filesize": "^6.1.1",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-local-resolve": "^1.0.7",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-externals": "^2.0.1",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-scss": "^1.0.2"
},
"peerDependencies": {
...
},
"dependencies": {
...
}
}
I can then import the components in another project like so
import { ContentHeader, Wizard } from 'pp-shared-components';
This all works fine locally, however, when I run this through Jenkins, I get the following error in the console
[INFO] ERROR in ./screens/main/Main.js
[INFO] Module not found: Error: Can't resolve 'pp-shared-components' in '/var/lib/jenkins/data/workspace/pp/src/main/client/screens/main'
[INFO] # ./screens/main/Main.js 6:15-55
[INFO] # ./app/App.js
[INFO] # ./index.js
Looking at the pp-shared-components folder in the node_modules folder within Jenkins, all the folders and files are exactly the same as they are in my local version?
I did notice that while in VSCode, there is a little tooltip that exclaims
module "/Users/{users}/git/pp/node_modules/pp-shared-components/build/index.cjs"
Could not find a declaration file for module 'pp-shared-components'.
'/Users/{users}/git/pp/node_modules/pp-shared-components/build/index.cjs.js' implicitly has an 'any' type.
Try `npm install #types/pp-shared-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'pp-shared-components';`ts(7016)
Now, I don't use typescript anywhere in my pp-shared-components project.
Will I need to add a .d.ts file somewhere in the project and while I need to use typescript throughout my whole project?
Sort of lost at the moment and need some direction of what do next and if it is a case of adding a .d.ts file, what is involved in doing so? Is it as simple as adding declare module 'pp-shared-components' and that's that?
Any help would be greatly appreciated.
I am attempting to build a React Native application on an Os X CircleCI box.
My circle.yml is as follows:
machine:
xcode:
version: 8.3.3
environment:
PATH: '$PATH:$HOME/node/node-v4.4.3-darwin-x64/bin'
dependencies:
pre:
- brew install node
- npm install -g react-native-cli
- npm install
- react-native link
test:
override:
- set -o pipefail && xcodebuild -project 'ios/myApp.xcodeproj' -scheme 'myApp' clean build test -sdk iphonesimulator -destination 'platform=iOS Simulator,OS=9.0,name=iPhone 6' CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY= PROVISIONING_PROFILE= | tee $CIRCLE_ARTIFACTS/xcode_raw.log | xcpretty --color --report junit --output $CIRCLE_TEST_REPORTS/xcode/results.xml
Which fails with:
/Users/distiller/my-app/ios/myApp/AppDelegate.m:12:9: 'React/RCTBundleURLProvider.h' file not found
#import <React/RCTBundleURLProvider.h>
My package.json is follows:
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"test-watch": "jest --watch",
"test-coverage": "jest --coverage"
},
"dependencies": {
"#turf/circle": "^4.5.2",
"#turf/envelope": "^4.5.2",
"#turf/helpers": "^4.5.2",
"gl-react-native": "^2.42.3",
"react": "~15.4.0-rc.4",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.6.1",
"react-native": "0.39.2",
"react-native-config": "0.5.0",
"react-navigation": "^1.0.0-beta.11",
"react-test-renderer": "^15.6.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"jest": "20.0.4"
},
"rnpm": {
"assets": [
"assets/fonts"
]
},
"jest": {
"preset": "react-native",
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"coverageDirectory": "__coverage__",
"snapshotSerializers": [
"./node_modules/enzyme-to-json/serializer"
],
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"
],
"setupFiles": [
"./test-setup.js"
]
}
}
By running a build with ssh enabled and inspecting the version, I can say that react-native-cli is installed at 2.0.1
Interestingly, this behaviour does not exhibit when the project is built (with the exact same command) on my machine (localhost)
By googling, I have found things like: React Native 0.40.0 : RCTBundleURLProvider.h” file not found - AppDelegate.m
Describing my problem exactly, however they are all limited to RN 4.0, while my package.json is explicitly pegged at 3.9.2
Any help would be greatly appreciated!
The solution seemed to be to delete my ios/build directory. Once I did so, I started having the same behavior locally as in CircleCi (which I could then fix by simply taking React out of the import path like so:
#import <RCTBundleURLProvider.h>
I had this problem because my test script wasn't running yarn install. So a fresh clone and build would fail. You could add something like this to your config.yml file:
- run:
name: Install React Native
command: yarn install
I am trying to reduce the size of my reactjs application bundle.js file. For a relatively simple app i have its browserified js file size - 452Kb.
To build it, i use NPM with respective package.json file:
{
"name": "MyApp-React",
"version": "0.0.1",
"description": "My App Description",
"main": "app.js",
"scripts": {
"watch": "watchify app.js -o public/js/bundle.js -v",
"browserify": "browserify app.js | uglifyjs > public/js/bundle.js",
"build": "npm run browserify",
"start": "npm install"
},
"author": "",
"dependencies": {
"axios": "^0.14.0",
"body-parser": "^1.15.2",
"clipboard": "^1.5.12",
"express": "~4.9.7",
"express-handlebars": "~1.1.0",
"express-session": "^1.14.1",
"highlight.js": "^9.7.0",
"node-jsx": "~0.12.4",
"react": "~15.3.1",
"react-dom": "^15.3.1",
"react-maskedinput": "^3.2.4",
"react-modal": "^1.4.0",
"react-router": "^2.8.1"
},
"devDependencies": {
"browserify": "~6.0.3",
"nodemon": "^1.2.1",
"reactify": "~1.1.1",
"uglify-js": "~2.4.15",
"watchify": "^3.1.1"
},
"browserify": {
"debug": false,
"transform": [
"reactify"
]
}
}
Not being an expert in Node JS/ ReactJS development i hope i do somethin wrong, but i cant find what.
For the time being i tried few things: app.js file has a line of code setting NODE_ENV variable to 'production'
process.env.NODE_ENV = 'production';
A second thing i have tried is to use npm prune command with --production parameter. Having this run, i see it removes a lot from node_modules folder, but then npm run build is failing to run as it misses devDependencies. What can i do?
One thing that you could do to lighten the download burden for your users is get react and react-dom from a CDN instead of putting them in your bundle.
Move them from the dependencies section of your package.json to a new section peerDependencies (see npm docs).
Then add tags to your HTML code for loading React and ReactDOM like so:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
→ See React on cdnjs.com
Then you need to change your Browserify config to recognize react and react-dom as external modules.
→ See related question on StackOverflow