'react' - 运行 npm start 后，它给出 ./src/contentful.js 找不到模块：无法解析 'C:\\Users\\..\\my-blog\\src' 中的 'contenful'

Question

I ran npm install, got the node modules and packages but when I run npm start I get this error:

./src/contentful.js
Module not found: Can't resolve 'contenful' in 'C:\\Users\\Dannis\\my-blog\\src'

I tried to remove package-json.lock , run npm install and npm start afterward and still got the same block. (Also tried npm update , npm install and npm start , still same bug).

This is how my package.json looks like:

{
  "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"
    ]
  }
}

I tried to install react-router-dom, react-markdown and history and I get this error:

Cannot read property 'match' of undefined.

Any ideas?

Answer 1

@user8555937 i ran npm version got this:

{ 
'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' 
}

@PedroMutter code for ./src/contentful.js:

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 }

UPDATE: just ran an npm update and now I get:

./src/contentful.js Line 1:16: 'contentful' is not defined no-undef

Answer 2

As you are running it in a browser, try to import the contentful library using es6 import , you are mixing it with 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 }