The browser field does not contain the correct alias configuration

Question

I started using webpack2 (to be precise, v2.3.2 ) and after recreating my configuration, I continue to encounter a problem that I can't seem to solve (I apologize for the ugly dump in advance):

 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": { ... } } 

In terms of the browser he complains, the documentation I could find at this address: package-browser-field-spec . There is also documentation for web packages for it, but it seems to be enabled by default: aliasFields: ["browser"] . I tried adding a browser field to my package.json but that didn't seem to be of any benefit.

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 / components / DoISuportIt / index.jsx

 export default function() { ... } 

For completeness .babelrc

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

What am I doing wrong / missing?

Answer 1

It turned out that the problem is that Webpack just doesn’t allow importing - talking about terrible awful error messages :(

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

Answer 2

I am creating a server-side relay on the React server and have discovered that this can also occur when creating a separate server configuration from scratch. If you see this error, try the following:

• Make sure your entry value is correctly corrected relative to your context value. I missed the previous "./" in front of the record file name.
• Make sure you have your solution enabled. Your import to anything in node_modules will search by default in your "context" folder, otherwise.

Example:

 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') ] } }; 

Answer 3

I had the same problem, but mine was due to the wrong shell in the path:

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

Answer 4

Changed my post to

 entry: path.resolve(__dirname, './src/js/index.js'), 

and it worked.

Answer 5

In my case, until the very end of webpack.config.js , where I was supposed to webpack.config.js , there was a typo: export (should be exports ), which led to webpack.config.js when loading webpack.config.js .

 const path = require('path'); const config = { mode: 'development', entry: "./lib/components/Index.js", output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: path.resolve(__dirname, "node_modules") } ] } } // pay attention to "export!s!" here module.exports = config; 

Answer 6

For those who are building an ionic application and trying to download it. Make sure you add at least one platform to the application. Otherwise, you will get this error.

Answer 7

In my case, it was a package that was installed as a dependency in package.json with a relative path as follows:

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

and imported into js/app.js using import "phoenix_html"

This worked, but after updating node, npm, etc .... this error message failed.

Changing import line to import "../../deps/phoenix_html" fixed.

Answer 8

In my experience, this error was the result of mis-naming aliases in Webpack. That I had an alias named redux and WebPack tried looking for the redux that comes with the Redux package in my path alias.

To fix this, I had to rename the alias to something else, for example, in Redux .

Answer 9

For everyone with Ionic: updating to the latest version of @ ionic / app-scripts gave a better error message.

 npm install @ionic/app-scripts@latest --save-dev 

This was the wrong path for styleUrls in the component to a nonexistent file. Strange it did not give errors in development.

Answer 10

In my situation, I did not have an export at the bottom of my webpack.config.js file. Just adding

 export default Config; 

solved it.