字段“浏览器”不包含有效的别名configuration

我已经开始使用webpack2(准确地说, v2.3.2 ),并重新创build我的configuration后,我一直遇到一个问题,我似乎无法解决。 我得到(提前抱歉难看的转储):

 ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt' using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration after using description file: [absolute path to my repo]/package.json (relative path: ./src) using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt) as directory [absolute path to my repo]/src/components/DoISuportIt doesn't exist no extension Field 'browser' doesn't contain a valid alias configuration [absolute path to my repo]/src/components/DoISuportIt doesn't exist .js Field 'browser' doesn't contain a valid alias configuration [absolute path to my repo]/src/components/DoISuportIt.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration [absolute path to my repo]/src/components/DoISuportIt.jsx doesn't exist [[absolute path to my repo]/src/components/DoISuportIt] [[absolute path to my repo]/src/components/DoISuportIt] [[absolute path to my repo]/src/components/DoISuportIt.js] [[absolute path to my repo]/src/components/DoISuportIt.jsx] 

的package.json

 { "version": "1.0.0", "main": "./src/main.js", "scripts": { "build": "webpack --progress --display-error-details" }, "devDependencies": { ... }, "dependencies": { ... } } 

browser领域而言,我在这方面find的文档是: package-browser-field-spec 。 也有它的webpack文档,但它似乎有默认打开: aliasFields: ["browser"] 。 我尝试添加一个browser字段到我的package.json但似乎没有任何好处。

webpack.config.js

 import path from 'path'; const source = path.resolve(__dirname, 'src'); export default { context: __dirname, entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, resolve: { alias: { components: path.resolve(__dirname, 'src/components'), }, extensions: ['.js', '.jsx'], }, module: { rules: [ { test: /\.(js|jsx)$/, include: source, use: { loader: 'babel-loader', query: { cacheDirectory: true, }, }, }, { test: /\.css$/, include: source, use: [ { loader: 'style-loader' }, { loader: 'css-loader', query: { importLoader: 1, localIdentName: '[path]___[name]__[local]___[hash:base64:5]', modules: true, }, }, ], }, ], }, }; 

SRC / main.js

 import DoISuportIt from 'components/DoISuportIt'; 

SRC /组件/ DoISuportIt / index.jsx

 export default function() { ... } 

为了完整, .babelrc

 { "presets": [ "latest", "react" ], "plugins": [ "react-css-modules" ], "env": { "production": { "compact": true, "comments": false, "minified": true } }, "sourceMaps": true } 

我做错了什么/失踪?

原来是Webpack的问题,只是不解决导入 – 谈论可怕的可怕的错误消息:(

 // Had to change import DoISuportIt from 'components/DoISuportIt'; // To (notice the missing `./`) import DoISuportIt from './components/DoISuportIt'; 

对不起,错字。

对于任何人build立一个离子的应用程序,并试图上传它。 确保你至less添加了一个平台的应用程序。 否则,你会得到这个错误。

在我的情况下,它是一个软件包,作为package.json的依赖项安装,具有这样的相对path:

 "dependencies": { ... "phoenix_html": "file:../deps/phoenix_html" }, 

并在import "phoenix_html" js/app.jsimport "phoenix_html"

这已经工作,但在节点,npm等的更新之后…失败,出现上述错误消息。

更改导入行以import "../../deps/phoenix_html"修复了它。

我有同样的问题,但我的路是错误的,

 // Wrong - uppercase C in /pathCoordinate/ ./path/pathCoordinate/pathCoordinateForm.component // Correct - lowercase c in /pathcoordinate/ ./path/pathcoordinate/pathCoordinateForm.component 

我正在构build一个React服务器端渲染器,并发现这也可以从头开始构build一个单独的服务器configuration时发生。 如果您看到此错误,请尝试以下操作:

  1. 确保您的“input”值相对于您的“上下文”值适当地变化。 在input文件名之前我的文件缺less前面的“./”。
  2. 确保你有“解决”价值。 您在node_modules中的任何内容的导入将默认查看您的“上下文”文件夹,否则。

例:

 const serverConfig = { name: 'server', context: path.join(__dirname, 'src'), entry: {serverEntry: ['./server-entry.js']}, output: { path: path.join(__dirname, 'public'), filename: 'server.js', publicPath: 'public/', libraryTarget: 'commonjs2' }, module: { rules: [/*...*/] }, resolveLoader: { modules: [ path.join(__dirname, 'node_modules') ] }, resolve: { modules: [ path.join(__dirname, 'node_modules') ] } };