Category: javascript

I am trying to change the string displayed in the frontend by using function in javascript.

let displayword = document.getElementById(“displayword”)
console.log(displayword.innerText) //apple

Say, I want the change the letter “l” to something else say “i” but keep the rest of the letters unchanged how do I go around this?

Things I have tried

displayword.innerText[3] = “i”           // -----does nothing----

I am confused why the above code using index does nothing, while the below does something

dash.innerText += “i”      //applei

Extra question: Why does the above code using =+ change the formatting of the innerText? I want to keep the large font but it changes to regular font of the element (here I am using h1).

Thank you:)

I made this website with an accordion menu in a sidebar on mobile, and there is one little problem i can not solve.

If you look at the page https://lieth-schule.de and open the sidebar on a mobile device (button underneath the image banner) you can see the accordion menu. If you now open a submenu, you can only scroll if you exactly hit the scrollbar of the whole sidebar.

What do I have to change in order to be able to scroll the entire sidebar, when touching and holding anywhere inside it? Like you would do on a mobile touch device?

I am writing an VueJS app that displays a map using MapboxGL API, but I struggle when using their direction API.
When I try to install the package with the npm i @mapbox/mapbox-gl-directions, it displays this error:

(base) alexlbr client (master) >> npm install @mapbox/mapbox-gl-directions
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/mapbox-gl
npm ERR!   mapbox-gl@"^2.6.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer mapbox-gl@"^0.41.0 <2.0.0" from @mapbox/[email protected]
npm ERR! node_modules/@mapbox/mapbox-gl-directions
npm ERR!   @mapbox/mapbox-gl-directions@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/alexlbr/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexlbr/.npm/_logs/2021-12-29T14_50_37_269Z-debug.log

No matter what I try, I do not manage to use the mapbox-direction plugin.
Tell me if you have an idea.

Thanks for your help.

I have changed the value of dialogVisible to true, but the dialog box just doesn’t display

I modified the dialogVisible value of the subcomponent to true through ref, and passed the ID of each piece of data through props. I think there is nothing wrong with what I did. Originally, I wanted to implement the modification function, but now I can’t even display the dialog box. Can someone help me?

parent component

<template>
<div>
  <NavMenu></NavMenu>
  <listQuery></listQuery>
  <DialogAddAffairsType></DialogAddAffairsType>
  <el-table :data="tableData" stripe fit class="el-table" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>
    <el-table-column prop="typename" label="类型名称" width="180">
    </el-table-column>
    <el-table-column prop="createdAt" label="创建时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row.id)">编辑(edit)</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 前组件后数据 -->
  <editAffairsType :editAffairsType="affairsTypeId" ref="editAffairsType"></editAffairsType>
  <Pager></Pager>
</div>
</template>

<script>
import axios from "axios";
import ListQuery from "@/components/ListQuery/index.vue";
import DialogAddAffairsType from "@/components/DialogAddAffairsType/index.vue";
import Pager from "@/components/Pager/index.vue";
import NavMenu from "@/components/NavMenu/index.vue";
import editAffairsType from "@/components/DialogAffairsType/index.vue";

export default {
  name: 'AffairsTypeList',
  components: {
    ListQuery,
    DialogAddAffairsType,
    Pager,
    NavMenu,
    editAffairsType,
  },
  methods: {
    getAllAffairsTypes() {
      axios({
        method: 'GET',
        url: 'http://localhost:8080/api/affairsType/allAffairsTypes'
      }).then(response => {
        const data = response.data;
        console.log("是否取到数据", data);
        this.tableData = data;
      })
    },
    handleDelete(id, index) {
      this.$confirm("永久删除该事务类型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios({
            method: 'DELETE',
            url: 'http://localhost:8080/api/affairsType/deleteById',
            params: {
              id: id
            }
          }).then(response => {
            if (response.status == 200) {
              this.tableData.splice(index, 1);
            }
          })
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(id) {
      this.affairsTypeId = id;
      this.$refs.editAffairsType.dialogVisible = true;

      console.log("数据准备成功")
      console.log(this.change[0])

      return this.affairsTypeId;
    }
  },
  // 在实例创建完成后被立即同步调用(https://cn.vuejs.org/v2/api/#created)
  created() {
    this.getAllAffairsTypes();
  },
  data() {
    return {
      tableData: [],
      affairsTypeId: "",
    }
  }
}
</script>

<style>
.el-table {
  margin: 0 auto;
}
</style>

child component

<template>
<div>
  <el-dialog title="修改事务类型" :visible.sync="dialogVisible" width="35%">
    <span>
      <el-form :model="AffairsType" :label-position="labelPosition" label-width="auto">
        <el-form-item label="类型名称" required>
          <el-input v-model="AffairsType.typename" :placeholder="placeholder.typename" style="width:50%"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "editAffairsType",
  // https://www.bilibili.com/video/BV1Zy4y1K7SH?p=66
  props: {
    affairsTypeId:{
      // type:Number,
      // required:true,
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    // change() {
    //   this.dialogVisible = this.changeAffairsType.dialogVisible;
    // },
  },
  created(){
  },
}
</script>

<style>

</style>

Right now, this regex is doing the opposite of what I want. It’s removing everything that’s inside double quotes:

  const text = `"This is inside quotes."
  
This is outside quotes.
  
"This is inside quotes," I said.`
  
const quotesRegex = /((")[^"n]*)("|n)/g
const result = text.replace(quotesRegex, '')
  
console.log(result)

How can invert this regex so it removes everything that’s NOT inside double quotes? In other words, in my example, only "This is inside quotes." and "This is inside quotes," will remain.

Note: the regex might not be perfect, but it has worked for me for years.

Note 2: it also matches when there’s an opening quote and a new line without a closing quote.

How Can I set the antd Datepicker language to french?

I tried this :

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker, Space, ConfigProvider } from "antd";
import frFR from "antd/lib/locale/fr_FR";

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <Space direction="vertical">
    <ConfigProvider locale={frFR}>
      <DatePicker
        onChange={onChange}
        defaultValue={moment("2015-01-01", "YYYY-MM-DD")}
      />
    </ConfigProvider>
  </Space>,
  document.getElementById("container")
);

The preview language is still in English.

Here is a running code:
https://codesandbox.io/s/basic-antd-datepicker-language-n9ue7

hi I want to remove an object inside the array of objects and I am doing this

router.post("/delVendAttach", async (req, res) => {
  try {
    let vend = await Vendors.findOneAndUpdate({ "level1.email": req.body.email }, {
      $pull: {
        "level2.attachments": {
          _id: req.body.id
        }
      }
    })
    return res.status(200).send("Attachment Deleted Successfully");
  } catch (error) {
    console.log("error", error);
    return res.status(400).send(error);
  }
});

Here is the img of db collection

I have this simple read more JS function. I want to reuse it, what’s the best practice for this? For example, below, I have two read more buttons but I have to copy paste the function and some number to it to use it. Not the cleanest way, what’s a better way around this?

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

function myFunction2() {
  var dots = document.getElementById("dots2");
  var moreText = document.getElementById("more2");
  var btnText = document.getElementById("myBtn2");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

#more {display: none;}
#more2 {display: none;}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction2()" id="myBtn2">Read more</button>

I’m just trying to generate a build using parcel build /src/index.html,
I’m able to build the app, but when I try to open the build form a browser, it says it is unable to access index.js from index.html after build.

<body>
    <div id="root"></div>
    <script src="index.js" type="module"></script>
</body>

Anyway, Im having no issues on running the project locally.
Please take a look at the images below to understand my concern.
Thanks.

Console error after opening index.html from build

Project structure

I tried to load file (239 Mb, 251 356 410 bytes) and got RangeError: invalid array length on Array.from. Then I wanna make JSON.stringify for the read data and send it by API. Files can be even larger. Please help me solve this issue.

const uint8Array = new Uint8Array(fileReader.result);
const intArray = Array.from(uint8Array);

I have two divs with width: 50% and text content inside that are wrapped in the container. The problem is that when text content changes, width also changes:

I have a fixed width of the container equal to 200px:

.container {
  display: block;
  width: 200px;
}

.text1 {
  background-color: red;
  width: 50%;
  display: inline;
}

.text2 {
  background-color: blue;
  width: 50%;
  display: inline;
}

<div class='container'>
  <div class='text1'>Text1</div>
  <div class='text2'>Text2</div>
</div>

How I can keep 50% of child div width even when text is changing?
Link to JSFiddle:

how to access a property for an object within object. I have output like below when i log the value to browser console.

output **** {output: {...}}

when i expand the output i see

output {
    completed: "10",
    total: "20",
}

what i have tried?

i am trying to access the complete property like so

output.completed

but this gives undefined. how should i access completed value?

in this case the expected output is 10.

could someone help me with this thanks.

I am having some major issues trying to render multiple images to my Vue.js frontend from a static folder in my Django project. I can get one image showing without issues but it does not seem to work for multiple images. My images are uploaded via the admin section of the app. Any help would be really appreciated I have spent days on this!!!!!

Here is my models.py:

class Lesson(models.Model):
    DRAFT = 'draft'
    PUBLISHED = 'published'

    CHOICES_STATUS = (
        (DRAFT, 'Draft'),
        (PUBLISHED, 'Published')
    )

    ARTICLE = 'article'
    QUIZ = 'quiz'

    CHOICES_LESSON_TYPE = (
        (ARTICLE, 'Article'),
        (QUIZ, 'Quiz')
    )

    course = models.ForeignKey(Course, related_name='lessons', on_delete=models.CASCADE)
    title = models.CharField(max_length=255)
    slug = models.SlugField()
    short_description = models.TextField(blank=True, null=True)
    long_description = models.TextField(blank=True, null=True)
    status = models.CharField(max_length=20, choices=CHOICES_STATUS, default=PUBLISHED)
    lesson_type = models.CharField(max_length=20, choices=CHOICES_LESSON_TYPE, default=ARTICLE)
    image = models.ImageField(upload_to='uploads/', blank=True, null=True)
   
    def __str__(self):
        return self.title


class LessonImage(models.Model):

    lesson_image = models.ForeignKey(Lesson, related_name='images', on_delete=models.CASCADE)
    image = models.ImageField(upload_to ='uploads/')

    def save(self, *args, **kwargs):
       super(LessonImage, self).save(*args, **kwargs)
       img = Image.open(self.image.path)
       if img.height > 1125 or img.width > 1125:
           img.thumbnail((1125,1125))
       img.save(self.image.path,quality=70,optimize=True)

    def get_images(self):
        if self.lesson_image:
            return settings.WEBSITE_URL + self.lesson_image.url

And my serializers.py. * Im not sure I needed to implement the image models in the serializers but I have tried this to test:

class LessonListSerializer(serializers.ModelSerializer):

    class Meta:
        model = Lesson
        fields = ('id', 'title', 'slug', 'short_description', 'long_description', 'images')

class LessonImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = LessonImage
        fields = ('id', 'slug', 'lesson_image', 'get_images')

My vue template (section):

                    <div class="column is-10">
                        <template v-if="$store.state.user.isAuthenticated">
                            <template v-if="activeLesson">
                                <h2>{{ activeLesson.title }}</h2>
                                
                                {{ activeLesson.long_description }}
                            <img v-for="(images, index) in activeLesson.images" 
                                  :src="get_images" :key="index" />
<script>
import axios from 'axios'
export default {
    data() {
        return {
            course: {},
            lessons: [],
            comments: [],
            activeLesson: null,
            errors: [],
            comment: {
                name: '',
                content: ''
            },
            // images:[],
        }
    },
    async mounted() {
        console.log('mounted')
        const slug = this.$route.params.slug
        await axios
            .get(`/api/v1/courses/${slug}/`)
            .then(response => {
                console.log(response.data)
                this.course = response.data.course
                this.lessons = response.data.lessons
            })
        
        document.title = this.course.title + ' | Relate'
    },
    methods: {
        submitComment() {
            console.log('submitComment')
            this.errors = []
            if (this.comment.name === '') {
                this.errors.push('The name must be filled out')
            }
            if (this.comment.content === '') {
                this.errors.push('The content must be filled out')
            }
            if (!this.errors.length) {
                axios
                    .post(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/`, this.comment)
                    .then(response => {
                        this.comment.name = ''
                        this.comment.content = ''
                        this.comments.push(response.data)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
        setActiveLesson(lesson) {
            this.activeLesson = lesson
            this.getComments()
            this.get_lesson_images()
        },
        getComments() {
            axios
                .get(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/get-comments/`)
                .then(response => {
                    console.log(response.data)
                    this.comments = response.data
                })
        }
    }
}
</script>

And finally my admin.py:

class LessonImageAdmin(admin.StackedInline):
    model = LessonImage

class LessonCommentInline(admin.TabularInline):
    model = Comment
    raw_id_fields = ['lesson']



class LessonAdmin(admin.ModelAdmin):
    list_display = ['title', 'course', 'status', 'lesson_type']
    list_filter = ['status', 'lesson_type']
    search_fields = ['title', 'short_description', 'long_description']
    inlines = [LessonImageAdmin, LessonCommentInline]

    class Meta:
        model = Lesson

admin.site.register(Category)
admin.site.register(Course)
admin.site.register(Lesson, LessonAdmin)
admin.site.register(LessonImage)
admin.site.register(Comment)

Please help I have tried everything I know. This is the first project I have done using Vue.js and I’m not finding it very easy!

I am adding signalR to my react project. I’ve installed @microsoft/signalr which seems to be working fine (after a bit of updating other packages). The issue I’m having is, before I even tried to connect to a back end the browser console is showing the following error

WebSocketClient.js:16 WebSocket connection to 'wss://localhost:65043/ws' failed: 
WebSocketClient @ WebSocketClient.js:16
initSocket @ socket.js:21
(anonymous) @ socket.js:45

I have no idea where is attempt to connect is being initiated. I’m not sure if its even an issue but I am very new to signalR and web sockets in general so I’d just like a bit of clarification.

I’m currently in the process of migrating a create-react-app (CRA – v4) monorepo Webpack setup to an NX Monorepo powered by vite.

I’m currently stuck in trying to figure out how to solve the typical

Uncaught ReferenceError: React is not defined

Which happens whenever a file doesn’t import React directly, but has a named import from it, such as:

import { memo } from 'react';

I’ve ran the linter that removed all the import React statements, and I’d be daunting to through hundreds and hundreds of files to add it again.

Here’s more info:

• I believe I’m using the newest JSX transform and React 17.
• nx-plugin-vite: ^1.1.0
• vite: ^2.7.1
• vite-tsconfig-paths: ^3.3.17
• vite-plugin-eslint: ^1.3.0
• @vitejs/plugin-react: ^1.1.3
• @nrwl/react”: 13.2.4,
  (More in the package.json)

I’ve also read and read again several sources across GitHub, SO, and the web and haven’t found anything

• https://javascript.plainenglish.io/migrating-a-150k-loc-codebase-to-vite-and-esbuild-how-part-2-3-91b0b873f388
• https://github.com/nordcloud/pat-frontend-template/blob/master/docs/CRA_MIGRATION_GUIDE.md#update-tsconfig-path-aliasing-included
• https://darekkay.com/blog/create-react-app-to-vite/

Here’s my vite.config.ts

import path from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import eslintPlugin from 'vite-plugin-eslint';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), eslintPlugin(), react()],
  resolve: {
    alias: {
      stream: 'stream-browserify',
      '~': path.resolve(__dirname, 'src'),
    },
  },
  server: {
    open: true,
  },
});

Here’s my tsconfig.json:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": ["./src"]
}

And the base tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "isolatedModules": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@schon/legacy-components/*": ["apps/app/src/components/*"],
      "@schon/graphql/*": ["apps/app/src/graphql/*"],
      "@schon/hooks/*": ["libs/components/src/hooks/*"],
      "@schon/components/*": ["libs/components/src/ad/*"],
      "@schon/legacy-components2/*": ["libs/components/src/stories/*"],
      "@schon/theme": ["libs/components/src/styles/index.ts"],
      "@schon/typings": ["libs/components/src/typings/index.ts"],
      "@schon/utils": ["libs/components/src/utils/index.ts"],
      "~/*": ["apps/app/src/*"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

project.json:

{
  "root": "apps/app",
  "projectType": "application",
  "sourceRoot": "apps/app/src",
  "tags": [],
  "targets": {
    "serve": {
      "executor": "nx-plugin-vite:serve",
      "options": {
        "configFile": "apps/app/vite.config.ts",
        "port": 3001,
        "host": false,
        "https": false
      }
    },
    "preview": {
      "executor": "nx-plugin-vite:preview",
      "options": {
        "configFile": "apps/app/vite.config.ts"
      }
    },
    "build": {
      "executor": "nx-plugin-vite:build",
      "options": {
        "outDir": "dist",
        "configFile": "apps/app/vite.config.ts",
        "watch": false,
        "write": true,
        "emitAtRootLevel": false,
        "manifest": true
      }
    }
  }
}

Here’s one of the files that is giving me problems (Throws me the React is not defined):
(This one comes from a component repo that is being handled by storybook)

import { memo } from 'react';
import { Container as MaterialContainer } from '@material-ui/core';
import { ThemeSpecs } from '../../../styles/theme';

type ContainerProps = {
  children?:
    | JSX.Element
    | JSX.Element[]
    | React.ReactNode
    | React.ReactChildren;
  className?: string;
};

/**
 * Jose decided to wrap this up, in case we needed to apply a general styling to the container
 * itself, and avoid repeating it in every other component.
 */
const Component: React.FC<ContainerProps> = (props) => (
  <MaterialContainer
    className={props.className}
    fixed
    style={{ paddingTop: ThemeSpecs.container.paddingTop }}
  >
    {props.children!}
  </MaterialContainer>
);

type withContainerProps = {};

/**
 * This is a HOC so we can use this to Containerize the imports back
 * at root. This way we can choose which routes use Containers
 * and which don't.
 */

export const withContainer = <P extends object>(
  ComponentToContainer: React.ComponentType<P>
) =>
  class WithContainer extends React.PureComponent<P & withContainerProps> {
    render() {
      return (
        <Container>
          <ComponentToContainer {...this.props} />
        </Container>
      );
    }
  };

export const Container = memo(Component) as typeof Component;

package.json

{
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.5.6",
    "@auth0/auth0-react": "^1.8.0",
    "@aws-sdk/client-s3": "^3.44.0",
    "@date-io/date-fns": "^2.11.0",
    "@material-table/core": "^4.3.11",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@material-ui/system": "^4.12.1",
    "@nivo/calendar": "^0.74.0",
    "@nivo/core": "^0.74.0",
    "@nivo/line": "^0.74.0",
    "@nivo/tooltip": "^0.74.0",
    "@reach/router": "^1.3.4",
    "auth0-js": "^9.18.0",
    "aws-appsync-auth-link": "^3.0.7",
    "aws-appsync-subscription-link": "^3.0.9",
    "aws-sdk": "^2.1046.0",
    "clsx": "^1.1.1",
    "core-js": "^3.6.5",
    "d3-array": "^3.1.1",
    "date-fns": "^2.27.0",
    "dotenv": "^10.0.0",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "formik-persist": "^1.1.0",
    "framer-motion": "^5.4.5",
    "fraql": "^1.2.1",
    "graphql": "^16.1.0",
    "husky": "^7.0.4",
    "immer": "^9.0.7",
    "linkifyjs": "^3.0.4",
    "lodash": "^4.17.21",
    "logrocket": "^2.1.2",
    "material-table": "^1.69.3",
    "msw": "^0.36.3",
    "password-validator": "^5.2.1",
    "randomcolor": "^0.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-dropzone-uploader": "^2.11.0",
    "react-elastic-carousel": "^0.11.5",
    "react-error-boundary": "^3.1.4",
    "react-google-docs-viewer": "^1.0.1",
    "react-icons": "^4.3.1",
    "react-intersection-observer": "^8.32.5",
    "react-lazy-load-image-component": "^1.5.1",
    "react-loading-skeleton": "^3.0.1",
    "react-prerendered-component": "^1.2.4",
    "regenerator-runtime": "0.13.7",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.3",
    "suneditor": "^2.41.3",
    "suneditor-react": "^3.3.1",
    "sw-precache": "^5.2.1",
    "tiny-slider-react": "^0.5.3",
    "tslib": "^2.0.0",
    "use-debounce": "^7.0.1",
    "uuid": "^8.3.2",
    "validate-password": "^1.0.4",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@angular-devkit/schematics": "^13.0.4",
    "@babel/core": "7.12.13",
    "@babel/preset-typescript": "7.12.13",
    "@nrwl/cli": "13.2.4",
    "@nrwl/cypress": "13.2.4",
    "@nrwl/eslint-plugin-nx": "13.2.4",
    "@nrwl/jest": "13.2.4",
    "@nrwl/linter": "13.2.4",
    "@nrwl/node": "^13.2.4",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "13.2.4",
    "@nrwl/storybook": "^13.3.0",
    "@nrwl/tao": "^13.2.4",
    "@nrwl/web": "13.2.4",
    "@nrwl/workspace": "^13.2.4",
    "@nxext/react": "^13.0.0",
    "@snowpack/plugin-dotenv": "^2.2.0",
    "@snowpack/plugin-react-refresh": "^2.5.0",
    "@snowpack/plugin-typescript": "^1.2.1",
    "@snowpack/web-test-runner-plugin": "^0.2.2",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "~6.3.0",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/addon-storysource": "^6.4.9",
    "@storybook/builder-webpack5": "~6.3.0",
    "@storybook/manager-webpack5": "~6.3.0",
    "@storybook/react": "~6.3.0",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@types/auth0-js": "^9.14.5",
    "@types/chai": "^4.2.21",
    "@types/jest": "27.0.2",
    "@types/mocha": "^9.0.0",
    "@types/node": "14.14.33",
    "@types/react": "17.0.30",
    "@types/react-dom": "17.0.9",
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/snowpack-env": "^2.3.4",
    "@types/tiny-slider-react": "^0.3.3",
    "@types/uuid": "^8.3.3",
    "@types/yup": "^0.29.13",
    "@typescript-eslint/eslint-plugin": "~4.33.0",
    "@typescript-eslint/parser": "~4.33.0",
    "@vitejs/plugin-react": "^1.1.3",
    "@web/test-runner": "^0.13.17",
    "babel-jest": "27.2.3",
    "babel-loader": "8.1.0",
    "chai": "^4.3.4",
    "cypress": "^8.3.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest": "27.2.3",
    "nx-plugin-snowpack": "^0.3.0",
    "nx-plugin-vite": "^1.1.0",
    "prettier": "^2.3.1",
    "react-test-renderer": "17.0.2",
    "snowpack": "^3.8.8",
    "storybook-theme-toggle": "^0.1.2",
    "ts-jest": "27.0.5",
    "typescript": "~4.4.3",
    "url-loader": "^3.0.0",
    "vite": "^2.7.1",
    "vite-plugin-eslint": "^1.3.0",
    "vite-preset-react": "^2.2.0",
    "vite-tsconfig-paths": "^3.3.17"
  }
}

The nx.json:

{
  "npmScope": "schon",
  "affected": {
    "defaultBase": "main"
  },
  "cli": {
    "defaultCollection": "@nrwl/react"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
      }
    }
  },
  "targetDependencies": {
    "build": [
      {
        "target": "build",
        "projects": "dependencies"
      }
    ]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "babel": true
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "defaultProject": "app"
}