webpack: module niet gevonden: fout: kan niet worden opgelost (met relatief pad)

Ik heb deze structuur van een app (node_modulesdir uitgesloten van deze lijst):

├── actions.js
├── bundle.js
├── components
│   ├── App.js
│   ├── Footer.js
│   ├── Link.js
│   ├── Todo.js
│   └── TodoList.js
├── Containers
│   ├── AddTodo.js
│   ├── FilterLink.js
│   └── VisibleTodoList.js
├── index.html
├── index.js
├── main.js
├── package.json
├── package-lock.json
├── reducers.js
└── webpack.config.js

Mijn webpack-configuratie ziet er als volgt uit:

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          }
        ]
    }
};

npm-configuratie:

{
  "name": "webpack-redux",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "nothing"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "react": "^15.6.1",
    "babel-preset-react": "^6.24.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
}

Als ik de opdracht webpackuitvoer, krijg ik deze foutmelding:

ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 11:15-47
 @ ./index.js
 @ ./main.js
ERROR in ./components/Footer.js
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/Footer.js 11:18-53
 @ ./components/App.js
 @ ./index.js
 @ ./main.js
ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 15:23-63
 @ ./index.js
 @ ./main.js

Mijn components/App.jsinhoud is dit:

import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)
export default App

En bijvoorbeeld containers/AddTodo.js:

import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
  let input
  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)
export default AddTodo

Het lijkt erop dat het relatief pad met dubbele punten niet begrijpt, zoals ../something?

Moet ik webpackop de een of andere manier configureren om dergelijke paden te begrijpen?

Antwoord 1, autoriteit 100%

Je bestandsstructuur zegt dat de mapnaam containeris met een hoofdletter C. Maar je probeert het te importeren met containermet een kleine c. U moet de import- of mapnaam wijzigen omdat de paden hoofdlettergevoelig zijn.

Antwoord 2, autoriteit 21%

gebruik bij het importeren van bibliotheken het exacte pad naar een bestand, inclusief de directory ten opzichte van het huidige bestand, bijvoorbeeld:

import Footer from './Footer/index.jsx'
import AddTodo from '../containers/AddTodo/index.jsx'
import VisibleTodoList from '../containers/VisibleTodoList/index.jsx'

Ik hoop dat dit kan helpen

Antwoord 3, autoriteit 17%

Ik ontmoette dit probleem met typescriptmaar vergat het achtervoegsel tsen tsxtoe te voegen aan het item resolve.

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

Dit doet het werk voor mij

Antwoord 4, autoriteit 7%

Ik kwam dit net tegen… Ik heb een gemeenschappelijke bibliotheek die wordt gedeeld door meerdere getranspileerde producten. Ik gebruikte symlinks met brunch om dingen tussen de projecten te delen. Toen ik overstapte naar webpack, werkte dit niet meer.

Wat ervoor zorgde dat alles werkte, was het gebruik van de webpack-configuratie om het oplossen van symbolische links uit te schakelen.

d.w.z. Dit toevoegen in webpack.config.js:

module.exports = {
  //...
  resolve: {
    symlinks: false
  }
};

Zoals hier gedocumenteerd:

https://webpack.js.org/configuration/resolve/#resolvesymlinks

Antwoord 5, Autoriteit 5%

Voeg het gewoon toe aan uw config. Bron: https://www.jumoel.com/2017/zerzero- Webpack.html

externals: [ nodeExternals() ]

Antwoord 6, Autoriteit 5%

Als u een typescript-bestand hebt, moet u de webpack instrueren om deze op te lossen met behulp van de onderstaande code in Webpack.config.js

module.exports={
   ...
   resolve:{
      extensions:['.ts','.tsx';]
   }
}

Antwoord 7, Autoriteit 2%

had hetzelfde probleem met module niet gevonden. Blijkt dat ik een component had
import Picture from './Picture/Picture';onderaan alle invoer. Toen ik het onder de import React, { Component } from 'react';, werkte.

Antwoord 8, Autoriteit 2%

Kijk het pad bijvoorbeeld deze import is niet correct
Navbar importeren van ‘@ / componenten / navbar.vue’
zou er zo moeten uitzien
** Navbar importeren van ‘./componenten/navbar.vue’ **

Antwoord 9

Ik had een ander probleem. Sommige van mijn omvatten waren ingesteld op ‘app / src / xxx / yyy’ in plaats van ‘../ xxx / yyy’

Antwoord 10

Als u meerdere node_modules(garenwerkruimte enz.), vertel WebPack waar ze zijn:

 externals: [nodeExternals({
    modulesDir: path.resolve(__dirname, '../node_modules'),
  }),  nodeExternals()],

Antwoord 11

Wijzigen van templateUrl: ''naar template: ''vastgesteld