'브라우저'필드에 유효한 별칭 구성이 없습니다

나는 webpack2 (정확히 말해서)를 사용하기 시작했으며 v2.3.2구성을 다시 만든 후에도 문제가 계속 발생하여 해결할 수없는 것처럼 보입니다 (미운 덤프에 대해 미리 죄송합니다).

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

browser불만 이있는 분야와 관련하여 내가 찾을 수있는 문서는 다음과 같습니다 package-browser-field-spec. 웹 팩 설명서도 있지만 기본적으로 켜져있는 것 같습니다 : aliasFields: ["browser"]. 나는 browser내 필드를 추가하려고 시도했지만 package.json그다지 좋지 않은 것 같습니다.

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

완전성을 위해 .babelrc

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

내가 뭘 잘못하거나 그리워하고 있니?

가져 오기를 해결하지 못하는 Webpack의 문제로 밝혀졌습니다. 끔찍한 끔찍한 오류 메시지에 대해 이야기하십시오.

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

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

React 서버 측 렌더러를 작성 중이며 별도의 서버 구성을 처음부터 작성할 때도 발생할 수 있습니다. 이 오류가 표시되면 다음을 시도하십시오.

1. "항목"값이 "컨텍스트"값과 관련하여 올바르게 경로를 지정했는지 확인하십시오. 항목 파일 이름 앞에 "./"가 없습니다.
2. "해결"값이 포함되어 있는지 확인하십시오. node_modules의 항목에 대한 가져 오기는 기본적으로 "context"폴더를 찾는 것으로 설정됩니다.

예:

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

나는 같은 문제가 있었지만 내 경로는 잘못된 케이싱 때문이었습니다.

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

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

필자의 경우 다음 package.json과 같은 상대 경로 로 종속성으로 설치된 패키지였습니다 .

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

와 js/app.js함께 수입import "phoenix_html"

이것은 작동했지만 노드, npm 등의 업데이트 후 위의 오류 메시지와 함께 실패했습니다.

가져 오기 라인을 변경하여 import "../../deps/phoenix_html"수정했습니다.

내 항목을로 변경

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

그리고 효과가있었습니다.

내 경우, 끝날까지 webpack.config.js내가해야 exports, 오타는 config가 있었다 : export(해야한다 exports), 로딩 실패로 이어졌다 webpack.config.js전혀.

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;

필자의 경험에 따르면이 오류는 Webpack에서 별칭의 이름이 잘못 지정 되었기 때문에 발생했습니다. 거기에 별명이라는 이름이 redux있었고 webpack은 redux내 별명 경로에서 redux 패키지와 함께 제공 되는 것을 찾습니다 .

이 문제를 해결하려면 별칭의 이름을와 다른 이름으로 바꿔야했습니다 Redux.

이온 앱을 구축하고 업로드하려는 모든 사람에게 적합합니다. 앱에 플랫폼을 하나 이상 추가했는지 확인하십시오. 그렇지 않으면이 오류가 발생합니다.

Ionic 사용자 : 최신 @ ionic / app-scripts 버전으로 업데이트하면 더 나은 오류 메시지가 나타납니다.

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

존재하지 않는 파일에 대한 구성 요소의 styleUrls에 대한 경로가 잘못되었습니다. 이상하게도 개발에 오류가 없었습니다.

내 상황에서는 webpack.config.js 파일의 맨 아래에 내보내기가 없었습니다. 간단히 추가

export default Config;

그것을 해결했다.

"@ google-cloud / translate": "^ 5.1.4"를 사용하고 있으며이 작업을 시도 할 때까지이 문제로 어려움을 겪고있었습니다.

google-gax \ build \ src \ operationsClient.js 파일을 열고 변경했습니다

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

에

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

오류를 해결

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

누군가에게 도움이되기를 바랍니다.

필자의 경우 사용자 지정 각도 라이브러리를 소비하는 앱에 npm 링크하려고 할 때 심볼 링크가 끊어졌습니다. npm link @ authoring / canvas를 실행 한 후

``` "@ authoring / canvas": "경로 / to / ui-authoring-canvas / dist"``

모든 것이 정상인 것처럼 보이지만 모듈을 여전히 찾을 수 없습니다 :

에디터가 링크를 찾을 수있는 것으로 import 문을 수정했을 때 :

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

오버플로 스레드에서 언급 한이를 받았습니다.

이 문제를 해결하려면 다음을 수행해야했습니다.

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

4. 라이브러리의 루트 디렉토리에서 다음을 실행하십시오. rm -rf dist 비. npm run build 씨. cd dist 디.npm link

5. 소비 앱에서 "packageName": "file : / path / to / local / node_module / packageName" "으로 package.json을 업데이트하십시오.

6. 소비 앱의 루트 디렉토리에서 npm link packageName을 실행하십시오.

제 경우에는 잘못된 templateUrl을 사용하고 있었으므로 문제를 해결했습니다.

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

필자의 경우 수입 경로의 대소 문자 구분 오타 때문입니다. 예를 들어

해야한다:

import Dashboard from './Dashboard/dashboard';

대신에:

import Dashboard from './Dashboard/Dashboard';