Razzle: Unexpected token import

[Bournegit]

/Users/bsqr/Documents/Projects/tfs-razzle-new/razzle/node_modules/react-bootstrap/es/Table.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from "@babel/runtime-corejs2/helpers/esm/extends";                                                   ^^^^^^


SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.react-bootstrap/es/Table (/Users/bsqr/Documents/Projects/tfs-razzle-new/razzle/external "react-bootstrap/es/Table":1:1)

Getting this error on yarn start.

[Bournegit]

Worked after changing

import Table from "react-bootstrap/es/Table"
to
import {Table} from "react-bootstrap";

Any Idea what was wrong?
Doesn't babel transpile the files within node_modules folder automatically?

[jaredpalmer]

CRA 2 does this but at the moment Razzle does not. We probably should though.

[jaredpalmer]

We would need to do something like this:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L396-L433

[max-l]

Getting the same error in a dependent module
in the razzle react-native-web example project

/home/maxou/dev/with-react-native-web/node_modules/react-native-web/dist/exports/StyleSheet/index.js:1
(function (exports, require, module, __filename, __dirname) { import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

[alidlorenzo]

for anyone that encounters this, you can find a temporary fix here: https://github.com/jaredpalmer/razzle/issues/689

[nikku]

The most simple solution I've found is to disable the externals configuration via your local razzle.config.js:

// razzle.config.js

module.exports = {
  modify: (config) => {
    delete config.externals;

    return config;
  },
};

[hazarartuner]

Thanks @nikku it works 💃

[fivethreeo]

Working on this now :)

[fivethreeo]

Should be fixed in dev