'react' - 运行 npm start 后，它给出了./src/contentful.js Module not found: Can't resolve 'contenful' in 'C:\Users\..\my-blog\src'

Question

我运行了 npm install，得到了节点模块和包，但是当我运行 npm start 时，我得到了这个错误：

./src/contentful.js
未找到模块：无法解析“C:\Users\Dannis\my-blog\src”中的“内容”

我尝试删除package-json.lock，然后运行npm install 和npm start，但仍然得到相同的块。 （也试过npm update、npm install和npm start，还是一样的bug）。

这就是我的 package.json 的样子：

{
  "name": "my-blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "contentful": "^7.13.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0",
    "touch": "^3.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我尝试安装 react-router-dom、react-markdown 和 history，但出现此错误：

无法读取未定义的属性“匹配”。

有什么想法吗？

Answer 1

@user8555937 我运行 npm 版本得到了这个：

{ 
'my-blog': '0.1.0', 
npm: '6.13.7', 
ares: '1.15.0', 
brotli: '1.0.7', 
cldr: '35.1', 
http_parser: '2.9.3', 
icu: '64.2', 
llhttp: '2.0.4', 
modules: '72', 
napi: '5', 
nghttp2: '1.40.0', 
node: '12.16.0', 
openssl: '1.1.1d',
tz: '2019c', 
unicode: '12.1', 
uv: '1.34.0', 
v8: '7.8.279.23-node.31', 
zlib: '1.2.11' 
}

./src/contentful.js 的@PedroMutter 代码：

const client = require('contentful').createClient({
  space: 'urer2vtwz5u1',
  accessToken: 'H31gCjOrReWAIbKiBWwBCtYF0_iw5kSVjZxh1FyHzNk'
})

const getBlogPosts = () => client.getEntries().then(response => response.items)

const getSinglePost = slug =>
  client
    .getEntries({
      'fields.slug': slug,
      content_type: 'blogPost'
    })
    .then(response => response.items)

export { getBlogPosts, getSinglePost }

更新：刚刚运行了一个 npm 更新，现在我得到了：

./src/contentful.js 第 1:16 行：'contentful' 未定义 no-undef

Answer 2

当您在浏览器中运行它时，尝试使用 es6 import 导入 contentful 库，您正在将其与 Commonjs 混合：

import * as contentful from 'contentful';


const client = contentful.createClient({
  space: 'urer2vtwz5u1',
  accessToken: 'H31gCjOrReWAIbKiBWwBCtYF0_iw5kSVjZxh1FyHzNk'
})

const getBlogPosts = () => client.getEntries().then(response => response.items)

const getSinglePost = slug =>
  client
    .getEntries({
      'fields.slug': slug,
      content_type: 'blogPost'
    })
    .then(response => response.items)

export { getBlogPosts, getSinglePost }