自定義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的這個問題進行了詳細介紹，許多人已經找到了上述組合的變體。