字段“浏览器”不包含有效的别名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.js中import "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时发生。 如果您看到此错误，请尝试以下操作：
- 确保您的“input”值相对于您的“上下文”值适当地变化。 在input文件名之前我的文件缺less前面的“./”。
- 确保你有“解决”价值。 您在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') ] } };
