ReactJS:导入符号链接组件错误：模块解析失败：意外标记：您可能需要适当的加载程序来处理此文件类型

我正在编写一个React组件库，我希望在其他项目中使用它，而不需要太多开销（bit、createreact库、generact等），也不需要发布。我想使用

npm install../shared_lib

将其作为

/node_modules

中的符号链接添加到我的项目中。此命令将符号链接添加到项目节点\ U模块。在我的共享库中，我有一个导出默认值的测试：

错误：

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

---

编辑：在应用下面答案（）中的解决方案后，我后来将符号链接属性改回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
          }
        ]
}

---

应用程序当前的.babelrc设置（我还尝试删除.babelrc，并在package.json中包含预设，结果相同）：

---

**编辑：在应用下面答案中的解决方案后，我最终将babel预设放回了

package.json.

"babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
},

---

我研究了而找到了一个解决方案，显然webpack在捆绑组件方面存在问题我没有使用create react应用程序。 因此，在将共享的_库导入项目之前，我尝试将其捆绑起来，只是想看看会发生什么。以下是最终的网页包配置（我也尝试了其他配置）：

以及共享库的package.json

{
  "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返回

未定义的


我的应用程序中库文件的路径很好，因为如果我擦除
shared_lib/dist/shared_lib.js
中的所有内容，然后只写
export default 1
我的
app.js
中的
console.log（TryTest）
将返回
1

我尝试将
shared_lib/webpack.config中的libraryTarget属性更改为
libraryTarget:'commonjs'
。
console.log（TryTest）
的结果变成
{shared_lib:undefined}


有人遇到过这种情况吗？
我找到了最终对我有效的方法，并将符号链接的
共享库
呈现到应用程序中

这个答案是：

渲染符号链接
共享库
组件效果良好。我没有发现使用此解决方案的任何缺点，但它是迄今为止唯一有效的解决方案。
我遇到了这个问题，在我的网页配置的
解析部分添加了
symlinks:false
，解决了这个问题，你试过了吗？我尝试了在我的应用程序网页配置中添加
symlinks:false
。我仍然收到此错误：
在./node_modules/shared_lib/src/index.js中出错6:4模块解析失败：意外标记（6:4）您可能需要适当的加载程序来处理此文件类型。|const TryTest=function（）{| return（>| TryTest |
{
  "presets": [ "@babel/preset-react", "@babel/preset-env"]
}

"babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
},

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',
    },
  }
}));

{
  "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';