🐛 BUG: astro add could not update config file safely

[lucywho]

What version of astro are you using?

1.0.0-beta.7

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Set up a new astro project using Minimal template

Attempted to install tailwindcss using npx astro add tailwind

Got error message error Astro could not update your astro.config.js file safely. Reason: t.identifier is not a function

Link to Minimal Reproducible Example

I have no idea how to do this

Participation

• I am willing to submit a pull request for this issue.

[tony-sull]

@lucywho can you share the package.json and Astro config file?

The message mentions astro.config.js but the minimal template uses astro.config.mjs, if the Astro config file is using an outdated format astro add may not know how to update it properly 🤔

[lucywho]

@tony-sull

astro.config.mjs

import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({});

package.json

 {
  "name": "@example/minimal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "devDependencies": {
    "astro": "^1.0.0-beta.8"
  }
}

[tony-sull]

Interesting, I just ran this locally (below) and didn't hit an issue. @lucywho can you reproduce it in one of the astro.new starters in Stackblitz?

npm init astro -- --template minimal minimal
cd minimal && npm i
npx astro add tailwind

[lucywho]

Looks like it works fine in Stackblitz.

[ghost]

I got the same error and my astro.config.mjs and package.json are the same as Lucywho's with the exception of my package.json says beta.9 instead of 8

[MarkJamesHoward]

Seeing the same myself on beta 14 now. Feels like maybe something being cached as I had this a while back and it resolved itself at some point, but happening again now. And works fine on my laptop.

[MarkJamesHoward]

This looks to be related to an outdated version on Node. Works fine on my laptop with Node v16.14 and was seeing the [t.identifier] error on my PC that had Node v14.16.1. Downgraded my laptop to Node 14.16.1 and reproduced the error. The change I made to fix this was (which is no longer needed as we just need to update to Node v16.14) was to import from @babel/types using explicit imports. @babel/types is a commonJS package and as such the latest import that we use (import * as t from @babel/types) does not work on older versions it seems.

@lucywho @Web-Dev-Taz could you check which version of Node you have to confirm maybe?

[lucywho]

I've got Node v 16.14.2, so its not that unfortunately

[MarkJamesHoward]

Looks like multiple things can affect the import from Babel with yours still showing the issue I guess. I can't reproduce since my node upgrade I'm afraid though sorry. Before my node upgrade I managed to get it working by explicitly importing from babel types - one option there I guess if you need to run..

[FredKSchott]

I can't reproduce, sorry! If anyone can track down a solid reproduction, we can take a look, but it's hard to debug without knowing.

Otherwise, if you can reproduce and feel comfortable putting some console logs inside of your node_modules/astro folder, then we'd love some help tracking this down! If t.identifier is not a function, can you add a console.log(t) to share what it is? searching the node_modules/astro folder for .identifier( should help you find where the error is.

[nicktaylor]

@FredKSchott I'm having this same issue. I simply ran npc create astro@latest entering . as the new location to create the project, selecting just the basics and "yes" to run npm install, "yes" to create git folder.

When I then run npx astro add svelte I get the t.identifier issue above. This occurs on line number 85 of /dist/core/add/index.js which is const defineConfig = t.identifier("defineConfig");.

Here's what t is at that time https://gist.github.com/nicktaylor/b72cbaffdb7c5acac11ae8fd3c0e39b6

Within babel.js changing this to export t.default resolves the issue and things work normally:

"use strict";
import generator from "@babel/generator";
import parser from "@babel/parser";
import traverse from "@babel/traverse";
import {default as t} from "@babel/types"; // Updated this line to set default as t
const visit = traverse.default;
async function generate(ast) {
  const astToText = generator.default;
  const { code } = astToText(ast);
  return code;
}
const parse = (code) => parser.parse(code, { sourceType: "unambiguous", plugins: ["typescript"] });
export {
  generate,
  parse,
  t,
  visit
}

NPM Version: 6.14.8
Node Version: 14.15.1

Used nvm to change node versions to the following, at it worked fine:

NPM Version: 8.13.2
Node Version: 16.15.1

[natemoo-re]

Thanks for digging into this, everyone! We have the infrastructure in place to give you helpful warnings when you're using an incompatible version of Node, but our engines field was out of date so the warnings were never triggered.

I opened #3871 to update those fields.

[Tsourdox]

Updating node to 16 solved it for me :)

[sramam]

It seems an attempt to install astro within a turbo (mono)repo fails with this error.

Versions

❯ npm -v
8.15.0
❯ node -v
v16.17.0

Script to reproduce

#!/usr/bin/env sh

CWD=`pwd`

TURBO_PROJECT=turbo-sample
UI_APP=astro-app

# setup turbo repo
npx create-turbo@latest $TURBO_PROJECT
cd $CWD/$TURBO_PROJECT

rm -rf apps/$UI_APP
mkdir -p apps/$UI_APP
cd $CWD/$TURBO_PROJECT/apps/$UI_APP
# setup astro project
npm create astro@latest
# select '.' for a directory

# add astro plugins
npm run astro add svelte
npm run astro add tailwind

cd $CWD

Expectation

These commands succeed.

npm run astro add svelte
npm run astro add tailwind

Actual

It seems that npm installs dependencies in the monorepo root, so there is a missing package-lock.json in the astro repo.
This seems to be causing the astro installer to default to using yarn. But that hangs.

If I CTRL-C out of the install section, it'll update the astro.config.mjs.
If I hit enter, it'll fail with

 error   Astro could not update your astro.config.js file safely.1ms
  Reason: Unable to install dependencies

  You will need to add these integration(s) manually.
  Documentation: https://docs.astro.build/en/guides/integrations-guide/

Complete run log

❯ rm -rf /tmp/turbo-sample && ./astro-bug.sh

>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Which package manager do you want to use? npm

>>> Created a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>>> Success! Created a new Turborepo at "turbo-sample".
Inside that directory, you can run several commands:

  npm run build
     Build all apps and packages

  npm run dev
     Develop all apps and packages

Turborepo will cache locally by default. For an additional
speed boost, enable Remote Caching with Vercel by
entering the following command:

  npx turbo login

We suggest that you begin by typing:

  cd turbo-sample
  npx turbo login


Welcome to Astro! (create-astro v1.0.1)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … .
✔ Which template would you like to use? › Just the basics (recommended)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no
ℹ Sounds good! You can come back and run git init later.
✔ How would you like to setup TypeScript? › Strictest
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

 Next steps

You can now cd into the  project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

npm WARN ignoring workspace config at /private/tmp/turbo-sample/apps/astro-app/.npmrc

> @example/basics@0.0.1 astro
> astro

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────╮
 │ yarn add @astrojs/svelte svelte@^3.46.4  │
 ╰──────────────────────────────────────────╯

✖ Continue? … yes

   cancelled  Dependencies NOT installed.

  ▶ Be sure to install them manually before continuing!

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import svelte from "@astrojs/svelte";         │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [svelte()]                    │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

   success  Added the following integration to your project:
  - @astrojs/svelte
npm WARN ignoring workspace config at /private/tmp/turbo-sample/apps/astro-app/.npmrc

> @example/basics@0.0.1 astro
> astro

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭─────────────────────────────────────────────────╮
 │ yarn add @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────╯

✔ Continue? … yes
✖ Installing dependencies...
 error   Astro could not update your astro.config.js file safely.1ms
  Reason: Unable to install dependencies

  You will need to add these integration(s) manually.
  Documentation: https://docs.astro.build/en/guides/integrations-guide/
Error: Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
    at add (file:///private/tmp/turbo-sample/node_modules/astro/dist/core/add/index.js:140:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runCommand (file:///private/tmp/turbo-sample/node_modules/astro/dist/cli/index.js:112:14)
    at async cli (file:///private/tmp/turbo-sample/node_modules/astro/dist/cli/index.js:207:5)
npm ERR! Lifecycle script `astro` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @example/basics@0.0.1
npm ERR!   at location: /private/tmp/turbo-sample/apps/astro-app

[jarrodjperez]

@sramam I ran into this as well, but running pnpm install within the astro project directory first fixed it for me.

[AlkenD]

It seems an attempt to install astro within a turbo (mono)repo fails with this error.

Versions

❯ npm -v
8.15.0
❯ node -v
v16.17.0

Script to reproduce

#!/usr/bin/env sh

CWD=`pwd`

TURBO_PROJECT=turbo-sample
UI_APP=astro-app

# setup turbo repo
npx create-turbo@latest $TURBO_PROJECT
cd $CWD/$TURBO_PROJECT

rm -rf apps/$UI_APP
mkdir -p apps/$UI_APP
cd $CWD/$TURBO_PROJECT/apps/$UI_APP
# setup astro project
npm create astro@latest
# select '.' for a directory

# add astro plugins
npm run astro add svelte
npm run astro add tailwind

cd $CWD

Expectation

These commands succeed.

npm run astro add svelte
npm run astro add tailwind

Actual

It seems that npm installs dependencies in the monorepo root, so there is a missing package-lock.json in the astro repo. This seems to be causing the astro installer to default to using yarn. But that hangs.

If I CTRL-C out of the install section, it'll update the astro.config.mjs. If I hit enter, it'll fail with

 error   Astro could not update your astro.config.js file safely.1ms
  Reason: Unable to install dependencies

  You will need to add these integration(s) manually.
  Documentation: https://docs.astro.build/en/guides/integrations-guide/

Complete run log

❯ rm -rf /tmp/turbo-sample && ./astro-bug.sh

>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Which package manager do you want to use? npm

>>> Created a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>>> Success! Created a new Turborepo at "turbo-sample".
Inside that directory, you can run several commands:

  npm run build
     Build all apps and packages

  npm run dev
     Develop all apps and packages

Turborepo will cache locally by default. For an additional
speed boost, enable Remote Caching with Vercel by
entering the following command:

  npx turbo login

We suggest that you begin by typing:

  cd turbo-sample
  npx turbo login


Welcome to Astro! (create-astro v1.0.1)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … .
✔ Which template would you like to use? › Just the basics (recommended)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no
ℹ Sounds good! You can come back and run git init later.
✔ How would you like to setup TypeScript? › Strictest
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

 Next steps

You can now cd into the  project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

npm WARN ignoring workspace config at /private/tmp/turbo-sample/apps/astro-app/.npmrc

> @example/basics@0.0.1 astro
> astro

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────╮
 │ yarn add @astrojs/svelte svelte@^3.46.4  │
 ╰──────────────────────────────────────────╯

✖ Continue? … yes

   cancelled  Dependencies NOT installed.

  ▶ Be sure to install them manually before continuing!

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import svelte from "@astrojs/svelte";         │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [svelte()]                    │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

   success  Added the following integration to your project:
  - @astrojs/svelte
npm WARN ignoring workspace config at /private/tmp/turbo-sample/apps/astro-app/.npmrc

> @example/basics@0.0.1 astro
> astro

✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭─────────────────────────────────────────────────╮
 │ yarn add @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────╯

✔ Continue? … yes
✖ Installing dependencies...
 error   Astro could not update your astro.config.js file safely.1ms
  Reason: Unable to install dependencies

  You will need to add these integration(s) manually.
  Documentation: https://docs.astro.build/en/guides/integrations-guide/
Error: Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
    at add (file:///private/tmp/turbo-sample/node_modules/astro/dist/core/add/index.js:140:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runCommand (file:///private/tmp/turbo-sample/node_modules/astro/dist/cli/index.js:112:14)
    at async cli (file:///private/tmp/turbo-sample/node_modules/astro/dist/cli/index.js:207:5)
npm ERR! Lifecycle script `astro` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @example/basics@0.0.1
npm ERR!   at location: /private/tmp/turbo-sample/apps/astro-app

it appears I'm facing a similar issue with the turborepo setup with regards to pnpm-lock.yaml file in my case if I create a standalone project it works without any issue but if I install it in a mono repo env it fails to add astro integrations, by any chance did u find a fix for it ?

[rverton]

I also run into this bug with workspaces an Astro. To reproduce:

1. npm init
2. npm init -w ./packages/web
3. rm ./packages/web/package.json (so create-astro can run in an empty folder)
4. cd ./packages/web/ && npx create-astro@latest and confirm each question
5. npm run astro add tailwind

This results in:

✔ Continue? … yes
✖ Installing dependencies...
 error   Astro could not update your astro.config.js file safely.
  Reason: Unable to install dependencies

  You will need to add these integration(s) manually.
  Documentation: https://docs.astro.build/en/guides/integrations-guide/
  File:
    /private/tmp/astro-workspaces/node_modules/astro/dist/cli/add/index.js:170:31
  Code:
    169 |     case 3 /* failure */: {
    > 170 |       throw createPrettyError(new Error(`Unable to install dependencies`));
          |                               ^
      171 |     }
      172 |   }
      173 |   const rawConfigPath = await resolveConfigPath({ cwd, flags, fs: fsMod });
  Stacktrace:
Error: Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
    at add (file:///private/tmp/astro-workspaces/node_modules/astro/dist/cli/add/index.js:170:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runCommand (file:///private/tmp/astro-workspaces/node_modules/astro/dist/cli/index.js:103:7)
    at async cli (file:///private/tmp/astro-workspaces/node_modules/astro/dist/cli/index.js:155:5)

@tony-sull I'm not able to reopen this issue here, but I dont want to create a new issue to keep it relevant to the discussion here.

[xn1cklas]

Can confirm, it seems to be related with workspaces or something. Ran into this in a turbo monorepo with pnpm workspaces

[zohaibakber]

Still getting this error in sst monorepo @nsquaredotone did you find any solution to this?

[prodkt]

Same issue in an Astro Turborepo. Node 18, Astro 3.3.5. I don't see a resolution in this thread, but there must be if its closed. For those of us coming in down the line please present path to accurate implementation.