I'm updating my project to use turborepo and I'm encountering a strange behavior with turbo/no-undeclared-env-vars.
In the starter project I added a hello constant from the environment variables:
export default function Web() {
const hello = process.env.HELLO;
return (
<div>
<h1>{hello}</h1>
<Button />
</div>
);
}
And when running npm run lint I get the expected error:
web:lint: ./pages/index.tsx
web:lint: 4:17 Error: $HELLO is not listed as a dependency in turbo.json turbo/no-undeclared-env-vars
But when I add it to turbo.json and re-run npm run lint it still shows the error.
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build", "$HELLO"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"outputs": []
},
"dev": {
"cache": false
}
}
}
It seems to be using the cache because if I remove the cache from apps/web/.next/.cache/.eslint and run it again it shows no error anymore.
It also works the other way.
If I now remove the $HELLO from turbo.json and run npm run lint again it says there are not errors, while it should say that it is unlisted. Here as well, removing the cache manually shows it again but it seems to me that it should detect it automatically, no?
I also tried updating turbo.json not to use the cache during lint but that is also not helping:
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build", "$HELLO"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"outputs": [],
"cache": false
},
"dev": {
"cache": false
}
}
}
Any suggestions?
In case you still need and answer or if anybody is like me and ended up here googling the issue, the solution was to add a new prop in the build object called env so your turbo.json would become
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"],
"env": [
"HELLO"
]
},
"lint": {
"outputs": [],
"cache": false
},
"dev": {
"cache": false
}
}
}
note: no $ prefix needed.
When running turborepo on Vercel you also get some extra useful info like a codemod to fix your turbo.json file in your case by running
npx #turbo/codemod migrate-env-var-dependencies
in the root folder you'd get the right props in the json file.
One last thing, if you're using next and turborepo, your ENV vars, if they are needed in the frontend like your example, should be prefixed with NEXT_PUBLIC_ so in your case
const hello = process.env.NEXT_PUBLIC_HELLO;
with that change, turborepo will know that you're using that env var as part of a next project and the caching algorithm will behave accordingly
Related
I'm not able to solve an error which is mentioned in the title:
Error: $VARIABLE is not listed as a dependency in turbo.json
When I run npm run build I get errors for 2 variables and not for all of them that's what is strange to me...
Error: $NEXT_STRIPE_SK is not listed as a dependency in turbo.json turbo/no-undeclared-env-vars
Error: $NEXT_PUBLIC_STRIPE_PK is not listed as a dependency in turbo.json turbo/no-undeclared-env-vars
turbo.json
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
"dist/**",
".next/**"
]
},
"order#build": {
"dependsOn": [
"^build"
],
"env": [
"NEXT_PUBLIC_STRIPE_PK",
"NEXT_STRIPE_SK"
],
"outputs": [
".next/**"
]
},
"lint": {
"outputs": []
},
"dev": {
"cache": false
}
},
"globalEnv": [
"NEXT_PUBLIC_SUPABASE_URL",
"NEXT_PUBLIC_SUPABASE_ANON_KEY",
"SUPABASE_SERVICE_ROLE",
"NEXT_PUBLIC_STRIPE_PK",
"NEXT_STRIPE_SK"
],
"globalDependencies": [
"$NEXT_PUBLIC_SUPABASE_URL",
"$NEXT_PUBLIC_SUPABASE_ANON_KEY",
"$SUPABASE_SERVICE_ROLE",
"$NEXT_PUBLIC_STRIPE_PK",
"$NEXT_STRIPE_SK"
]
},
This is my .env.local
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE=
NEXT_PUBLIC_STRIPE_PK=
NEXT_STRIPE_SK=
Based on the configuration
A list of file globs for implicit global hash dependencies. The
contents of these files will be included in the global hashing
algorithm and affect the hashes of all tasks. This is useful for
busting the cache based on .env files (not in Git) or any root level
file that impacts workspace tasks (but are not represented in the
traditional dependency graph (e.g. a root tsconfig.json,
jest.config.js, .eslintrc, etc.)).
you should pass the name of the files to globalDependencies
"globalDependencies": [
".env", // contents will impact hashes of all tasks
".env.local",
"tsconfig.json" // contents will impact hashes of all tasks
]
Hope all's well. Kindly request your help with this. We are executing a Cypress script that launches URL 1 - https://domain1.com. This website has an iFrame embedded that launches another site - https://domain2.com. Problem is, site 2 does not load within the iFrame and we keep getting the message - "domain2.com took a long time to respond". However, outside of Cypress if I launch https://domain1.com, the iFrame is opened and domain2 is launched and displayed successfully.
I have reviewed several posts and have performed the following,
cypress.json
"chromewebsecurity": false AND "modifyobstructivecode": false
index.js, followed by package.json
const path = require('path');
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
console.log(config, browser, args);
if (browser.name === 'chrome') {
const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
args.push(args.push(`--load-extension=${ignoreXFrameHeadersExtension}`));
args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
}
return args;
});
};
{
"name": "coral",
"version": "1.0.0",
"description": "Coral testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cy:run": "C:\\Testing\\Cypress\\Coral\\node_modules\\.bin\\cypress run",
"download-extension": "ced gleekbfjekiniecknbkamfmkohkpodhe extensions/ignore-x-frame-headers"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^4.1.0",
"mochawesome": "^5.0.0",
"mochawesome-merge": "^4.0.2"
},
"reporterEnabled": "mochawesome",
"dependencies": {
"file-system": "^2.2.2",
"nodemailer": "^6.4.6",
"chrome-ext-downloader": "^1.0.4"
}
}
I have downloaded the .crx file for this extension and renamed it to ignore-x-frame-headers under the extensions dir.
However, every time I run the test, the page for domain2.com does not load inside the iFrame.
Can someone please explain what are the steps I'm missing/executing wrong? Really appreciate your prompt and positive response.
Thanks in advance,
Karthik.
I'm getting the following error when deploying to Vercel:
Module not found: Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences'
I don't use the dependency fs, my package.json file looks like:
{
"name": "single",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"mysql": "^2.18.1",
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"serverless-mysql": "^1.5.4",
"sql-template-strings": "^2.2.2"
}
}
I'm pretty new to NextJS, so I'm not really sure what's going on. Any ideas?
Edit:
For context, I'm getting data from mySQL in the app, not sure if that has anything to do with the error
export async function getStaticProps() {
const db = require('./lib/db')
const escape = require('sql-template-strings')
const articles = await db.query(escape`
SELECT *
FROM articles
ORDER BY pid
`)
const var1 = JSON.parse(JSON.stringify({ articles }))
return {
props: {
var1,
},
}
}
Solved it by creating a next.config.js file and adding the following to it:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
//config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
return config
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}
I had a similar problem whilst following the next.js tutorial. To resolve this I had to also create a next.config.js file as the above answer. However I have only added the following next configurations
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
Once I had added the above next.config.js file with the contents above I was able to successfully build the solution.
source: https://newspatrak.com/javascript/cant-build-react-next-project-found-page-without-a-react-component-as-default-export-context-api-file/
Next.js tutorial link: https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
I have scaffolded AspNetCore Angular 6.0 SPA template from cli and then installed npm package accordingly.
However when i try to run the project dotnet run it does not start rather prompted with and error. I have captured a screenshot for your reference. I am not sure whether it is something to do with angular.Json file or else!!! Any idea..
Error:
Unknown option --extractCss
This is because the ng serve command no longer supports --extractCss option
Open package.json. You'll find
{
"scripts": {
"start": "ng serve --extract-css" // Please remove the --extract-css
// ...
}
}
remove the --extract-css from start scripts.
It'll be now
{
"scripts": {
"start": "ng serve"
// ...
}
}
Now open angular.json. set "extractCss": true in build configuration
example:
"build": {
"architect": {
"configurations": {
"extractCss": true,
//...
}
}
}
}
Reference: https://github.com/angular/angular-cli/issues/10666#issuecomment-386843570
Reference 2: http://www.talkingdotnet.com/upgrade-angular-5-app-angular-6-visual-studio-2017/
After creating new project and upgrading it to webpack version I wanted to add bootstrap's CSS.
I tried method descibed in docs [1] but it doesn't seem to work.
I cannot use the cdn version because my users may have to work without acces to external networks.
[1] https://github.com/angular/angular-cli#global-library-installation
"apps": [
{
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css"
],
...
.
$ ng --version
angular-cli: 1.0.0-beta.11-webpack.2
node: 5.4.1
os: linux x64
or maybe I just don't understand what should happen?
after ng build in dist dir there is no CSS file and there is nothing added to index.html
If you upgrade to 1.0.0-beta.11-webpack.3 or higher, you can use the apps[0].styles property of angular-cli.json to list external stylesheets for import. With this you don't have to add anything to index.html.
To upgrade from 1.0.0-beta.11-webpack.2 to 1.0.0-beta.11-webpack.3, run:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli#1.0.0-beta.11-webpack.3
Note: you may need to upgrade to Node.js 6 if you get SyntaxError: Unexpected token ... errors on running ng version. See https://github.com/angular/angular-cli/issues/1883 for details.
If you generate a new project and install Bootstrap, your angular-cli.json should look something like this:
{
"project": {
"version": "1.0.0-beta.11-webpack.3",
"name": "demo"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}
I think that you have to add ../ front of the node_modules, because node_modules folder is one step up in the directory tree.
Like this:
"../node_modules/bootstrap/dist/css/bootstrap.css"
All your css files from apps[0].styles property of angular-cli.json during ng build are compiled into styles.bundle.js and this file is included in index.html. If you check this file you can found there all styles. So it works as intended.