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 browser
pola 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ć browser
pole do mojego, package.json
ale 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?
Odpowiedzi:
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 :(
źródło
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:
Przykład:
źródło
Miałem ten sam problem, ale mój był z powodu złej obudowy na ścieżce:
źródło
W moim przypadku był to pakiet, który został zainstalowany jako zależność
package.json
z taką ścieżką względną:i przywiezione
js/app.js
zimport "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ć.źródło
Zmieniłem mój wpis na
i zadziałało.
źródło
W moim przypadku do samego końca
webpack.config.js
, gdzie powinienemexports
się konfigurować, pojawiła się literówka:export
(powinna byćexports
), którawebpack.config.js
w ogóle doprowadziła do niepowodzenia ładowania .źródło
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
redux
iredux
pakiet 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
.źródło
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.
źródło
Dla każdego z Ionic: Aktualizacja do najnowszej wersji @ ionic / app-scripts dała lepszy komunikat o błędzie.
To była zła ścieżka dla styleUrls w komponencie do nieistniejącego pliku. Dziwne, że nie dał błędu w rozwoju.
źródło
W mojej sytuacji nie mam eksportu na dole mojego pliku webpack.config.js. Po prostu dodając
rozwiązałem to.
źródło
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:
cd /usr/local/lib/node_modules/packageName
cd ..
rm -rf packageName
W katalogu głównym biblioteki uruchom: a.
rm -rf dist
b.npm run build
do.cd dist
re.npm link
W używanej aplikacji zaktualizuj plik package.json o „nazwa_pakietu”: „plik: / ścieżka / do / lokalny / moduł_węzła / nazwa_pakietu” ”
W katalogu głównym używanej aplikacji uruchom npm link nazwa pakietu
źródło
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
do
który rozwiązał błąd
Mam nadzieję, że to komuś pomoże
źródło
W moim przypadku użyłem nieprawidłowego templateUrl, poprawiając go problem został rozwiązany.
źródło
Dodaj to do
package.json
:"browser": { "[module-name]": false },
źródło
W moim przypadku jest to spowodowane literówką uwzględniającą wielkość liter w ścieżce importu. Na przykład,
Powinien być:
Zamiast:
źródło