尝试与 React .js App 同时运行我的 node.js 服务器并得到：'ERR_MODULE_NOT_FOUND'

Question

我已经为我在 React 中构建的电子商务网站设置了一个服务器，并尝试同时运行 React 应用程序和服务器，但不断出现错误 - 并且在解决它们之后会出现更多错误。我没有找到在线修复工作。

我使用 npm run dev 在开发服务器中运行应用程序并同时运行节点服务器（包含 package.json 并显示我如何设置它） - 但是我收到以下警告和错误：

我不知道为什么它找不到它正在谈论的模块，因为文件在那里并导入等等。相关代码发布在下面。

package.json:

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "node-env-run server --exec nodemon | pino-colada",
    "dev": "run-p server start"
  },
  "type": "module",
  "keywords":[
    "ES",
    "MODULES",
    "NODE",
    "MODULES",
    "JS"
  ],
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/node": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-pino-logger": "^5.0.0",
    "node-env-run": "^4.0.2",
    "nodemon": "^2.0.7",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^2.1.0"
  },
  "proxy": "http://localhost:3001"

}

服务器/index.js：

import data from './data';

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/prodcuts', (req, res) => {
  
  res.setHeader('Content-Type', 'application/json');
  res.send(data.products);
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

服务器/data.js：

const data = {
    products: [
    {
        _id: '1',
        name: 'Charizard',
        category: 'Pokemon Cards',
        image: '/Images/d1.jpg',
        price: 60,
        rating: 4.5,
        numReview: 10
    },
    {
        _id: '2',
        name: 'Squirtle',
        category: 'Pokemon Cards',
        image: '/Images/d2.jpg',
        price: 30,
        rating: 4.1,
        numReview: 10
    },
    {
        id: '3',
        name: 'Mew',
        category: 'Pokemon Cards',
        image: '/Images/d3.jpg',
        price: 500,
        rating: 4.8,
        numReview: 10
    }

]
}

export default data;

如果还有什么需要补充的请告诉我！

Answer 1

我遇到了同样的问题，只需要我在导入时添加文件扩展名

import data from './data.js'