javascript - React :您可能需要适当的加载器来处理此文件类型,目前没有配置加载器来处理此文件(本地节点模块)
问题描述
我在图书馆里有 babel loader。仍然在纱线服务时将库添加到反应应用程序之后,我收到上述错误。
这是库中的 webpack.dev.config.js(webpack.config.js 中需要)-
//webpack.dev.config.js
const babelRCPath = require('@appfabric/infra-scripts').getConfigPath('babel', 'plugin');
const babelRCGenerator = require(babelRCPath);
const babelRC = babelRCGenerator([]);
module.exports = {
{
BaseModule: `${process.cwd()}/src/BaseModule`,
BaseObject: `${process.cwd()}/src/BaseObject`,
BaseWidget: `${process.cwd()}/src/widgets/BaseWidget`,
HOCWidget: `${process.cwd()}/src/widgets/HOCWidget`,
PortalWidget: `${process.cwd()}/src/widgets/PortalWidget`,
BaseActivator: `${process.cwd()}/src/application/BaseActivator`,
CorePlugin: `${process.cwd()}/src/application/CorePlugin`,
BaseAppDelegate: `${process.cwd()}/src/application/appdelegates/BaseAppDelegate`,
EmbeddedAppDelegate: `${process.cwd()}/src/default/appdelegates/embedded/EmbeddedAppDelegate`,
ActionType: `${process.cwd()}/src/application/appdelegates/actions/ActionType`,
types: `${process.cwd()}/src/application/appdelegates/actions/types`,
CommandActionType: `${process.cwd()}/src/application/appdelegates/actions/CommandActionType`,
CommandForResponseActionType: `${process.cwd()}/src/application/appdelegates/actions/CommandForResponseActionType`,
PluginRegistryService: `${process.cwd()}/src/default/PluginRegistryService`,
},
mode: 'development',
externals: [
'dcl',
'react',
'react-dom',
'prop-types',
'pubsub',
'semver',
'@appfabric/ui-profiler',
].map(
// Add this regex to each entry to ensure we don't miss any imports like 'web-shell-core/...`
(value) => new RegExp(`^(${value})((\\\\|/|!).+)?$`),
),
output: {
path: `${process.cwd()}/build/dist`,
filename: '[name].js',
library: 'web-shell-core',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: babelRC,
},
},
],
},
};
这是 webpack.config.js
const developmentConfig = require('./webpack.dev.config.js');
module.exports = merge(developmentConfig, {
mode: 'production',
output: {
filename: '[name].min.js',
chunkFilename: '[name].min.js',
},
});
首先,我在库中添加一个新文件 Secure.jsx(具有标签)。我npm install --save <path-to-library>
在我的应用程序上做。在我做之后yarn install
。然后我可以在应用程序的节点模块中看到新文件 Secure.jsx。当我尝试运行应用程序时,我得到了错误。
请让我知道我缺少什么以及我必须添加代码的哪一方面(库/应用程序)。
解决方案
你可以在这里查看我的完整配置
我想你还需要添加这个
resolve: {
modules: [
path.resolve('./node_modules')
]
},
然后像这样导入
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";
推荐阅读
- java - 由于泛型问题,我的论点在该方法中不起作用
- javascript - 使用 AJAX 和 PHP 时的 Google 图表问题
- python - 通过 Selenium 向 WebElement 发送文本问题
- docker - NEO4j:不同主机中的因果集群
- javascript - 一个没有参数的函数怎么会突然在javascript中取参数?
- firebase - Firestore 中的数字分页
- angular - 类型'typeof observable angular 8 上不存在属性'throwerror'
- java - 使用 OpenCV 在 Android Studio 应用程序中获取 jpg 文件的路径以制作 Mat
- node.js - 用 Alexa 数数
- angular - 最初加载远程数据时 Angular 组件出现问题