Pole „browser” nie zawiera prawidłowej konfiguracji aliasu

Zacząłem używać webpack2 (żeby być precyzyjnym v2.3.2) i po ponownym utworzeniu konfiguracji wciąż napotykam problem, którego nie mogę rozwiązać, otrzymuję (z góry przepraszam za brzydki zrzut):

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

Pod względem browserpola to narzekają, dokumentacja udało mi się znaleźć na to: package-browser-field-spec. Istnieje również WebPack dokumentacji dla niego, ale wydaje się, że jest włączona domyślnie: aliasFields: ["browser"]. Próbowałem dodać browserpole do mojego, package.jsonale to nie przyniosło żadnego efektu.

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() { ... }

Dla pełności, .babelrc

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

Co robię źle / czego mi brakuje?

Okazało się, że jest to problem z Webpack, który po prostu nie rozwiązał importu - porozmawiaj o okropnych okropnych komunikatach o błędach :(

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

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

Buduję renderer po stronie serwera React i odkryłem, że może to również wystąpić podczas budowania oddzielnej konfiguracji serwera od podstaw. Jeśli widzisz ten błąd, wypróbuj następujące rozwiązania:

1. Upewnij się, że wartość „wpisu” jest odpowiednio sklejona względem wartości „kontekstu”. W moim brakowało poprzedzającego „./” przed nazwą pliku wpisu.
2. Upewnij się, że masz uwzględnioną wartość „rozwiązania”. Twoje importy wszystkich elementów w node_modules będą domyślnie szukać w folderze „kontekst”, w przeciwnym razie.

Przykład:

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

Miałem ten sam problem, ale mój był z powodu złej obudowy na ścieżce:

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

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component

W moim przypadku był to pakiet, który został zainstalowany jako zależność package.jsonz taką ścieżką względną:

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

i przywiezione js/app.jszimport "phoenix_html"

To zadziałało, ale po aktualizacji węzła, npm itp ... nie udało się z powyższym komunikatem o błędzie.

Zmiana linii importu, aby import "../../deps/phoenix_html"to naprawić.

Zmieniłem mój wpis na

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

i zadziałało.

W moim przypadku do samego końca webpack.config.js, gdzie powinienem exportssię konfigurować, pojawiła się literówka: export(powinna być exports), która webpack.config.jsw ogóle doprowadziła do niepowodzenia ładowania .

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;

Z mojego doświadczenia wynika, że ​​ten błąd był wynikiem niewłaściwego nazewnictwa aliasów w Webpack. W tym przypadku miałem alias o nazwie reduxi reduxpakiet webpack próbowałem znaleźć ten, który jest dostarczany z pakietem redux w mojej ścieżce aliasu.

Aby to naprawić, musiałem zmienić nazwę aliasu na inną, np Redux.

Dla każdego, kto tworzy aplikację jonową i próbuje ją przesłać. Upewnij się, że do aplikacji została dodana co najmniej jedna platforma. W przeciwnym razie pojawi się ten błąd.

Dla każdego z Ionic: Aktualizacja do najnowszej wersji @ ionic / app-scripts dała lepszy komunikat o błędzie.

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

To była zła ścieżka dla styleUrls w komponencie do nieistniejącego pliku. Dziwne, że nie dał błędu w rozwoju.

W mojej sytuacji nie mam eksportu na dole mojego pliku webpack.config.js. Po prostu dodając

export default Config;

rozwiązałem to.

W moim przypadku było to spowodowane zepsutym łączem symbolicznym podczas próby połączenia npm niestandardowej biblioteki kątowej z konsumującą aplikacją. Po uruchomieniu npm link @ authoring / canvas

`` `` "@ authoring / canvas": "ścieżka / do / ui-authoring-canvas / dist" `

Wygląda na to, że wszystko jest w porządku, ale nadal nie można znaleźć modułu:

Kiedy poprawiłem instrukcję importu na coś, co redaktor mógł znaleźć Link:

import {CirclePackComponent} from '@authoring/canvas/lib/circle-pack/circle-pack.component';

Otrzymałem to o czym wspomina w wątku przepełnienia:

Aby to naprawić, musiałem:

1. cd /usr/local/lib/node_modules/packageName
2. cd ..
3. rm -rf packageName

4. W katalogu głównym biblioteki uruchom: a. rm -rf dist b. npm run build do. cd dist re.npm link

5. W używanej aplikacji zaktualizuj plik package.json o „nazwa_pakietu”: „plik: / ścieżka / do / lokalny / moduł_węzła / nazwa_pakietu” ”

6. W katalogu głównym używanej aplikacji uruchom npm link nazwa pakietu

Używam „@ google-cloud / translate”: „^ 5.1.4” i kłóciłem się z tym problemem, dopóki nie wypróbowałem tego:

Otworzyłem plik google-gax \ build \ src \ operationsClient.js i zmieniłem

const configData = require('./operations_client_config');

do

const configData = require('./operations_client_config.json');

który rozwiązał błąd

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' ......

Mam nadzieję, że to komuś pomoże

W moim przypadku użyłem nieprawidłowego templateUrl, poprawiając go problem został rozwiązany.

@Component({
        selector: 'app-edit-feather-object',
        templateUrl: ''
    })

Dodaj to do package.json:

"browser": {
  "[module-name]": false   
},

W moim przypadku jest to spowodowane literówką uwzględniającą wielkość liter w ścieżce importu. Na przykład,

Powinien być:

import Dashboard from './Dashboard/dashboard';

Zamiast:

import Dashboard from './Dashboard/Dashboard';