未找到反应模块 - 如何在反应中导入模块

时间:2021-02-20 17:27:51

标签: javascript reactjs

我最近开始学习 React,但现在我在导入 App.js 中的组件之一时遇到问题

我目前的结构是:

src
--components
----Nav
------Nav.jsx
--App.js

在我的 App.js 中,我有:

import Nav from './src/components/Nav/Nav';

但是,我收到以下错误:

./src/App.js
Module not found: Can't resolve './src/components/Nav/Nav' in 'PATH_TO_PROJECT/project/src'

我的 webpack.config.js 是:

const path = require("path");

module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module:{
        rules:[{
            loader: 'babel-loader',
            test: /\.js$|jsx/,
            exclude: /node_modules/
        }],
        exports: {
            resolve: {
                extensions:['.js','.jsx']
            }
        }
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public')
    }
}

这也是我的package.json

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "bootstrap": "^4.6.0",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "webpack serve",
    "eject": "webpack --watch"
  },
  "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/core": "^7.12.3",
    "@babel/preset-env": "^7.12.17",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.0"
  }
}

我想知道我做错了什么?

1 个答案:

答案 0 :(得分:1)

由于错误的项目路径规范而发生错误。 src 是 React 应用程序的源目录。 导入时使用以下内容

val result = df.select(
    col("table_name"),
    regexp_replace(col("table_name"), "\\.[^,]+(,|$)", "$1").as("DBName"),
    regexp_replace(col("table_name"), "(^|,)[^,]+\\.", "$1").as("Table")
)

result.show(false)
+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------------------------------------------------------------+
|table_name                                                                                                                                                                                                                                                           |DBName                                                                                                  |Table                                                                                                                                                       |
+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------------------------------------------------------------+
|tradingpartner.parent_supplier,lookup.store,lab_promo_invoice.tl_cc_mbr_prc_wkly_inv,lab_promo_invoice.mpp_club_card_promotion_funding_view,lab_promo_invoice.supplier_sale_apportionment_cc,tradingpartner.supplier,stores.rpm_zone_location_mapping,lookup.calendar|tradingpartner,lookup,lab_promo_invoice,lab_promo_invoice,lab_promo_invoice,tradingpartner,stores,lookup|parent_supplier,store,tl_cc_mbr_prc_wkly_inv,mpp_club_card_promotion_funding_view,supplier_sale_apportionment_cc,supplier,rpm_zone_location_mapping,calendar|
+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------------------------------------------------------------------------+