필드 '브라우저'에 올바른 별칭 구성이 없습니다.

I'는 웹팩2(정확히 말하자면 '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]

*스스로요.json

{
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "build": "webpack --progress --display-error-details"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

'브라우저' 필드 it's에 대해 불평하는 것과 관련하여, 이에 대한 문서 I'는 다음과 같다: [패키지-브라우저-필드-spec]. 웹 팩에 대한 설명서도 있지만 기본적으로 설정되어 있는 것 같습니다. [aliasFields: ["브라우저"]]2. '패키지'에 '브라우저' 필드를 추가해 보았습니다.그러나 그것은 아무런 도움이 되지 않는 것 같다.

*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/구성요소/도ISuportIt/index.jsx

export default function() { ... }

완성도를 위해 '.babelrc'

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

내가 뭘 잘못하고 있는 거지?

John Kennedy
편집된 질문18일 7월 2019 в 2:40
프로그래밍
webpack npm webpack-2 package.json commonjs
27일 3월 2017 в 3:40
32 파운드
해결책

웹 팩이 가져오기를 해결하지 않은 것으로 밝혀졌습니다. - 끔찍한 오류 메시지에 대해 이야기합니다: ()

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

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';
Matthew Herbst
편집된 답변20일 12월 2017 в 7:50
해설 (7)

나는'm 를 구축 반응 서버 측의 렌더러 이 경우 발생할 수도 있습니다 건물은 별도의 서버 구성에서 처음. 당신이'다시고,다음과 같이 하십시오.

  1. 는지 확인"entry"값이 제대로 pathed 상대를"컨텍스트를"값입니다. 내가 누락되었는 앞"./"에 진입하기 전에 파일 이름입니다.
  2. 가 있는지 확인"를 해결"값이 포함되어 있습니다. 귀하의 수입에 아무것도 node_modules 는 기본적으로 찾고에서"컨텍스트를"폴더,지 않습니다.

예제:

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')
    ]
}
};
Artif3x
편집된 답변9일 10월 2017 в 3:39
해설 (0)

나도 같은 문제를 겪었지만 내 문제는 잘못된 케이스 때문이었어

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

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

내 항목 

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

고 일했다.

해설 (0)

내 경우에는,위의 끝webpack.config.js내가 해야exportsconfig,가 있었 오타:수출(해야 합니다.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;
해설 (0)

내 경우에는 그 패키지를 설치되었던 종속성으로는패키지입니다.json으로 상대 경로를 다음과 같다:

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

와에서 가져온js/app.js``가져오기"phoenix_html"

이 일했지만 그 후 업데이트 노드,npm,etc 지 못했습니다.위에 오류 메시지입니다.

변경 가져오기인import"../../deps/phoenix_html"수정할 수 있습니다.

해설 (0)

누구나 아이온 앱을 만들어서 올리려고 하면. 적어도 하나의 플랫폼을 앱에 추가했는지 확인합니다. 그렇지 않으면 이 오류가 발생합니다.

해설 (0)

내 경험에 의하면,이러한 결과로서의 부적절한 이름의 별칭에서등. 에서는 별칭 이름이돌아오는고 웹팩했고돌아오는함께로 돌아 오는 패키지에 내 별칭이다.

이를 해결하려면 나는 별칭을 바꿔 다른 무언가가 다음과 같돌아오는.

해설 (0)

모두를 위해 이온: 업데이트를 최신@이오니아/응용 프로그램-스크립트의 버전에게 더 나은 오류 메시지가 표시됩니다.

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

그것이 잘못된 경로를 styleUrls 에서 구성 요소가 존재하지 않는 파일입니다. 이상하게도 그것에 오류가 개발.

해설 (0)

에 내 상황을 가지고 있지 않았는 수출의 맨 아래에 나 webpack.config.js 파일입니다. 단순히 추가 

export default Config;

그것을 해결했다.

해설 (0)

나의 케이스에서,그것은으로 인해하는 경우-감도 오타에서 가져오기 경로입니다. 예를 들어,

어야 한다: 가져오기에서 대시보드'./대시보드/는 대시보드'; 는 대신: 가져오기에서 대시보드'./대시보드/는 대시보드';

wltheng
편집된 답변10일 10월 2019 в 2:06
해설 (0)