我已经将组件发布到我们的私人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';
我可以导入组件(即使遇到另一个错误)。