[英]Missing loaders in custom npm package
I have the following problem: 我有以下问题:
I'm building a private npm package, which I'm loading from a local git server, to be used among a couple of react applications, but when it's loaded in the application it gives the following error: 我正在构建一个私有的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()}
The package has a demo version, which you can start by going to the package and yarn start
, which fires a webpack-dev-server
and everything is working as it should, no errors are displayed, but when you load the package inside some application, the described error appears. 该软件包有一个演示版本,您可以转到该软件包并
yarn start
,从而yarn start
一个webpack-dev-server
并且一切正常运行,不会显示任何错误,但是在某些应用程序中加载该软件包时,出现所描述的错误。 So what I'm missing here, because when I load some package from npmjs, everything is working as it should ? 所以我在这里缺少什么,因为当我从npmjs加载某些程序包时,一切都按预期进行了吗?
It seems like the package is not reading the loaders from the application 似乎程序包没有从应用程序读取装载程序
webpack-dev.config.js 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 : 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 .babelrc
{
"presets": [
"env",
"react",
"stage-1"
],
"env": {
"test": {
"plugins": [
[
"__coverage__",
{
"ignore": "*.test.*"
}
]
]
}
}
}
src/javascript/main.js src / javascript / main.js
import AsmlSearch from './AsmlSearch';
export default AsmlSearch;
AsmlSearch.jsx 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>
);
}
}
The application that I'm using is create-react-app project and those are it's settings: 我正在使用的应用程序是create-react-app项目,这些是设置:
The package in this case is sym linked, but the error is still there if I load it inside the package.json through git 在这种情况下,该软件包是符号链接的,但是如果我通过git将其加载到package.json中,则错误仍然存在
package.json of the application 应用程序的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 from the application .babelrc从应用程序
{
"presets": [
"env",
"react",
"stage-1"
],
"env": {
"test": {
"plugins": [
[
"__coverage__",
{
"ignore": "*.test.*"
}
]
]
}
}
}
The webpack config for the application is the defaul of create-react-app
该应用程序的webpack配置是对
create-react-app
的默认配置
I had this problem recently and resolved it by updating my webpack config to check whether the package in question is symlinked locally 我最近遇到了这个问题,并通过更新我的webpack配置来解决该问题,以检查相关软件包是否在本地进行了符号链接
if (fs.lstatSync('./node_modules/package-in-question').isSymbolicLink()) { config.resolve.symlinks = false; }
Use the fs.realpathSync('./node_modules/package-in-question')
any place you need to specify the path (aliases, include/excludes, etc). fs.realpathSync('./node_modules/package-in-question')
您需要指定路径的任何位置(别名,包含/排除等)使用fs.realpathSync('./node_modules/package-in-question')
)。 Without seeing your config file it's hard to say precisely what you need. 没有看到您的配置文件,很难准确地说出您需要什么。
This issue on babel-loader github goes into it in detail, many have found solutions that are a variation of the above combination. 关于babel-loader github的这个问题进行了详细介绍,许多人已经找到了上述组合的变体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.