站长

梵

@梵总 ./components/Common/CKEditor.js
Module not found: Can't resolve '../../lib/ckeditor5-build-dna' in '/Users/dcai/Projects/next-feathers/next/components/Common'
could be folder naming issue.

梵

Weird!
The code block version is 19.0.0 or 20.0.0?
npm install --save @ckeditor/ckeditor5-code-block
installed 20.0.0 which is not compatible to archived https://github.com/ckeditor/ckeditor5-build-classic (up to 19.0.0)
Which causes ckeditor-duplicated-modules

梵

Module not found: Can't resolve '../../lib/ckeditor5-build-dna' in '/Users/dcai/Projects/next-feathers/next/components/Common'

Because missing package.json

梵

Use PATH instead of PUT, because PUT is idempotent.
To use PUT, you have to put in all fields exception timestamp, but timestamp will never been updated.
Use PATH to update partial data, and updatedAt will be automatically updated.

梵

import React from "react";
import { withApollo } from "react-apollo";
// import S3FileUpload from "react-s3";
import S3 from "aws-s3";
// import { Link } from "react-router-dom";

// material-ui icons
// import Assignment from "@material-ui/icons/Assignment";
import CloudUploadIcon from "@material-ui/icons/CloudUpload";
// core components

import Button from "components/CustomButtons/Button.jsx";

// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";

// core components
import FormControl from "@material-ui/core/FormControl";
import regularFormsStyle from "assets/jss/material-dashboard-pro-react/views/regularFormsStyle";

import { GET_SECRET } from "../../graphql/User";
import { CHECK_FILE } from "../../graphql/FileManager";
import { RUN } from "../../graphql/Command";

import config from "../../config";

class Upload extends React.Component {
  state = {
    awsS3Config: {}
  };
  handleChangeFile = async event => {
    console.log(this.state.awsS3Config);
    const file = event.target.files[0];
    console.log(file);
    const fileName = file.name.trim().replace(/[^a-zA-Z0-9.]+/g, "-");
    //8233-2.jpg
    const newFileName = fileName
      .split(".")
      .slice(0, -1)
      .join(".");
    //8233-2;

    const newFile = new File([file], fileName, { type: file.type });
    const S3Client = new S3({
      ...this.state.awsS3Config,
      s3Url: config.s3.BASE_URL
    });
    S3Client.uploadFile(newFile, newFileName)
      .then(async res => {
        // console.log(res);
        let fileUrl = res.location;
        if (config.s3.COULD_URL) {
          fileUrl = fileUrl.replace(config.s3.BASE_URL, config.s3.COULD_URL);
        }
        const filePath = res.key;

        if (process.env.REACT_APP_N_ENV === "stage") {
          const { data } = await this.props.client.query({
            query: CHECK_FILE,
            variables: { fileUrl: fileUrl }
          });
          // console.log(data);
          const fileExist = data.checkFile;
          if (fileExist) {
            await this.props.client.query({
              query: RUN,
              variables: { command: "invalidate", filePath: filePath }
            });
          }
        }
        this.props.handleFileUploaded({
          url: fileUrl,
          size: file.size,
          fileType: file.type
        });
      })
      .catch(err => console.log(err));
    //Make a request to server and send formData
  };

  async componentDidMount() {
    const { data } = await this.props.client.query({
      query: GET_SECRET,
      fetchPolicy: "network-only",
      variables: { secretId: config.awsS3 }
    });
    this.setState({
      awsS3Config: JSON.parse(data.getSecret)
    });
  }

  render() {
    const { classes } = this.props;
    return (
      <FormControl>
        <input
          className={classes.input}
          id="contained-button-file"
          multiple
          type="file"
          onChange={this.handleChangeFile}
          style={{ display: "none" }}
        />
        <label htmlFor="contained-button-file">
          <Button variant="contained" component="span">
            Upload <CloudUploadIcon className={classes.rightIcon} />
          </Button>
        </label>
      </FormControl>
    );
  }
}

export default withApollo(withStyles(regularFormsStyle)(Upload));

梵

dcai@ICF2009542 next-feathers % npm list -g --depth 0
/Users/dcai/.nvm/versions/node/v10.19.0/lib
├── @feathersjs/cli@4.3.0
├── create-next-app@9.3.5
├── csvtojson@2.0.10
├── UNMET PEER DEPENDENCY eslint@7.0.0
├── eslint-plugin-react@7.19.0
├── knex@0.20.10
├── mongoose@5.9.6
├── npm@6.13.4
├── npm-check-updates@4.0.4
└── serverless@1.67.3

npm ERR! peer dep missing: eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0, required by eslint-plugin-react@7.19.0
dcai@ICF2009542 next-feathers % npm install -g eslint
/Users/dcai/.nvm/versions/node/v10.19.0/bin/eslint -> /Users/dcai/.nvm/versions/node/v10.19.0/lib/node_modules/eslint/bin/eslint.js

eslint@7.3.1
added 2 packages from 4 contributors, removed 31 packages, updated 17 packages and moved 2 packages in 4.464s
dcai@ICF2009542 next-feathers % npm list -g --depth 0
/Users/dcai/.nvm/versions/node/v10.19.0/lib
├── @feathersjs/cli@4.3.0
├── create-next-app@9.3.5
├── csvtojson@2.0.10
├── UNMET PEER DEPENDENCY eslint@7.3.1
├── eslint-plugin-react@7.19.0
├── knex@0.20.10
├── mongoose@5.9.6
├── npm@6.13.4
├── npm-check-updates@4.0.4
└── serverless@1.67.3

npm ERR! peer dep missing: eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0, required by eslint-plugin-react@7.19.0
dcai@ICF2009542 next-feathers % npm install -g eslint-plugin-react
npm WARN eslint-plugin-react@7.20.3 requires a peer of eslint@^3 || ^4 || ^5 || ^6 || ^7 but none is installed. You must install peer dependencies yourself.

eslint-plugin-react@7.20.3
added 1 package from 1 contributor, removed 7 packages and updated 7 packages in 1.942s
dcai@ICF2009542 next-feathers % npm list -g --depth 0
/Users/dcai/.nvm/versions/node/v10.19.0/lib
├── @feathersjs/cli@4.3.0
├── create-next-app@9.3.5
├── csvtojson@2.0.10
├── eslint@7.3.1
├── eslint-plugin-react@7.20.3
├── knex@0.20.10
├── mongoose@5.9.6
├── npm@6.13.4
├── npm-check-updates@4.0.4
└── serverless@1.67.3

梵

apiGateway:
binaryMediaTypes:
- '/'

client- file -> apiGatway -> labmda -> apollo server lambda -> file (promise)

retrun createReadStream (currpet)

client file -> appollo server lambda -> file (promise)

retrun createReadStream (good)

demo has no awsupload changes
update awsupload in download-api branch

merge download--api brnahcin to demo

keep on updating awsupload in demo (althogh those are not necessary)

merge download-api into demo ---- awasupload in download-api does not overrite the

梵

Amazing solution to solve that GraphQL does not support File as resolver.
https://stackoverflow.com/questions/54983080/return-file-from-graphql-resolve

getObject to Base64
https://stackoverflow.com/questions/54181863/node-js-aws-lambda-getobject-to-base64

梵

By the time of this writing, the latest NodeJS is V14.3.0, so there is no meaning to install Node6, which is no longer supported.

But I still wanted to give it a try, by following those commands:

# Install Node.js 6.x repository
curl -sL https://deb.nodesource.com/setup_6.x | bash -

# Install Node.js and npm
apt-get install -y nodejs

Unfortunately, I got not just warnings, but it's failed to installed.
Then I gave up, and tried to install the higher version of NodeJS by following this tutorial:
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-centos-8

But I stuck at this command:

sudo dnf module list nodejs

It throw the errors:

Failed to download metadata for repo 'nodesource'

Believe it or not, it's not easy to find out the solution from Google. Finally, I figured it out at: https://www.cyberciti.biz/faq/centos-redhat-fedora-linux-remote-yum-repo-configuration/

But in my case, I need to remove the repo, I installed when I tried to install NodeJS6, which are:

cd /etc/yum.repos.d/
sudo rm nodesource-el8.repo

cd /etc/pki/rpm-gpg/
sudo rm NODESOURCE-GPG-SIGNING-KEY-EL

sudo yum clean all

Happy Installing!

梵

NEXTJS是SSR，所以使用一些客服端的模块，会出现一些问题，比如window undefined，navigator undefined，等等。
可以通过dynamic的方法，把这些客服端的模块排除在SSR之外：
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

站长

@梵总

梵总 发布的帖子

梵总发布的帖子