Reactjs 导入在网页包内不起作用
我是新的网页,所以很抱歉,如果我错过了一些非常明显的 我的结构如下:Reactjs 导入在网页包内不起作用,reactjs,webpack,import,babeljs,babel-loader,Reactjs,Webpack,Import,Babeljs,Babel Loader,我是新的网页,所以很抱歉,如果我错过了一些非常明显的 我的结构如下: adex_js ---- app.jsx (entry point) ---- TestComponent.jsx 在app.jsx中,我有: import TestComponent from './TestComponent' 我得到: ERROR in ./js/adex_js/app.jsx Module not found: Error: Can't resolve './TestComponent'
adex_js
---- app.jsx (entry point)
---- TestComponent.jsx
在app.jsx中,我有:
import TestComponent from './TestComponent'
我得到:
ERROR in ./js/adex_js/app.jsx
Module not found: Error: Can't resolve './TestComponent' in '.........../asset_src/js/adex_js'
我被告知可能与巴别塔的配置有关。。。这是我的。巴别LRC:
{
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements"
]
},
"development": {
"sourceMaps": "inline"
},
"test": {
"plugins": [
"istanbul"
],
"sourceMaps": "inline",
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
],
"node": "current"
},
"useBuiltIns": true,
"debug": true
}
],
"react",
"stage-0"
]
}
},
"plugins": [
"transform-class-properties",
"transform-runtime",
"transform-object-rest-spread",
"transform-decorators-legacy",
"syntax-dynamic-import",
"dynamic-import-node",
"react-hot-loader/babel",
[
"react-css-modules",
{
"generateScopedName": "[name]__[local]___[hash:base64:5]"
}
],
],
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
],
"node": "current"
},
"modules": false,
"useBuiltIns": true,
"debug": false
}
],
"react",
"stage-0"
]
}
以及网页配置中的babel部分:
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
plugins: [
'transform-react-jsx',
[
'react-css-modules',
{
context,
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
]
]
}
你知道是什么导致了这个问题吗?我没有收到任何其他错误,似乎都安装得很好,导入react工作正常,只有从文件系统导入时才会失败
任何提示都是非常受欢迎的 在导入中使用完整的文件名:
import TestComponent from './TestComponent.jsx'
在导入中使用完整的文件名:
import TestComponent from './TestComponent.jsx'
添加扩展成功了,但更好的解决方案是添加:
resolve: {
extensions: ['.js', '.jsx'],
},
在我的webpack配置文件中,我不再需要在导入中添加扩展名…添加扩展名有效,但更好的解决方案是添加:
resolve: {
extensions: ['.js', '.jsx'],
},
在我的网页配置文件中,我不再需要在导入中添加扩展名