Field browser doesn t contain a valid alias configuration

Question

I ve started using webpack2  to be precise  v2 3 2  and after re-creating my config I keep running into an issue I can t seem to solve I get  sorry in advance for ugly dump    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 field it s complaining about  the documentation I ve been able to find on this is  package-browser-field-spec  There is also webpack documentation for it  but it seems to have it turned on by default  aliasFields    browser    I tried adding a browser field to my package json but that didn t seem to do any good   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

User · Answer

For everyone with Ionic  Updating to the latest  ionic app-scripts version gave a better error message   npm install  ionic app-scripts latest --save-dev   It was a wrong path for styleUrls in a component to a non-existing file  Strangely it gave no error in development

User · Answer

In my case  to the very end of the webpack config js  where I should exports the config  there was a typo  export should be exports   which led to failure with loading webpack config js at all  const path   require  path     const config         mode   development       entry   quot   lib components Index js quot       output            path  path resolve   dirname   public            filename   bundle js             module            rules                                  test     js                    loader   babel-loader                   exclude  path resolve   dirname   quot node modules quot                                       pay attention to  quot export s  quot  here module exports   config

User · Answer

In my experience  this error was as a result of improper naming of aliases in Webpack  In that I had an alias named redux and webpack tried looking for the redux that comes with the redux package in my alias path   To fix this  I had to rename the alias to something different like Redux

User · Answer

Add this to your package json   quot browser quot        quot  module-name  quot   false

User · Answer

In my case I was using invalid templateUrl By correcting it problem solved    Component           selector   app-edit-feather-object           templateUrl

User · Answer

In my case  it was due to a broken symlink when trying to npm link a custom angular library to consuming app  After running npm link  authoring canvas  quot  authoring canvas quot    quot path to ui-authoring-canvas dist quot   It appear everything was OK but the module still couldn t be found   When I corrected the import statement to something that the editor could find Link  import  CirclePackComponent  from   authoring canvas lib circle-pack circle-pack component    I received this which is mention in the overflow thread   To fix this I had to   cd  usr local lib node modules packageName cd    rm -rf packageName In the root directory of the library  run   a  rm -rf dist b  npm run build c  cd dist  d  npm link   In the consuming app  update the package json with    quot packageName quot    quot file  path to local node module packageName quot  quot    In the root directory of the consuming app run npm link packageName

User · Answer

I had the same issue  but mine was because of wrong casing in path      Wrong - uppercase C in  pathCoordinate    path pathCoordinate pathCoordinateForm component     Correct - lowercase c in  pathcoordinate    path pathcoordinate pathCoordinateForm component

User · Answer

For anyone building an ionic app and trying to upload it  Make sure you added at least one platform to the app  Otherwise you will get this error

User · Answer

My case was rather embarrassing  I added a typescript binding for a JS library without adding the library itself  So if you do  npm install --save  types lucene  Don t forget to do  npm install --save lucene  Kinda obvious  but I just totally forgot and that cost me quite some time

User · Answer

I m building a React server-side renderer and found this can also occur when building a separate server config from scratch  If you re seeing this error  try the following   Make sure your  quot entry quot  value is properly pathed relative to your  quot context quot  value  Mine was missing the preceeding  quot    quot  before the entry file name  Make sure you have your  quot resolve quot  value included  Your imports on anything in node modules will default to looking in your  quot context quot  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

User · Answer

In my situation  I did not have an export at the bottom of my webpack config js file  Simply adding   export default Config    solved it

User · Answer

Changed my entry to   entry  path resolve   dirname     src js index js      and it worked

User · Answer

In my case  it is due to a case-sensitivity typo in import path  For example   Should be   import Dashboard from    Dashboard dashboard     Instead of   import Dashboard from    Dashboard Dashboard

User · Answer

I m using   google-cloud translate     5 1 4  and was truggling with this issue  until I tried this   I opened google-gax build src operationsClient js file and changed  const configData   require    operations client config      to  const configData   require    operations client config json      which solved the error  ERROR in   node modules google-gax build src operationsClient js Module not found  Error  Can t resolve    operations client config  in  C     Projects qaymni node modules google-gax build src  resolve    operations client config           I hope it helps someone

User · Answer

Turned out to be an issue with Webpack just not resolving an import - talk about horrible horrible error messages        Had to change import DoISuportIt from  components DoISuportIt       To  notice the missing       import DoISuportIt from    components DoISuportIt

User · Answer

In my case it was a package that was installed as a dependency in package json with a relative path like this    dependencies              phoenix html    file    deps phoenix html       and imported in js app js with import  phoenix html   This had worked but after an update of node  npm  etc    it failed with the above error-message   Changing the import line to import        deps phoenix html  fixed it

[npm] Field 'browser' doesn't contain a valid alias configuration

Examples related to npm

Examples related to webpack

Examples related to commonjs

Examples related to webpack-2

Examples related to package.json