Я пишу библиотеку компонентов React, которую я хочу использовать в других проектах без особых затрат (bit, create-Reaction-library, generact, et c.) И без публикации. Я хочу использовать npm install ../shared_lib, чтобы добавить его в свой проект в качестве символической ссылки в /node_modules. Эта команда добавляет символическую ссылку к проекту node_modules. В моей папке shared_lib просто есть тест на export default a <div></div>:
import React from 'react';
const TryTest = function() {
return (
<div>
TryTest
</div>
)
}
export default TryTest;
Проблема, с которой я сталкиваюсь, заключается в следующей ошибке при импорте компонента в мой рабочий project:
import TryTest from 'shared_lib';
Ошибка:
ERROR in ../shared_lib/src/index.js 6:4
Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const TryTest = function() {
| return (
> <div>
| TryTest
| </div>
@ ./src/App.js 27:0-33 28:12-19
@ ./src/index.js
@ multi babel-polyfill ./src/index.js
Если я импортирую что-либо из shared_lib, кроме файла с jsx - например, строку или функцию, et c , - все работает нормально.
РЕДАКТИРОВАТЬ: в веб-пакете приложения есть разрешение символических ссылок объекта, установленное в false:
resolve: {
symlinks: false
},
РЕДАКТИРОВАТЬ: После применения решения в ответе ниже ({ ссылка }) я позже изменил символические ссылки prop обратно на true. Мне не нужно было устанавливать значение false, чтобы решение работало и отображало shared_lib компонентов.
Загрузчик моего приложения:
{
test: /\.jsx?$/,
include: [
path.join( __dirname, 'src'), // app/src
fs.realpathSync(__dirname + '/node_modules/shared_lib'), // app/node_modules/shared_lib/dist/shared_lib.js
],
exclude: /node_modules/,
use: [ 'babel-loader' ]
}
РЕДАКТИРОВАТЬ: Когда я применил решение в ответе ниже, загрузчик теперь выглядит следующим образом:
{
test: /\.jsx?$/,
include: [
path.join( __dirname, 'src'), // app/src
fs.realpathSync(__dirname + '/node_modules/shared_lib'), // app/node_modules/shared_lib/dist/shared_lib.js
],
exclude: /node_modules/,
use: [ {
loader: 'babel-loader',
options: require("./package.json").babel
}
]
}
Текущие настройки приложения .babelr c (я также пытался удалить .babelr c и включая предустановки в пакете. json с тем же результатом):
{
"presets": [ "@babel/preset-react", "@babel/preset-env"]
}
** РЕДАКТИРОВАТЬ: После применения решения в ответе ниже я закончил тем, что вставил предустановки babel обратно в package.json.
"babel": {
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
},
Я исследовал , в то время как , чтобы найти решение этой проблемы, и, по-видимому, в веб-пакете есть проблемы, связанные с компонентами реагирующих компонентов? Я не использую create-реагировать-приложение. Итак, я попытался связать shared_lib перед его импортом в проект, просто чтобы посмотреть, что произойдет. Вот последняя конфигурация веб-пакета (я пробовал и другие конфигурации):
const pkg = require('./package.json');
const path = require('path');
const buildPath = path.join( __dirname, 'dist' );
const clientPath = path.join( __dirname, 'src');
const depsPath = path.join( __dirname, 'node_modules');
const libraryName = pkg.name;
module.exports = [
'cheap-module-source-map'
].map( devtool => ({
bail: true,
mode: 'development',
entry: {
lib : [ 'babel-polyfill', path.join( clientPath, 'index.js' ) ]
},
output: {
path: buildPath,
filename: 'shared_lib.js',
libraryTarget: 'umd',
publicPath: '/dist/',
library: libraryName,
umdNamedDefine: true
},
// to avoid bundling react
externals: {
'react': {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React'
}
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
clientPath
],
exclude: /node_modules/,
use: [ 'babel-loader' ],
},
]
},
devtool,
optimization: {
splitChunks: {
chunks: 'all',
},
}
}));
И пакет. json для shared_lib
{
"name": "shared_lib",
"version": "1.0.0",
"description": "",
"main": "dist/shared_lib.js",
"scripts": {
"clean": "rm -rf dist/",
"build": "$(npm bin)/webpack --config ./webpack.config.js",
"prepublish": "npm run clean && npm run build"
},
"author": "",
"license": "ISC",
"peerDependencies": {
"react": "^16.8.6"
},
"devDependencies": {
"react": "^16.8.6",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
},
"babel": {
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}
}
Пакет упакован без ошибок: 
Когда я пытаюсь импортировать компонент таким же образом:
import TryTest from 'shared_lib';
Файл console.log возвращает undefined.
Путь к библиотеке с файлом в моем приложении все в порядке, потому что если я удалю все в shared_lib/dist/shared_lib.js и просто напишу export default 1, console.log(TryTest) в моем App.js вернет 1.
Я попытался изменить свойство libraryTarget в shared_lib/webpack.config до libraryTarget: 'commonjs'. Результат console.log(TryTest) становится {shared_lib: undefined}.
Кто-нибудь когда-нибудь сталкивался с этим?