Question

我正在构建一个使用CoreUI React（创建反应应用程序基础）和React-Loadable的应用程序。但是，该加载可在localhost上进行，但在实时或生产环境中均无法进行。不知道这是怎么发生的或为什么发生的，但是这些是我在看控制台时遇到的问题。

static/js/48.18cee83f.chunk.js:1 Uncaught SyntaxError: Unexpected token <
static/js/61.8224cda8.chunk.js:1 Uncaught SyntaxError: Unexpected token <
static/js/49.bdf27489.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/buttons/static/js/28.2e6c8d6e.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/buttons/static/js/25.85533d01.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/buttons/static/js/27.53e47b8d.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/base/static/js/10.1bdd7c65.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/base/static/js/11.bf2f6d02.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/base/static/js/12.48a709d0.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/base/static/js/13.610a3a4a.chunk.js:1 Uncaught SyntaxError: Unexpected token <
/base/static/js/14.b03e9b2f.chunk.js:1 Uncaught SyntaxError: Unexpected token <

不确定我的webpack块在哪里出错，但是我需要加载这些组件！

**这是我的webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);

module.exports = (env = {}) => {
  return {
    entry: {
      index: [SRC_DIR + '/index.js']
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js'
    },
    // watch: true,
    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: BUILD_DIR,
      //   port: 9001,
      compress: true,
      hot: true,
      open: true
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(extractSCSS.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {alias: {'../img': '../public/img'}}
              },
              {
                loader: 'sass-loader'
              }
            ]
          }))
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [
            {
              // loader: 'url-loader'
              loader: 'file-loader',
              options: {
                name: './img/[name].[hash].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]'
          }
        }]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
      new webpack.NamedModulesPlugin(),
      extractCSS,
      extractSCSS,
      new HtmlWebpackPlugin(
        {
          inject: true,
          template: './public/index.html'
        }
      ),
      new CopyWebpackPlugin([
          {from: './public/img', to: 'img'}
        ],
        {copyUnmodified: false}
      )
    ]
  }
};

这是一个示例随机块文件：

{"version":3,"sources":["_nav.js","routes.js","containers/DefaultLayout/DefaultLayout.js"],"names":["_nav","items","name","url","icon","title","wrapper","element","attributes","children","badge","variant","text","divider","class","Breadcrumbs","React","lazy","__webpack_require__","e","then","bind","DataTable","Promise","all","routes","path","exact","component","DefaultLayout","DefaultAside","DefaultFooter","DefaultHeader","props","_this","Object","classCallCheck","this","possibleConstructorReturn","getPrototypeOf","call","loading","react_default","a","createElement","className","state","redirect","preventDefault","history","push","data","JSON","parse","localStorage","getItem","console","log","_this2","Redirect","to","es","fixed","react","fallback","onLogout","signOut","display","assign","navConfig","navigation","appRoutes","reactstrap_es","fluid","Switch","map","route","idx","Route","key","render","from","Component"],"mappings":"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","file":"static/js/2.e44d7206.chunk.js","sourcesContent":["export default {\r\n  items: [\r\n    {\r\n      name: 'Dashboard',\r\n      url: '/dashboard',\r\n      icon: 'icon-speedometer',\r\n    },\r\n    {\r\n      title: true,\r\n      name: 'Functions',\r\n      wrapper: {\r\n        element: '',\r\n        attributes: {},\r\n      },\r\n    },\r\n    {\r\n      name: 'Sites',\r\n      url: '/base',\r\n      icon: 'icon-puzzle',\r\n      children: [\r\n        {\r\n          name: 'Site Groups',\r\n          url: '/base/breadcrumbs',\r\n          icon: 'icon-puzzle',\r\n        },\r\n        {\r\n          name: 'Sites',\r\n          url: '/base/cards',\r\n          icon: 'icon-puzzle',\r\n        },\r\n        {\r\n          name: 'Themes',\r\n          url: '/base/carousels',\r\n          icon: 'icon-puzzle',\r\n        },\r\n        {\r\n          name: 'Sequences',\r\n          url: '/base/collapses',\r\n          icon: 'icon-puzzle',\r\n        },\r\n        {\r\n          name: 'Landing Pages',\r\n          url: '/base/dropdowns',\r\n          icon: 'icon-puzzle'\r\n        },\r\n      ],\r\n    },\r\n    {\r\n      name: 'Campaigns',\r\n      url: '/buttons',\r\n      icon: 'icon-cursor',\r\n      children: [\r\n        {\r\n          name: 'Answer/Action',\r\n          url: '/buttons/buttons',\r\n          icon: 'icon-cursor',\r\n        },\r\n        {\r\n          name: 'Post Waterfall',\r\n          url: '/buttons/brand-buttons',\r\n          icon: 'icon-cursor',\r\n        },\r\n        {\r\n          name: 'Handlers',\r\n          url: '/buttons/button-groups',\r\n          icon: 'icon-cursor',\r\n        },\r\n        {\r\n          name: 'Offer Templates',\r\n          url: '/buttons/button-dropdowns',\r\n          icon: 'icon-cursor',\r\n        },\r\n        {\r\n          name: 'Offer Wall Ads',\r\n          url: '/buttons/loading-buttons',\r\n          icon: 'icon-cursor',\r\n          badge: {\r\n            variant: 'danger',\r\n            text: 'PRO',\r\n          },\r\n        },\r\n          {\r\n            name: 'Offers',\r\n            url: '/buttons/button-dropdowns',\r\n            icon: 'icon-cursor',\r\n          }\r\n      ],\r\n    },      \r\n    {\r\n      name: 'Users',\r\n      url: '/tables/data-table',\r\n      icon: 'icon-list',\r\n      children: [\r\n        {\r\n          name: 'Users & Permissions',\r\n          url: '/tables/data-table',\r\n          icon: 'icon-list',\r\n        },\r\n        {\r\n          name: 'Profiles',\r\n          url: '/tables/tables',\r\n          icon: 'icon-list'\r\n        },\r\n        {\r\n          name: 'Attributes',\r\n          url: '/tables/tables',\r\n          icon: 'icon-list'\r\n        },\r\n        {\r\n          name: 'Appends',\r\n          url: '/tables/tables',\r\n          icon: 'icon-list'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      name: 'Settings',\r\n      url: '/widgets',\r\n      icon: 'icon-calculator',\r\n      badge: {\r\n        variant: 'info',\r\n        text: 'NEW',\r\n      },\r\n    },\r\n    {\r\n      divider: true,\r\n      class: 'm-2'\r\n    },\r\n  ]\r\n};\r\n","import React from 'react';\r\nimport DefaultLayout from './containers/DefaultLayout';\r\n\r\nconst Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));\r\nconst DataTable = React.lazy(() => import('./views/Tables/DataTable'));\r\nconst Dashboard = React.lazy(() => import('./views/Dashboard'));\r\nconst Navbars = React.lazy(() => import('./views/Base/Navbars'));\r\n\r\nconst routes = [\r\n  { path: '/', exact: true, name: 'Home', component: DefaultLayout },\r\n  { path: '/dashboard', name: 'Dashboard', component: Dashboard },\r\n  { path: '/tables/data-table', exact: true, name: 'Data Table', component: DataTable },\r\n  { path: '/base/navbars', name: 'Navbars', component: Navbars },\r\n  { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },\r\n\r\n];\r\n\r\nexport default routes;\r\n\r\n  ","import React, { Component, Suspense } from 'react';\r\nimport { Redirect, Route, Switch } from 'react-router-dom';\r\nimport { Container } from 'reactstrap';\r\n\r\n\r\nimport {\r\n  AppAside,\r\n  AppBreadcrumb,\r\n  AppFooter,\r\n  AppHeader,\r\n  AppSidebar,\r\n  AppSidebarFooter,\r\n  AppSidebarForm,\r\n  AppSidebarHeader,\r\n  AppSidebarMinimizer,\r\n  AppSidebarNav,\r\n} from '@coreui/react';\r\n// sidebar nav config\r\nimport navigation from '../../_nav';\r\n// routes config\r\nimport routes from '../../routes';\r\nconst DefaultAside = React.lazy(() => import('./DefaultAside'));\r\nconst DefaultFooter = React.lazy(() => import('./DefaultFooter'));\r\nconst DefaultHeader = React.lazy(() => import('./DefaultHeader'));\r\n\r\nclass DefaultLayout extends Component {\r\n  loading = () => <div className=\"animated fadeIn pt-1 text-center\">Loading...</div>\r\n\r\n  signOut(e) {\r\n    e.preventDefault()\r\n    this.props.history.push('/login')\r\n  }\r\n  \r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n       name:'',\r\n       redirect: false,\r\n   };\r\n}\r\n\r\ncomponentDidMount() {\r\n     let data = JSON.parse(localStorage.getItem('userData'));\r\n     console.log(data);\r\n}\r\n\r\n  render() {\r\n    if(!localStorage.getItem('userData') || this.state.redirect){\r\n    return (<Redirect to={'/login'}/>)\r\n}\r\n\r\n    return (\r\n      <div className=\"app\">\r\n            <AppHeader fixed>\r\n          <Suspense  fallback={this.loading()}>\r\n            <DefaultHeader onLogout={e=>this.signOut(e)}/>\r\n          </Suspense>\r\n        </AppHeader>\r\n        <div className=\"app-body\">\r\n          <AppSidebar fixed display=\"lg\">\r\n            <AppSidebarHeader />\r\n            <AppSidebarForm />\r\n            <Suspense>\r\n            <AppSidebarNav navConfig={navigation} {...this.props} />\r\n            </Suspense>\r\n            <AppSidebarFooter />\r\n            <AppSidebarMinimizer />\r\n          </AppSidebar>\r\n          <main className=\"main\">\r\n            <AppBreadcrumb appRoutes={routes}/>\r\n            <Container fluid>\r\n            <Suspense fallback={this.loading()}>\r\n                <Switch>\r\n                  {routes.map((route, idx) => {\r\n                    return route.component ? (\r\n                      <Route\r\n                        key={idx}\r\n                        path={route.path}\r\n                        exact={route.exact}\r\n                        name={route.name}\r\n                        render={props => (\r\n                          <route.component {...props} />\r\n                        )} />\r\n                    ) : (null);\r\n                  })}\r\n                  <Redirect from=\"/\" to=\"/dashboard\" />\r\n                </Switch>\r\n              </Suspense>\r\n            </Container>\r\n          </main>\r\n          <AppAside fixed>\r\n          <Suspense fallback={this.loading()}>\r\n              <DefaultAside />\r\n            </Suspense>\r\n          </AppAside>\r\n        </div>\r\n        <AppFooter>\r\n        <Suspense fallback={this.loading()}>\r\n            <DefaultFooter />\r\n          </Suspense>\r\n        </AppFooter>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default DefaultLayout;"],"sourceRoot":""}

在生产中，我也遇到这个问题，当我单击链接时，它现在什么也不显示。

Answer 1

我也遇到过同样的问题。它在开发环境中工作，但不在生产环境中工作。对我来说，它在将React（16.7.0），react-dom和Node版本更新到最新版本之后才起作用

要更新React和react-dom

npm install --save react@latest

npm install --save react-dom@latest

要更新节点

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

使用webpack和React CoreUI在生产中代码拆分无法正常工作

1 个答案: