在 MacBook Pro M1 芯片上运行npm run dev( gatsby develop) 并退出 Error: Something went wrong installing the "sharp" module

运行npm run dev MacBook Pro 英特尔芯片工作正常。

我看过类似的帖子，但没有解决我的问题：

• 当我运行“gatsbydevelopment”时，安装“sharp”模块出现错误，显示错误
• 安装 Gatsby Starter 时出错“安装“sharp”模块时出错”
• Gatsby Develop：安装“sharp”模块时出错

我已经更新了我的节点版本，以防进行任何修复，但仍然出现错误node v16.0.0

在这个github 问题上，他们建议遵循这些不起作用的步骤。

rm -r node_modules/sharp
yarn install --check-files

Run Code Online (Sandbox Code Playgroud)

在这个github 问题上，他们建议安装NVM和降级节点版本。NVM 在我的 M1 芯片上安装有一些困难，所以它对我来说不是一个好的选择。

我也尝试过执行以下步骤，但效果不佳

rm -rf node_module
rm package-lock.json
npm i 

知道如何修复gatsby developM1 芯片吗？

使用 NextJS 的字体

我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题。

我做的[ wait ] compiling ...时候得到的：

@font-face {
    font-family: 'montserrat';
    src: url('./mypath/Montserrat-Medium.woff2') format('woff2'),
        url('./mypath/Montserrat-Medium.woff') format('woff'),
        url('./mypath/Montserrat-Medium.ttf') format('truetype'),
        url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
}

没有错误，或者只是编译......我读过（stackoverflow/57590195）它说我们应该使用像这样的静态路径

@font-face {
    font-family: 'font';
    src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
}

但该解决方案根本不起作用。它几乎似乎工作正常，因为错误（或令人信服的等待）停止了。但是如果你仔细看，你的字体没有加载。

然后我尝试了 fontfaceobserver，我很快就明白问题是一样的。因为你必须font-face使用它，你不能和 NextJS 一起使用它。

下载 next-font 后，我​​阅读了文档并查看了 github 示例。

这是我next.config.js对他们的启发。

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
const withFonts = require('next-fonts');

module.exports = withFonts(
    withCSS(
        withSass({
            enableSvg: true,
            webpack(config, options) {
                config.module.rules.push({
                    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, …

如何让 i18n 在 Next 13 上运行？

我已经创建了一个嵌套[locale]/文件夹app/，但它只给出了 404

查看我的next.config.js

const nextConfig = {
  experimental: {
    appDir: true,
  },
  i18n: {
    defaultLocale: 'fr,
    locales: ['fr', 'en'],
    localeDetection: true
  }
}

您是否找到了使用 React Server 组件支持 i18n 的方法？

编辑：

在beta.nextjs文档上它说：

我们目前不打算在应用程序中包含以下功能： 国际化 (i18n)

我还发现了一个有关它的未解决问题，但尚未提供任何解决方法。

我尝试在三个全局视图中保留状态.我有MovieRow在Popular收藏夹和Search组件中调用的组件.目标是组件MovieRow在此视图中调用时保持其状态(Popular...)

例如,如果我有2部电影,我检查了一部电影,以添加到收藏夹,这部电影应保持状态.现在,如果我在单击并更改全局视图时将影片添加到收藏夹列表,则组件MovieRow将再次装入并重置状态.

我尝试了很多不同的方法.使用条件渲染将状态存储为一个全局变量给我MovieRow和其他人.

编辑:你可以在这里看到完整的代码https://codesandbox.io/s/lpjp0oxmmq

编辑2:我成功存储我的状态,但我无法正确使用成功.

componentWillUnmount () {
    let storeState = localStorage.setItem('someSavedState', JSON.stringify(this.state))
    console.log(" ------------------- unmount ------------------- ")
    console.log(JSON.parse(localStorage.getItem('someSavedState')))
    console.log(" ------------------- ------- ------------------- ")
}

componentWillMount() {
    const rehydrate = JSON.parse(localStorage.getItem('someSavedState'))
    console.log(" ------------------- will mount ------------------- ")
    console.log(rehydrate)
    console.log(" ------------------- ---- ----- ------------------- ")
    // this.setState({isFaved: rehydrate})
}

你有没有想过谁帮助我？

我们看到国家迷失在这张照片中.依赖于状态的按钮的颜色已被重置.

查看受欢迎的第一部电影添加到fav

用fav电影查看最爱

MoviesRow.js:

import React from 'react'
import '../css/MovieRow.css';
import { APIKEY, baseURL } from …

上下文是什么？

我有一个网站，它是一个页面，我将在其中展示我的活动和项目 滚动几个部分后，我们有一个连续的项目。

我想做的事 ？

当我们到达我的项目行时，我想将垂直滚动切换到水平线。当您在行的末尾时，它只需要通过垂直滚动恢复正常。

编码

<div className="projectsContainer">     // <--- height 100vh
    <div className="row projects">     //  <--- Positioned in the middle of the parent ?
        <project1  />
        <project2  />
        <project3  />
        <project4  />
        <project5  />
    </div>
</div>

我的代码是什么？我的想法

我有一个inTheMiddle()布尔方法。如果<div className="row projects">位于视口的中间，则返回trueelse false。

一个scrollDirection()也是布尔值的方法，当它true向上滚动时向下滚动false。

许多不同的方法disableScroll()最后 disableScroll()一种方法通过重新计算来取消滚动

componentDidMount() {
     window.addEventListener('wheel', (this.handleScroll));
}
...
disableScroll() {
    // Get the current page scroll position 
    const scrollTop = …

更新到 nextjs 后，10.1.3启动时出现错误yarn dev。

error - ./public/static/style.scss
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /path_to/node_modules/mini-css-extract-plugin/dist/loader.js
- /path_to/node_modules/next/dist/compiled/webpack/bundle4.js
- /path_to/node_modules/next/dist/compiled/webpack/webpack.js
- /path_to/node_modules/next/dist/next-server/server/config-utils.js
- /path_to/node_modules/next/dist/next-server/server/config.js
- /path_to/node_modules/next/dist/next-server/server/next-server.js
- /path_to/node_modules/next/dist/server/next.js
- /path_to/node_modules/next/dist/server/lib/start-server.js
- /path_to/node_modules/next/dist/cli/next-dev.js
- /path_to/node_modules/next/dist/bin/next

Could not find files for /[lang] in .next/build-manifest.json
Could not find files for /[lang] in .next/build-manifest.json
event - compiled successfully

我发现类似的问题，但它没有解决我的问题。

我删除了软件包和锁定文件，并尝试安装 webpack 等阅读此内容。

这让我犯了另一个错误，关于tap是什么让我这么做的的事情，回到上面的第一个错误。

这是我的next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = …

我在使用 JEST 和 Express 执行测试时遇到错误npm run test。

  console.error\n    Error: Cross origin http://localhost forbidden\n

我见过类似的帖子，如CORS 错误 - 错误：跨源 http://localhost 禁止...没有有效的答案

这是我的测试：

const app = require(\'../app\');\nconst request = require("supertest");\nconst enjoyService = require(\'../services/enjoy.service\');\n\ndescribe(\'/enjoy\', () => {\n    describe("/cinema/:city", () => {\n        test(\'Status is OK\', () => {\n            return enjoyService.listCinema("nantes").then(res => {\n                expect(res.data.status).toBe(\'OK\');\n            });\n        });\n        test(\'Status is 404\', () => {\n            return enjoyService.listCinema("X \xc3\x86 A-XII").catch(err => {\n                expect(err.name).toBe("Error");\n            });\n        });\n    });\n});\n

和enjoy.service使用的波纹管

const …

成功部署我的应用程序后，我单击“打开应用程序”，然后看到此错误：

Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

链接有错误https://fcrg.herokuapp.com/

但它确实可以在本地主机中使用yarn dev cli正常工作

后端应用程序的 package.json ：

{
  "name": "site-web-france",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
    "client": "cd client && yarn start", …

在 next@10 之前，next 没有任何对国际化路由的内置支持。

我使用了next-translate/useTranslation。但是我现在面临的问题是我无法设置该lang属性。

我发现使用功能组件在 next@9.4 中设置属性 lang 的唯一选项document.documentElement.lang = lang对于 SEO 来说不是一个好的做法。

有没有其他方法可以用来动态设置我的 HTML 页面的语言？

这就是我的代码：

   /pages
       - index.js 
       - /[lang]
             - index.js

/页面/index.js

import { useEffect } from 'react'
import Router from 'next/router'

import i18nConfig from '../i18n.json'

const { defaultLanguage } = i18nConfig

export default function Index() {
  useEffect(() => {
    Router.replace(`/${defaultLanguage}`)
  }, [])

  return null
}

/[lang]/index.js

import useTranslation from 'next-translate/useTranslation'
import { getI18nProps, getI18nPaths, withI18n } from '../../utils/i18n'

... …

如何使用形状变形制作圆形 SVG？

我正在尝试通过有机运动来制作圆圈。

但正如你所看到的，像素似乎有问题。

关于如何使它更好看的任何想法？它甚至是我用来做这件事的正确方法吗？我不是 svg 或形状变形方面的专家。

class App extends React.Component {
  render() {
    return (
      <div>
       <svg width="200px" height="200px" viewBox="0 0 120 120">
    <defs>
        <filter id="distort">
            <feTurbulence baseFrequency=".02" type="fractalNoise" />
            <feColorMatrix type="hueRotate" values="0">
                <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite" />
            </feColorMatrix>
            <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="20">
                <animate attributeName="scale" values={Math.round(Math.random() * 20) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';'}  dur="5s" repeatCount="indefinite" />
            </feDisplacementMap>
        </filter>
    </defs>
    <circle filter="url(#distort)" …

我已按照 tailwind https://tailwindcss.com/docs/upgrade-guide的指南进行升级。

但我知道我的离子角度应用程序出现错误

TypeError: Cannot read property '700' of undefined

虽然值在数组中，但我不明白为什么indexOf（）会打印-1。我对函数include（）的结果相同，但返回false。

我想我听不懂或忘记了一些东西。

您是否知道当我们看到值在数组中时为什么结果为负？

谢谢

var i = 0
let array = []

class MovieRow extends React.Component {
    constructor(props) {
        super(props)
        this.addFavorite = this.addFavorite.bind(this)
        this.deleteFavorite = this.deleteFavorite.bind(this)
        this.state = {
            isFaved: false,
            favMovie: ""
        }
    }

    addFavorite() {
        this.setState({isFaved: true})
        this.state.favMovie = "".concat(baseURL, 'movie/', this.props.movie.id ,'?api_key=', APIKEY)    
        var counts = []
        for (var i = 0; i < myFavoriteMovies.length; i++) {
            var index = myFavoriteMovies[i]
            counts[index] = counts[index] ? counts[index] + 1 : 1;
        }       
        if(myFavoriteMovies.indexOf(this.state.favMovie) === -1) {
            myFavoriteMovies.push(this.state.favMovie)  
            localStorage.setItem(this.props.movie.id, …

我尝试将我的组件从react.component 重构为hooks，但遇到了一些麻烦。我真的不明白如何使用我的 state offsetTop。该值已设置，或在我需要时未设置。

第一次尝试：

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
    console.log(offsetTop);
    window.addEventListener('scroll', handleScroll, true)
    return () => window.removeEventListener("scroll", handleScroll);
}, []);

我还尝试将它与第二种方法useEffect一起使用[offsetTop]作为第二个参数，但我的日志显示了两次 undef 和值。我明白为什么它显示两次，但仍然没有解决我的问题，我的条件不起作用。

第二次尝试：

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
}, []);

useEffect(() => {
    console.log(offsetTop);
    window.addEventListener('scroll', handleScroll, true)
    return () => window.removeEventListener("scroll", handleScroll);
}, [offsetTop]);

处理滚动函数：

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
    console.log(offsetTop);
    window.addEventListener('scroll', handleScroll, true)
    return …