I have this structure of an app (node_modules
dir excluded from this list):
+-- 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
My webpack config looks like this:
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
npm config:
{
"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"
}
}
When I run webpack
command, I get this error:
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
My components/App.js
content is this:
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App
And for example 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
It seems it does not understand relative path with double dots, like ../something
?
Do I need to configure webpack
somehow for it to understand such paths?
This question is related to
javascript
npm
webpack
relative-path
Just add it to your config. Source: https://www.jumoel.com/2017/zero-to-webpack.html
externals: [ nodeExternals() ]
while importing libraries use the exact path to a file, including the directory relative to the current file, for example:
import Footer from './Footer/index.jsx'
import AddTodo from '../containers/AddTodo/index.jsx'
import VisibleTodoList from '../containers/VisibleTodoList/index.jsx'
Hope this may help
Look the path for example this import is not correct import Navbar from '@/components/Navbar.vue' should look like this ** import Navbar from './components/Navbar.vue'**
I met this problem with typescript
but forgot to add ts
and tsx
suffix to resolve
entry.
module.exports = {
...
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
};
This does the job for me
I had a different problem. some of my includes were set to 'app/src/xxx/yyy' instead of '../xxx/yyy'
Just ran into this... I have a common library shared among multiple transpiled products. I was using symlinks with brunch to handle sharing things between the projects. When moving to webpack, this stopped working.
What did get things working was using webpack configuration to turn off symlink resolving.
i.e. adding this in webpack.config.js
:
module.exports = {
//...
resolve: {
symlinks: false
}
};
as documented here:
https://webpack.js.org/configuration/resolve/#resolvesymlinks
changing templateUrl: ''
to template: ''
fixed it
If you use multiple node_modules
(yarn workspace etc), tell webpack where they are:
externals: [nodeExternals({
modulesDir: path.resolve(__dirname, '../node_modules'),
}), nodeExternals()],
If you have a typescript file, you have to instruct the webpack to resolve them by using below code in webpack.config.js
module.exports={
...
resolve:{
extensions:['.ts','.tsx';]
}
}
Had the same issue with module not found. Turns out I had a component
import Picture from './Picture/Picture';
at the very bottom of all the imports. When I moved it below import React, { Component } from 'react';
, it worked.
Source: Stackoverflow.com