找不到模块:错误:无法解析“反应模块测试”

时间:2019-01-09 09:10:05

标签: reactjs npm nexus

我已经将组件发布到我们的私人Sonatype Nexus存储库中。我发布的项目称为react-module-test,并已从存储库成功下载。但是,无法导入已发布项目的组件:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'react-module-test';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
module.hot.accept();
serviceWorker.unregister();

找不到在node_modules中看到的项目。使用npm start启动项目时,出现以下错误消息:

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'react-module-test' in '/path/of/the/project/src'
 @ ./src/index.js 4:0-36 7:36-39
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

webpack.config.js:

const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'deployment'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  devServer: {
    contentBase: '/dist',
    hot: true
  },
  resolve: {
    extensions: [".jsx", ".json", ".js"],
    symlinks: false
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.svg$/,
        loaders: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              jsx: true
            }
          },
        ]
      }
    ]
  }
};

package.json:

{
  "name": "test-app-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-module-test": "^2.1.2",
    "react-router": "^4.4.0-beta.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --display-error-details --open --mode development",
    "build": "webpack --mode build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "react-hot-loader": "^4.6.3",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}
我导入的项目的

index.js:

import 'react-app-polyfill/ie9'; 
import 'react-app-polyfill/ie11';
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

编辑:

这里是完整的错误日志:

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'react-module-test' in '/Users/User/projects/testapp-react/src'
resolve 'react-module-test' in '/Users/User/projects/testapp-react/src'
  Parsed request is a module
  using description file: /Users/User/projects/testapp-react/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/User/projects/testapp-react/src/node_modules doesn't exist or is not a directory
      /Users/User/projects/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/User/projects/testapp-react/node_modules
        using description file: /Users/User/projects/testapp-react/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/User/projects/testapp-react/node_modules/react-module-test/package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/User/projects/testapp-react/node_modules/react-module-test is not a file
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
      looking for modules in /Users/User/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
              /Users/User/projects/testapp-react/node_modules/react-module-test.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/User/projects/testapp-react/node_modules/react-module-test.json doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/User/projects/testapp-react/node_modules/react-module-test.js doesn't exist
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
            as directory
              existing directory
                using path: /Users/User/projects/testapp-react/node_modules/react-module-test/index
                  using description file: /Users/User/projects/testapp-react/node_modules/react-module-test/package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
          /Users/User/node_modules/react-module-test doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
                      /Users/User/projects/testapp-react/node_modules/react-module-test/index doesn't exist
                    .jsx
                      Field 'browser' doesn't contain a valid alias configuration
          /Users/User/node_modules/react-module-test.jsx doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
                      /Users/User/projects/testapp-react/node_modules/react-module-test/index.jsx doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
          /Users/User/node_modules/react-module-test.json doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
                      /Users/User/projects/testapp-react/node_modules/react-module-test/index.json doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
          /Users/User/node_modules/react-module-test.js doesn't exist
                      /Users/User/projects/testapp-react/node_modules/react-module-test/index.js doesn't exist
        as directory
          /Users/User/node_modules/react-module-test doesn't exist
[/Users/User/projects/testapp-react/src/node_modules]
[/Users/User/projects/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/User/projects/testapp-react/node_modules/react-module-test]
[/Users/User/node_modules/package.json]
[/Users/User/projects/testapp-react/node_modules/react-module-test.jsx]
[/Users/User/projects/testapp-react/node_modules/react-module-test.json]
[/Users/User/projects/testapp-react/node_modules/react-module-test.js]
[/Users/User/node_modules/react-module-test/package.json]
[/Users/User/node_modules/react-module-test]
[/Users/User/projects/testapp-react/node_modules/react-module-test/index]
[/Users/User/node_modules/react-module-test.jsx]
[/Users/User/projects/testapp-react/node_modules/react-module-test/index.jsx]
[/Users/User/node_modules/react-module-test.json]
[/Users/User/projects/testapp-react/node_modules/react-module-test/index.json]
[/Users/User/node_modules/react-module-test.js]
[/Users/User/projects/testapp-react/node_modules/react-module-test/index.js]
 @ ./src/index.js 4:0-36 8:36-39

EDIT2:

如果我更改此行:

import App from 'react-module-test'; 

收件人:

import App from '../node_modules/react-module-test/src/App.js';

我可以导入组件(即使遇到另一个错误)。

0 个答案:

没有答案