[英]Can't build react app with webpack [problem with import[path]]
HI：我使用create-react-app ，我需要使用webpack來構建我的項目，以便在Electron內部將其用作桌面應用
但是在我運行webpack --mode development --watch webpack之后顯示下一個錯誤
webpack is watching the files…
Hash: 7e114c5670c6d14690fd
Version: webpack 4.20.2
Time: 1636ms
Built at: 2018-09-30 08:49:52
Asset Size Chunks Chunk Names
index-bundle.js 891 KiB main [emitted] main
index.html 1.62 KiB [emitted]
Entrypoint main = index-bundle.js
[./index.js] 426 bytes {main} [built]
+ 45 hidden modules
ERROR in ./index.js
Module not found: Error: Can't resolve 'routes' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'
@ ./index.js 5:0-28 10:23-29
ERROR in ./index.js
Module not found: Error: Can't resolve 'store' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'
@ ./index.js 4:0-35 9:9-23
ERROR in ./index.js
Module not found: Error: Can't resolve 'styles/global-styles' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'
@ ./index.js 6:0-30
ERROR in ./index.js
Module not found: Error: Can't resolve 'utils/registerServiceWorker' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src'
@ ./index.js 7:0-64 11:0-21
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html] 1.79 KiB {0} [built]
+ 3 hidden modules
我的項目結構
C:.
| .editorconfig
| .env
| .eslintignore
| .eslintrc.json
| .gitattributes
| .gitignore
| .yo-rc.json
| package-lock.json
| package.json
| README.md
| webpack.config.js
| yarn-error.log
| yarn.lock
|
+---generators
| | index.js
| |
| +---component
| | es6.js.hbs
| | es6.pure.js.hbs
| | index.js
| | stateless.js.hbs
| | stateless.pure.js.hbs
| |
| +---container
| | index.js
| | index.js.hbs
| |
| \---utils
| componentExists.js
| containerExists.js
|
+---public
| favicon.ico
| index.html
| manifest.json
|
\---src
| index.js
|
+---actions
| | counter.js
| | index.js
| | selectBook.js
| |
| +---blog
| | appendNewPostToDom.js
| | fetchBlogs.js
| | removePost.js
| | requestPost.js
| | savePost.js
| | selectPost.js
| | showRemovePostDialog.js
| | test_load_data_on_router_init.js
| |
| \---weather
| search.js
|
+---assets
| logo.svg
|
+---components
| BooksProject.js
| Counter.js
| Header.js
| index.js
| SparkLineWeather.js
| weatherProject.js
|
+---constants
| ActionTypes.js
| ApisKeys.js
| AutoConstCombination.js
| General.js
| URLs.js
|
+---containers
| | BookDetailsContainer.js
| | BookListContainer.js
| | CounterContainer.js
| | index.js
| |
| +---blog
| | blogProject.js
| | checkBox.js
| | inlinePost.js
| | newPost.js
| | removePostDialog.js
| | showBlog.js
| | singlePost.js
| |
| \---weather
| googleMaps.js
| searchBarContainer.js
| weatherList.js
|
+---context
| index.js
|
+---middlewares
| promiseMiddleWare.js
|
+---reducers
| | books.js
| | bookSelected.js
| | counter.js
| | index.js
| |
| +---blog
| | appendNewPostToDom.js
| | fetchedBlogs.js
| | fetchePost.js
| | getRemovePostDialog.js
| | postSaved.js
| | selectedPostsIds.js
| |
| \---weather
| fetchedWeather.js
|
+---routes
| index.js
| router_callback.js
|
+---selectors
| index.js
| selectedPost.js
|
+---simulate
| helpers.js
| weatherdata.json
| WeatherMap.js
|
+---store
| index.js
| store.dev.js
| store.prod.js
|
+---styles
| global-styles.js
|
+---tests
| CounterContainer.test.js
|
\---utils
registerServiceWorker.js
Package.json / webpack部分
"reactRedux:webPack:build": "webpack --mode production",
"reactRedux:webPack:dev": "webpack --mode development --watch",
"reactRedux:webPack:solve": "webpack -display-error-details"
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();
console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "index-bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./../public/index.html"
})
]
};
現在，我可以通過修改src/index.js解決此問題
從
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from 'store'
import Routes from 'routes'
import 'styles/global-styles'
import registerServiceWorker from 'utils/registerServiceWorker'
render(
<Provider store={configureStore()}>
<Routes />
</Provider>,
document.getElementById('root')
)
registerServiceWorker()
至
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store'
import Routes from './routes'
import './styles/global-styles'
import registerServiceWorker from './utils/registerServiceWorker'
render(
<Provider store={configureStore()}>
<Routes />
</Provider>,
document.getElementById('root')
)
registerServiceWorker()
但這會產生下一個錯誤
Hash: fe8872d4e25816fb9eea
Version: webpack 4.20.2
Time: 12754ms
Built at: 2018-09-30 09:15:23
1 asset
Entrypoint main = index-bundle.js
[21] ./store/index.js 142 bytes {0} [built]
[27] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[51] ./index.js + 43 modules 96.2 KiB {0} [built]
| ./index.js 434 bytes [built]
| ./styles/global-styles.js 1.72 KiB [built]
| ./routes/index.js 1.81 KiB [built]
| ./routes/router_callback.js 299 bytes [built]
| + 40 hidden modules
[52] ./store/store.prod.js + 3 modules 8.93 KiB {0} [built]
| ./store/store.prod.js 529 bytes [built]
| + 3 hidden modules
+ 68 hidden modules
ERROR in ./routes/router_callback.js
Module not found: Error: Can't resolve 'actions' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/router_callback.js 4:0-51
@ ./routes/index.js
@ ./index.js
ERROR in ./routes/index.js
Module not found: Error: Can't resolve 'components' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/index.js 21:0-66 39:15-21 45:15-27 48:15-29
@ ./index.js
ERROR in ./routes/index.js
Module not found: Error: Can't resolve 'containers' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/index.js 20:0-78 42:15-31 51:15-26 54:15-22 57:15-23
@ ./index.js
ERROR in ./store/store.prod.js
Module not found: Error: Can't resolve 'reducers' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\store'
@ ./store/store.prod.js 3:0-35 9:36-47
@ ./store/index.js
@ ./index.js
ERROR in ./routes/router_callback.js
Module not found: Error: Can't resolve 'store' in 'C:\ncourses\nodejs\ElectronWorks\Combine\src\routes'
@ ./routes/router_callback.js 3:0-26
@ ./routes/index.js
@ ./index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
而且我知道如何解決此錯誤也make all imports relative to ./src
例如在src/routes/router_callback.js
轉換導入來源
import store from 'store';
import {testLoadDataInRouterInit} from 'actions';
至
import store from './../store';
import {testLoadDataInRouterInit} from './../actions';
這將消除相對於./routes/router_callback.js的錯誤
但這不是邏輯上遍歷所有文件並修改所有導入的操作，而且我不明白為什么webpack.config.json context選項不能解決此問題
所以我需要任何解決方案將./src/標記為import的根目錄另外，如果您可以解釋為什么webpack會采取這種奇怪的行為
或者ugly-solution任何執行路徑轉換操作的工具， eg. node package eg. node package
解決步驟
我通過使用resolve.alias解決了問題
在webpack.config.js中
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();
console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "index-bundle.js"
},
resolve: {
alias: {
store:path.resolve(__dirname, 'src/store/'),
actions:path.resolve(__dirname, 'src/actions/'),
assets:path.resolve(__dirname, 'src/assets/'),
components:path.resolve(__dirname, 'src/components/'),
containers:path.resolve(__dirname, 'src/containers/'),
constants:path.resolve(__dirname, 'src/constants/'),
context:path.resolve(__dirname, 'src/context/'),
selectors:path.resolve(__dirname, 'src/selectors/'),
middlewares:path.resolve(__dirname, 'src/middlewares/'),
reducers:path.resolve(__dirname, 'src/reducers/'),
routes:path.resolve(__dirname, 'src/routes/'),
simulate:path.resolve(__dirname, 'src/simulate/'),
styles:path.resolve(__dirname, 'src/styles/'),
tests:path.resolve(__dirname, 'src/tests/'),
utils:path.resolve(__dirname, 'src/utils/'),
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./../public/index.html"
})
]
};
但是現在這會產生下一個錯誤
Hash: d1dcce3dbddfd7e67373
Version: webpack 4.20.2
Time: 1565ms
Built at: 2018-09-30 09:53:04
1 asset
Entrypoint main = index-bundle.js
[0] ./index.js 1.93 KiB {0} [built] [failed] [1 error]
ERROR in ./index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] C:\ncourses\nodejs\ElectronWorks\Combine\src\index.js: Unknown option: .inherits. Check out https://babeljs.io/
docs/en/babel-core/#options for more information about options.
at throwUnknownError (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:123:11)
at Object.keys.forEach.key (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:107:
5)
at Array.forEach (<anonymous>)
at validateNested (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:83:21)
at validate (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:74:10)
at instantiatePreset (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:244:36)
at cachedFunction (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\caching.js:33:19)
at loadPresetDescriptor (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:235:45)
at config.presets.reduce (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:77:21)
at Array.reduce (<anonymous>)
at recurseDescriptors (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:74:38)
at loadFullConfig (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:108:6)
at process.nextTick (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\transform.js:28:33)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
先前與Babel相關的錯誤
我解決了前面的問題，只需將.babelrc設置為
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
}
對我來說這會導致svg問題
Hash: 0774fcb11803ab0dab91
Version: webpack 4.20.2
Time: 25132ms
Built at: 2018-09-30 10:12:21
1 asset
Entrypoint main = index-bundle.js
[3] ./constants/ActionTypes.js 665 bytes {0} [built]
[6] ../node_modules/redux-form/es/structure/plain/index.js + 6 modules 6.96 KiB {0} [built]
| 7 modules
[22] ../node_modules/lodash-es/_baseGetTag.js + 2 modules 2.44 KiB {0} [built]
| 3 modules
[55] ../node_modules/lodash-es/isArguments.js + 1 modules 1.48 KiB {0} [built]
| 2 modules
[72] ../node_modules/lodash-es/_baseIsEqual.js + 22 modules 22 KiB {0} [built]
| 23 modules
[73] ../node_modules/lodash-es/keys.js + 2 modules 1.83 KiB {0} [built]
| 3 modules
[74] ../node_modules/lodash-es/isTypedArray.js + 2 modules 3.19 KiB {0} [built]
| 3 modules
[82] ./simulate/helpers.js 1.01 KiB {0} [built]
[143] ./store/index.js 142 bytes {0} [built]
[144] ./reducers/blog/appendNewPostToDom.js 1020 bytes {0} [built]
[145] ./reducers/blog/selectedPostsIds.js 1.07 KiB {0} [built]
[219] ./assets/logo.svg 576 bytes {0} [built] [failed] [1 error]
[222] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[470] ./index.js + 164 modules 500 KiB {0} [built]
| ./containers/blog/removePostDialog.js 6.14 KiB [built]
| ./index.js 426 bytes [built]
| ./routes/index.js 1.81 KiB [built]
| ./routes/router_callback.js 299 bytes [built]
| ./containers/index.js 698 bytes [built]
| ./containers/blog/inlinePost.js 6.49 KiB [built]
| ./containers/blog/singlePost.js 5.44 KiB [built]
| ./styles/global-styles.js 1.72 KiB [built]
| ./containers/CounterContainer.js 4.06 KiB [built]
| ./containers/blog/showBlog.js 5.7 KiB [built]
| ./containers/blog/newPost.js 9.83 KiB [built]
| ./containers/blog/blogProject.js 9.26 KiB [built]
| ./containers/weather/weatherList.js 5.28 KiB [built]
| ./containers/weather/searchBarContainer.js 4.22 KiB [built]
| ./containers/BookDetailsContainer.js 2.89 KiB [built]
| + 150 hidden modules
[471] ./store/store.prod.js + 15 modules 41.4 KiB {0} [built]
| ./store/store.prod.js 529 bytes [built]
| ./reducers/index.js 947 bytes [built]
| ./reducers/blog/postSaved.js 475 bytes [built]
| ./reducers/counter.js 466 bytes [built]
| ./reducers/bookSelected.js 392 bytes [built]
| ./reducers/weather/fetchedWeather.js 1.2 KiB [built]
| ./reducers/blog/fetchePost.js 447 bytes [built]
| ./reducers/books.js 196 bytes [built]
| ./reducers/blog/getRemovePostDialog.js 569 bytes [built]
| ./reducers/blog/fetchedBlogs.js 530 bytes [built]
| + 6 hidden modules
+ 551 hidden modules
ERROR in ./assets/logo.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
| <g fill="#764ABC">
| <path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/>
@ ./components/Header.js 42:0-35 62:13-17
@ ./components/index.js
@ ./routes/index.js
@ ./index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我通過使用inline-react-svg插件解決了svg問題
{
"presets": ["@babel/env", "@babel/react"],
"plugins":[
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"inline-react-svg"
]
}
另外，我們需要更改header.js中的導入
import logo from 'assets/logo.svg'
至
import logo from '../assets/logo.svg'
最后結果
Hash: a38f27a1d8891a88af43
Version: webpack 4.20.2
Time: 24274ms
Built at: 2018-09-30 10:29:01
Asset Size Chunks Chunk Names
index-bundle.js 880 KiB 0 [emitted] [big] main
index.html 1.62 KiB [emitted]
Entrypoint main [big] = index-bundle.js
[3] ./constants/ActionTypes.js 665 bytes {0} [built]
[6] ../node_modules/redux-form/es/structure/plain/index.js + 6 modules 6.96 KiB {0} [built]
| 7 modules
[22] ../node_modules/lodash-es/_baseGetTag.js + 2 modules 2.44 KiB {0} [built]
| 3 modules
[48] ../node_modules/lodash-es/_Stack.js + 5 modules 2.78 KiB {0} [built]
| 6 modules
[55] ../node_modules/lodash-es/isArguments.js + 1 modules 1.48 KiB {0} [built]
| 2 modules
[72] ../node_modules/lodash-es/_baseIsEqual.js + 22 modules 22 KiB {0} [built]
| 23 modules
[73] ../node_modules/lodash-es/keys.js + 2 modules 1.83 KiB {0} [built]
| 3 modules
[74] ../node_modules/lodash-es/isTypedArray.js + 2 modules 3.19 KiB {0} [built]
| 3 modules
[82] ./simulate/helpers.js 1.01 KiB {0} [built]
[143] ./store/index.js 142 bytes {0} [built]
[144] ./reducers/blog/appendNewPostToDom.js 1020 bytes {0} [built]
[145] ./reducers/blog/selectedPostsIds.js 1.07 KiB {0} [built]
[221] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[469] ./index.js + 164 modules 501 KiB {0} [built]
| ./containers/blog/removePostDialog.js 6.14 KiB [built]
| ./index.js 426 bytes [built]
| ./routes/index.js 1.81 KiB [built]
| ./routes/router_callback.js 299 bytes [built]
| ./containers/index.js 698 bytes [built]
| ./containers/blog/inlinePost.js 6.49 KiB [built]
| ./containers/blog/singlePost.js 5.44 KiB [built]
| ./styles/global-styles.js 1.72 KiB [built]
| ./containers/CounterContainer.js 4.06 KiB [built]
| ./containers/blog/showBlog.js 5.7 KiB [built]
| ./containers/blog/newPost.js 9.83 KiB [built]
| ./containers/blog/blogProject.js 9.26 KiB [built]
| ./containers/weather/weatherList.js 5.28 KiB [built]
| ./containers/weather/searchBarContainer.js 4.22 KiB [built]
| ./containers/BookDetailsContainer.js 2.89 KiB [built]
| + 150 hidden modules
[470] ./store/store.prod.js + 15 modules 41.4 KiB {0} [built]
| ./store/store.prod.js 529 bytes [built]
| ./reducers/index.js 947 bytes [built]
| ./reducers/blog/postSaved.js 475 bytes [built]
| ./reducers/counter.js 466 bytes [built]
| ./reducers/bookSelected.js 392 bytes [built]
| ./reducers/weather/fetchedWeather.js 1.2 KiB [built]
| ./reducers/blog/fetchePost.js 447 bytes [built]
| ./reducers/books.js 196 bytes [built]
| ./reducers/blog/getRemovePostDialog.js 569 bytes [built]
| ./reducers/blog/fetchedBlogs.js 530 bytes [built]
| + 6 hidden modules
+ 550 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index-bundle.js (880 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (880 KiB)
index-bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
Done in 26.76s.
我通過使用resolve.alias解決了問題
在webpack.config.js中
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config();
console.log('OSAMA,',path.join(__dirname, "src"));
module.exports = {
context: path.join(__dirname, "src"),
entry: "./index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "index-bundle.js"
},
resolve: {
alias: {
store:path.resolve(__dirname, 'src/store/'),
actions:path.resolve(__dirname, 'src/actions/'),
assets:path.resolve(__dirname, 'src/assets/'),
components:path.resolve(__dirname, 'src/components/'),
containers:path.resolve(__dirname, 'src/containers/'),
constants:path.resolve(__dirname, 'src/constants/'),
context:path.resolve(__dirname, 'src/context/'),
selectors:path.resolve(__dirname, 'src/selectors/'),
middlewares:path.resolve(__dirname, 'src/middlewares/'),
reducers:path.resolve(__dirname, 'src/reducers/'),
routes:path.resolve(__dirname, 'src/routes/'),
simulate:path.resolve(__dirname, 'src/simulate/'),
styles:path.resolve(__dirname, 'src/styles/'),
tests:path.resolve(__dirname, 'src/tests/'),
utils:path.resolve(__dirname, 'src/utils/'),
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./../public/index.html"
})
]
};
但是現在這會產生下一個錯誤
Hash: d1dcce3dbddfd7e67373
Version: webpack 4.20.2
Time: 1565ms
Built at: 2018-09-30 09:53:04
1 asset
Entrypoint main = index-bundle.js
[0] ./index.js 1.93 KiB {0} [built] [failed] [1 error]
ERROR in ./index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] C:\ncourses\nodejs\ElectronWorks\Combine\src\index.js: Unknown option: .inherits. Check out https://babeljs.io/
docs/en/babel-core/#options for more information about options.
at throwUnknownError (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:123:11)
at Object.keys.forEach.key (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:107:
5)
at Array.forEach (<anonymous>)
at validateNested (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:83:21)
at validate (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\validation\options.js:74:10)
at instantiatePreset (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:244:36)
at cachedFunction (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\caching.js:33:19)
at loadPresetDescriptor (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:235:45)
at config.presets.reduce (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:77:21)
at Array.reduce (<anonymous>)
at recurseDescriptors (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:74:38)
at loadFullConfig (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\config\full.js:108:6)
at process.nextTick (C:\ncourses\nodejs\ElectronWorks\Combine\node_modules\@babel\core\lib\transform.js:28:33)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
先前與Babel相關的錯誤
所以任何靈魂或者我需要在新問題中發帖
我解決了前面的問題，只需將.babelrc設置為
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
}
對我來說這會導致svg問題
Hash: 0774fcb11803ab0dab91
Version: webpack 4.20.2
Time: 25132ms
Built at: 2018-09-30 10:12:21
1 asset
Entrypoint main = index-bundle.js
[3] ./constants/ActionTypes.js 665 bytes {0} [built]
[6] ../node_modules/redux-form/es/structure/plain/index.js + 6 modules 6.96 KiB {0} [built]
| 7 modules
[22] ../node_modules/lodash-es/_baseGetTag.js + 2 modules 2.44 KiB {0} [built]
| 3 modules
[55] ../node_modules/lodash-es/isArguments.js + 1 modules 1.48 KiB {0} [built]
| 2 modules
[72] ../node_modules/lodash-es/_baseIsEqual.js + 22 modules 22 KiB {0} [built]
| 23 modules
[73] ../node_modules/lodash-es/keys.js + 2 modules 1.83 KiB {0} [built]
| 3 modules
[74] ../node_modules/lodash-es/isTypedArray.js + 2 modules 3.19 KiB {0} [built]
| 3 modules
[82] ./simulate/helpers.js 1.01 KiB {0} [built]
[143] ./store/index.js 142 bytes {0} [built]
[144] ./reducers/blog/appendNewPostToDom.js 1020 bytes {0} [built]
[145] ./reducers/blog/selectedPostsIds.js 1.07 KiB {0} [built]
[219] ./assets/logo.svg 576 bytes {0} [built] [failed] [1 error]
[222] ./utils/registerServiceWorker.js 3.91 KiB {0} [built]
[470] ./index.js + 164 modules 500 KiB {0} [built]
| ./containers/blog/removePostDialog.js 6.14 KiB [built]
| ./index.js 426 bytes [built]
| ./routes/index.js 1.81 KiB [built]
| ./routes/router_callback.js 299 bytes [built]
| ./containers/index.js 698 bytes [built]
| ./containers/blog/inlinePost.js 6.49 KiB [built]
| ./containers/blog/singlePost.js 5.44 KiB [built]
| ./styles/global-styles.js 1.72 KiB [built]
| ./containers/CounterContainer.js 4.06 KiB [built]
| ./containers/blog/showBlog.js 5.7 KiB [built]
| ./containers/blog/newPost.js 9.83 KiB [built]
| ./containers/blog/blogProject.js 9.26 KiB [built]
| ./containers/weather/weatherList.js 5.28 KiB [built]
| ./containers/weather/searchBarContainer.js 4.22 KiB [built]
| ./containers/BookDetailsContainer.js 2.89 KiB [built]
| + 150 hidden modules
[471] ./store/store.prod.js + 15 modules 41.4 KiB {0} [built]
| ./store/store.prod.js 529 bytes [built]
| ./reducers/index.js 947 bytes [built]
| ./reducers/blog/postSaved.js 475 bytes [built]
| ./reducers/counter.js 466 bytes [built]
| ./reducers/bookSelected.js 392 bytes [built]
| ./reducers/weather/fetchedWeather.js 1.2 KiB [built]
| ./reducers/blog/fetchePost.js 447 bytes [built]
| ./reducers/books.js 196 bytes [built]
| ./reducers/blog/getRemovePostDialog.js 569 bytes [built]
| ./reducers/blog/fetchedBlogs.js 530 bytes [built]
| + 6 hidden modules
+ 551 hidden modules
ERROR in ./assets/logo.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
| <g fill="#764ABC">
| <path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/>
@ ./components/Header.js 42:0-35 62:13-17
@ ./components/index.js
@ ./routes/index.js
@ ./index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ../node_modules/html-webpack-plugin/lib/loader.js!../public/index.html 1.79 KiB {0} [built]
+ 3 hidden modules
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我通過使用inline-react-svg插件解決了svg問題
{
"presets": ["@babel/env", "@babel/react"],
"plugins":[
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"inline-react-svg"
]
}
另外，我們需要更改header.js中的導入
import logo from 'assets/logo.svg'
至
import logo from '../assets/logo.svg'
如何使用 Webpack 構建 React 應用程序並導入資產文件夾？
[英]How can I build a React app with Webpack and import an assets folder?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.