Feltet 'browser' inneholder ikke en gyldig alias-konfigurasjon

Jeg' har begynt å bruke webpack2 (for å være presis, v2.3.2) og etter å ha gjenopprettet konfigurasjonen min fortsetter jeg å støte på et problem jeg ikke ser ut til å løse jeg får (beklager på forhånd for stygg 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": {
    ...
  }
}

Når det gjelder browser-feltet den klager på, er dokumentasjonen jeg har klart å finne om dette: package-browser-field-spec. Det er også webpack dokumentasjon for det, men det ser ut til å ha det slått på som standard: aliasFields: ["browser"]. Jeg prøvde å legge til et browser-felt i package.json, men det så ikke ut til å gjøre noe godt.

**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 fullstendighetens skyld, .babelrc.

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

Hva er det jeg gjør feil/mangler?

John Kennedy
Redigerte spørsmål 18. juli 2019 в 2:40
Programmering
webpack npm webpack-2 package.json commonjs
27. mars 2017 в 3:40
Ingen visninger ennå
Løsning

Det viste seg å være et problem med Webpack som ikke løste en import - snakk om forferdelige feilmeldinger :(

// Had to change
import DoISuportIt from 'components/DoISuportIt';

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
Redigert svar 20. desember 2017 в 7:50
Kommentarer (7)

Jeg hadde samme problem, men det skyldtes feil foringsrør i banen:

// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component
Kommentarer (1)

For alle som bygger en ionic-app og prøver å laste den opp. Sørg for at du har lagt til minst én plattform i appen. Ellers vil du få denne feilen.

Kommentarer (0)