Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 580

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Solve the Error “field ‘browser’ doesn’t contain a valid alias configuration” - TutoPal

Solve the Error “field ‘browser’ doesn’t contain a valid alias configuration”

JavaScript has set its foot strong in the programming world as it helps programmers create interactive applications and websites. It also provides packages and bundles making programming simpler. NPM is a well-known JavaScript package manager, which is compatible with node.js. JavaScript also offers Webpack an open-source and free module bundler. It is used to bundle files of JavaScript in the browser. When you are working with it, you may get the error “field ‘browser’ doesn’t contain a valid alias configuration”.

How do you get the error?

When you try to create a project using webpack2 along with recreating config, you get the error warning. This is what you get

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]

It happens when you use the script. Have a look at the script

package.json

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

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

export default function() { ... }

.babelrc

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

When typing such long code to compile, you get the error, which is obviously frustrating. Let’s check out the next section to fix it

Solutions To Fix the Error “field ‘browser’ doesn’t contain a valid alias configuration”

We have a few short, simple, and effective solutions to help you fix the error. Have a look at them

Solution 1 – Missing ‘./’

At the time of creating a program. you need to make sure there is no miss typing or missing of any character, even a slash ‘/’. In the code, you are missing a ‘./’. You need to replace it like this:

Replace this:

import DoISuportIt from 'components/DoISuportIt';

with this ‘./’:

import DoISuportIt from './components/DoISuportIt';

Solution 2 – Use the correct case

When you use the incorrect casing in the path, you get the error warning. You need to check if the casing is correct when you encounter this error.

Wrong uppercase

C in /pathCoordinate/./path/pathCoordinate/pathCoordinateForm.component

Correct lowercase

c in /pathcoordinate/./path/pathcoordinate/pathCoordinateForm.component

Check out another scenario

Wrong uppercase

import Dashboard from './Dashboard/Dashboard';

Correct lowercase

import Dashboard from './Dashboard/dashboard';

Solution 3 – Add resolver extension

Sometimes missing this property causes the error. When you are trying out a library that utilizes files of .js, you miss out the resolve extension to make it work, which leads to an issue. You just need to add an extension properly to get through it. Do it like this:

module.exports = {
(...)
  resolve: {
    extensions: ['.ts', '.js'],
  }
}

Conclusion

And that’s it! This is how you can get rid of the error warning “field ‘browser’ doesn’t contain a valid alias configuration”. The solutions are really simple to execute. I hope you enjoyed the post and find it useful.

I wish you all the best!

Type in the below comment box if you like it. If you need assistance then do let us know as well would be really happy to help you.

Leave a Reply

Your email address will not be published. Required fields are marked *