loadable 사용해서 코드스플리팅 적용시 나타나는 에러

Question

안녕하세요

로더블 적용후 npm start 하면 이러한 청크에러가 뜹니다.

해결방법이 무엇인지 모르겠습니다..

-

아래 코드는 run dev 했을때 터미널에 나타나는 코드 입니다. 

```js

> sleact-front@1.0.0 dev /home/dahee/projects/inflearn/sleact/alecture > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack serve --env development <w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration. <i> [webpack-dev-server] [HPM] Proxy created: /api/ -> http://localhost:3095 <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:3090/ <i> [webpack-dev-server] On Your Network (IPv4): http://172.30.1.10:3090/ <i> [webpack-dev-server] Content not from webpack is served from '/home/dahee/projects/inflearn/sleact/alecture' directory <i> [webpack-dev-server] 404s will fallback to '/index.html' @babel/preset-env: `DEBUG` option Using targets: { "chrome": "94" } Using modules transform: auto Using plugins: syntax-class-static-block syntax-private-property-in-object syntax-class-properties syntax-numeric-separator syntax-nullish-coalescing-operator syntax-optional-chaining syntax-json-strings syntax-optional-catch-binding syntax-async-generators syntax-object-rest-spread syntax-dynamic-import proposal-export-namespace-from { } syntax-top-level-await Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set. asset app.js 1.73 MiB [emitted] (name: app) asset vendors-node_modules_emotion_styled_base_dist_emotion-styled-base_browser_esm_js-node_modules-55caac.js 170 KiB [emitted] (id hint: vendors) asset pages_SignUp_index_tsx.js 48.8 KiB [emitted] asset layouts_Workspace_index_tsx.js 3.2 KiB [emitted] asset pages_Login_index_tsx.js 3.15 KiB [emitted] runtime modules 31.4 KiB 16 modules orphan modules 10.3 KiB [orphan] 2 modules modules by path ./node_modules/ 1.59 MiB 219 modules modules by path ./pages/ 43 KiB ./pages/Login/index.tsx 1.19 KiB [built] [code generated] ./pages/SignUp/index.tsx 5.27 KiB [built] [code generated] ./pages/SignUp/styles.tsx 36.5 KiB [built] [code generated] modules by path ./layouts/ 3.3 KiB ./layouts/App/index.tsx 2.09 KiB [built] [code generated] ./layouts/Workspace/index.tsx 1.21 KiB [built] [code generated] ./client.tsx 1.26 KiB [built] [code generated] ./hooks/useinput.ts 1.33 KiB [built] [code generated] sleact (webpack 5.63.0) compiled successfully in 4851 ms

```

아래는 App.js에 있는 라우팅 코드 입니다. 

```js

import loadable from '@loadable/component'
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";

const LogIn = loadable(() => import('@pages/Login'));
const SignUp = loadable(() => import('@pages/SignUp'));
const Workspace = loadable(() => import('@layouts/Workspace'));

const App = () => {
return (
<Switch>
<Redirect exact path="/" to="/login" />
<Route path="/login" component={LogIn} />
<Route path="/signup" component={SignUp} />
<Route path="/workspace/:workspace" component={Workspace} />
</Switch>
)
}

export default App;

```

현재시점 webpack.config파일입니다

```js

import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

const isDevelopment = process.env.NODE_ENV !== 'production';

const config: webpack.Configuration = {
name: 'sleact',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@hooks': path.resolve(__dirname, 'hooks'),
'@components': path.resolve(__dirname, 'components'),
'@layouts': path.resolve(__dirname, 'layouts'),
'@pages': path.resolve(__dirname, 'pages'),
'@utils': path.resolve(__dirname, 'utils'),
'@typings': path.resolve(__dirname, 'typings'),
},
},
entry: {
app: './client',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['last 2 chrome versions'] },
debug: isDevelopment,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
env: {
development: {
plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')],
},
production: {
plugins: ['@emotion'],
},
},
 
},
exclude: path.join(__dirname, 'node_modules'),
},
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
}),
new ReactRefreshWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist/app.js',
},
devServer: {
historyApiFallback: true,
port: 3090,
devMiddleware: { publicPath: "/dist/" },
static: { directory: path.resolve(__dirname) },
proxy : {
'/api/': {
changeOrigin: true,
target:'http://localhost:3095'
}
}
},
};

```

react typescript 클론코딩

인프런 커뮤니티 질문&답변

loadable 사용해서 코드스플리팅 적용시 나타나는 에러