2

I've been trying to code-split my concept website so far, but it just doesn't seem to work. I've got a STLMain component(STLMain.js):

import React from 'react';

export default () => (
  <div>
    STLMain
  </div>
);

Which is used in STLMainLoadable.js:

import React from 'react';
import Loadable from 'react-loadable';

const loading = () => (
  <div>
    Loading...
  </div>
);

export default Loadable({
  loader: () => import('./STLMain'),
  loading
});

Which is then used in my Router.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './main_pages/Home';
import NotFound from './main_pages/NotFound';
import STLMainLoadable from './main_pages/STLMainLoadable';
import Navigation from './navigation/Navigation';

export default () => (
  <BrowserRouter>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/STLMain" component={STLMainLoadable} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);

And every time I go to localhost:8080/STLMain I get two errors in the console:

1.GET http://localhost:8080/0.bundle.js 404 (Not Found)
2.Refused to execute script from 'http://localhost:8080/0.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

And yes, I have syntax-dynamic-import babel plugin installed. What can I do to fix this?

Semetg
  • 129
  • 2
  • 8
  • Seems that code splitting is working properly, you have probably an issue on _serving_ the resource. Try to load directly http://localhost:8080/0.bundle.js (or whatever name you have) in the browser. I think you are not serving the JavaScript. Are you using the yarn dev server or... ? – keul Jul 27 '18 at 15:21
  • I'm using webpack dev-server – Semetg Jul 27 '18 at 15:28
  • If I go to http://localhost:8080/0.bundle.js it says: "Cannot GET /0.bundle.js" – Semetg Jul 27 '18 at 15:36

1 Answers1

1

If you haven't already, try setting output.publicPath = '/' in your webpack.config.js:

output: {
  ...
  publicPath: '/',
  ...
}

Credit where credit is due

Aron Høyer
  • 147
  • 1
  • 11
  • Yes, it works, but instead of root publicPath: "/" you have to write down an url, your static files are served by your server. In my case it was "/static/js" – igolkotek Sep 10 '18 at 14:45