自定义npm程序包中缺少加载程序

Question

我有以下问题：

我正在构建一个私有的npm软件包，该软件包是从本地git服务器加载的，将在几个React应用程序中使用，但是在应用程序中加载它时，会出现以下错误：

Error: Module parse failed: Unexpected token (22:6)
You may need an appropriate loader to handle this file type.
   render() {
     return (
       <div className='row'>
         <div className='col-md-1'>
           {this.renderSwitch()}

该软件包有一个演示版本，您可以转到该软件包并yarn start ，从而yarn start一个webpack-dev-server并且一切正常运行，不会显示任何错误，但是在某些应用程序中加载该软件包时，出现所描述的错误。 所以我在这里缺少什么，因为当我从npmjs加载某些程序包时，一切都按预期进行了吗？

似乎程序包没有从应用程序读取装载程序

webpack-dev.config.js

'use strict';

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    stats: {
        maxModules: 0
    },
    mode: 'development',
    entry: {
        demo: './demo/main.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist/demo')
    },
    devServer: {
        historyApiFallback: true,
        stats: {
            maxModules: 0
        }
    },
    plugins: [
        new HtmlPlugin({
            title: 'asml react search (DEMO)',
            template: './demo/index.html'
        })
    ]
};

package.json ：

{
  "name": "asml_search",
  "version": "1.0.0",
  "description": "",
  "main": "src/javascript/main.js",
  "scripts": {
    "start": "webpack-dev-server --env dev",
    "dist": "del dist; webpack --env prod",
    "test": "karma start karma.conf.js"
  },
  "keywords": [],
  "author": "Author <author@example.com>",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "bootstrap": "^4.1.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.1",
    "react-querybuilder": "^1.4.3",
    "react-select": "^1.2.1"
  }
}

.babelrc

{
    "presets": [
        "env",
        "react",
        "stage-1"
    ],
    "env": {
        "test": {
            "plugins": [
                [
                    "__coverage__",
                    {
                        "ignore": "*.test.*"
                    }
                ]
            ]
        }
    }
}

src / javascript / main.js

import AsmlSearch from './AsmlSearch';
export default AsmlSearch;

AsmlSearch.jsx

import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';

export default class AsmlSearch extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
        simple_search: true
    };
  }

  handleSwitch() {
    this.setState({
      simple_search: !this.state.simple_search
    });
  }

  render() {
    return (
      <div className='row'>
        <div className='col-md-1'>
          {this.renderSwitch()}
        </div>
      </div>
    );
  }

  renderSwitch() {
    return (
      <Button bsStyle='primary' bsSize="small" onClick={this.handleSwitch.bind(this)}>
        {this.state.simple_search ? '+' : '-'}
      </Button>
    );
  }
}

我正在使用的应用程序是create-react-app项目，这些是设置：

在这种情况下，该软件包是符号链接的，但是如果我通过git将其加载到package.json中，则错误仍然存​​在

应用程序的package.json

{
  "name": "search-npm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

.babelrc从应用程序

{
    "presets": [
        "env",
        "react",
        "stage-1"
    ],
    "env": {
        "test": {
            "plugins": [
                [
                    "__coverage__",
                    {
                        "ignore": "*.test.*"
                    }
                ]
            ]
        }
    }
}

该应用程序的webpack配置是对create-react-app的默认配置

Answer 1

我最近遇到了这个问题，并通过更新我的webpack配置来解决该问题，以检查相关软件包是否在本地进行了符号链接

if (fs.lstatSync('./node_modules/package-in-question').isSymbolicLink()) { config.resolve.symlinks = false; }

fs.realpathSync('./node_modules/package-in-question')您需要指定路径的任何位置（别名，包含/排除等）使用fs.realpathSync('./node_modules/package-in-question') ）。 没有看到您的配置文件，很难准确地说出您需要什么。

关于babel-loader github的这个问题进行了详细介绍，许多人已经找到了上述组合的变体。