Reactjs Webpack2自定义模块解决错误
在我的网页包中,我有这个带有网页包块的配置Reactjs Webpack2自定义模块解决错误,reactjs,webpack,webpack-2,Reactjs,Webpack,Webpack 2,在我的网页包中,我有这个带有网页包块的配置 module.exports = createConfig([ customConfig({ resolve: { modules: [ 'src', 'node_modules', ], }, }), entryPoint({ app: ['./src/client'], }), setOutput({ path: path.resolve(_
module.exports = createConfig([
customConfig({
resolve: {
modules: [
'src',
'node_modules',
],
},
}),
entryPoint({
app: ['./src/client'],
}),
setOutput({
path: path.resolve(__dirname, `../${assetPath}`),
publicPath: `${publicPath}/`,
filename: 'bundle.js',
}),
babel(),
cssModules(),
我可以很好地从node_模块导入,也可以从src文件的第一个目录导入
src
components
icons
index.js
navs
primary.js
containers
index.js
client.js
在client.js中
如果我从“容器”导入应用程序它工作正常
但是如果在primary.js中,当我试图避免这样的相对导入时
从“组件/图标”导入图标
我得到这个错误
module.js:471
throw err;
^
Error: Cannot find module 'components/icons'
at Function.Module._resolveFilename (module.js:469:15)
at Function._module2.default._resolveFilename (/Users/abiodun/projects/***/****/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:423:34)
at Function.module._load (/Users/abiodun/projects/****/****/node_modules/piping/lib/piping.js:211:27)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/abiodun/projects/****/****/src/components/primary-nav/primary-nav.jsx:5:1)
at Module._compile (module.js:570:32)
at Module.require._compile (/Users/abiodun/projects/****/****/node_modules/webpack-isomorphic-tools/source/index.js:477:29)
at loader (/Users/abiodun/projects/****/****/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .jsx] (/Users/abiodun/projects/****/****/node_modules/babel-register/lib/node.js:154:7)
module.js:471
犯错误;
^
错误:找不到模块“组件/图标”
在Function.Module.\u解析文件名(Module.js:469:15)
at Function._module2.default._resolveFilename(/Users/abiodun/projects/***/*****/node_modules/require hacker/babel transpiled modules/require hacker.js:423:34)
在Function.module._load(/Users/abiodun/projects/**/**/node_modules/piping/lib/piping.js:211:27)
at Module.require(Module.js:497:17)
根据需要(内部/module.js:20:19)
反对。(/Users/abiodun/projects/**/**/src/components/primary nav/primary nav.jsx:5:1)
在模块处编译(Module.js:570:32)
在Module.require._compile(/Users/abiodun/projects/**/**/**/node_modules/webpack isomorphic tools/source/index.js:477:29)
在加载程序中(/Users/abiodun/projects/**/**/node\u modules/babel register/lib/node.js:144:5)
at Object.require.extensions.(匿名函数)[as.jsx](/Users/abiodun/projects/**/**/**/node\u modules/babel register/lib/node.js:154:7)
任何帮助都将受到感谢,所以当我进行同构服务器端渲染时,问题来自节点端。 我必须添加“add module path”模块,以使节点需要来自不同的目录,而不是node_模块 npm i添加模块路径--保存 下面是我的rootServer.js文件中的最后一段代码
require('app-module-path').addPath(__dirname); // add this lines
const WebpackIsomorphicTools = require('webpack-isomorphic-tools');
const isomorphicConfig = require('./webpack/isomorphic.config');
global.__CLIENT__ = false;
global.__SERVER__ = true;
global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
if (global.__DEVELOPMENT__) {
if (!require('piping')({ hook: true, ignore: /(\/\.|~$|\.json|\.scss$)/i, })) {}
require('./babel');
require('app-module-path').addPath('./src'); // add this path if it's development
}
else {
require('app-module-path').addPath('./dist'); // add this part if it's production
}
const serverPath = global.__DEVELOPMENT__ ? 'src' : 'dist';
global.webpackIsomorphicTools = new WebpackIsomorphicTools(isomorphicConfig)
.server('./', () => {
require(`./${serverPath}/server`)();
});
Webpack在不使用同构服务器端渲染的情况下很好地处理前端 检查组件中是否缺少导出。不,我没有缺少导出。如果我不从“../../components/Icons导入图标,它就可以工作。如果可能,创建示例github项目并共享链接