Canary branch still getting the "SyntaxError: Unexpected identifier" error for imports

[TidyIQ]

I upgraded to the canary version however I'm still getting the following error:

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.@tidyiq/core/next/_app (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:1108:18)
    at __webpack_require__ (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:23:31)
    at Module../pages/_app.js (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:1049:79)
    at __webpack_require__ (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:23:31)
    at Object.0 (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:1096:18)
    at __webpack_require__ (C:\Users\Me\Websites\Boilerplate\dist\.next\server\static\development\pages\_app.js:23:31)
C:\Users\Me\Websites\Boilerplate\dist\node_modules\@tidyiq\core\next\_app.js:1
(function (exports, require, module, __filename, __dirname) { import React, { useEffect } from "react";

Contents of node_modules/@tidyiq/core/next/_app.js:

import React, { useEffect } from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/styles";
import theme from "../theme/createTheme";
import { StateProvider } from "../state/store";
const AppProvider = ({ children }) => {
    useEffect(() => {
        const jssStyles = document.querySelector("#jss-server-side");
        if (jssStyles && jssStyles.parentNode) {
            jssStyles.parentNode.removeChild(jssStyles);
        }
    });
    return (React.createElement(StateProvider, null,
        React.createElement(ThemeProvider, { theme: theme },
            React.createElement(CssBaseline, null),
            children)));
};
export default AppProvider;

Contents of pages/app.js:

import React from "react";
import App, { Container } from "next/app";
import AppProvider from "@tidyiq/core/next/_app";
class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;
        return (React.createElement(Container, null,
            React.createElement(AppProvider, null,
                React.createElement(Component, Object.assign({}, pageProps)))));
    }
}
export default MyApp;

[timneutkens]

Maybe you have a babelrc up the directory tree. Can you provide a full reproduction in a repo.

[TidyIQ]

There's no .babelrc. Here's a repo - https://github.com/TidyIQ/nextjs-issue

[Timer]

@TidyIQ hey there! It seems this package was published with no CommonJS version -- so it's expected that this is happening. You'd need to properly publish the package (main key is commonjs, module key is ESM) or use next-transpile-modules to get this working.

[TidyIQ]

Hi @Timer thanks for your reply. I'm still having quite a bit of difficulty with this...

I'm using Typescript to compile from a src folder to a dist folder for my Next app. I'm also doing the same thing with an npm package I've created, and the package imports configuration settings from my Next app (e.g. an initial state object).

I've tried compiling both the app and the package to CommonJS modules but now I get the errors:

index.js:1 Error was not caught ReferenceError: exports is not defined
    at Module../state/reducers.js (reducers.js:14)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/@tidyiq/core/state/reducers/index.js (index.js:17)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/@tidyiq/core/state/store/index.js (index.js:26)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/@tidyiq/core/next/_app.js (_app.js:42)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../pages/_app.js (_app.js:6)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at next-client-pages-loader.js:3
    at register (page-loader.js:179)
    at PageLoader.registerPage (page-loader.js:221)
    at Array.register [as push] (index.js:280)
    at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.js!./ (next-client-pages-loader.js:2)
    at __webpack_require__ (bootstrap:788)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at _app.js?ts=1562050183029:1

Invalid HMR message: {"action":"addedPage","data":["/next/dist/pages/_error"]}
TypeError: Cannot read property 'pathname' of undefined

The contents of the ../state/reducers.js module that the error is referring to:

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
var actions_1 = require("./actions");
// ::::::::::::::::::::::::::::::::::::::::::::::::
// Test reducer
// ::::::::::::::::::::::::::::::::::::::::::::::::
var doSomethingReducer = (_a = {},
    _a[actions_1.DO_SOMETHING] = function (state, action) {
        var _a;
        return __assign({}, state, (_a = {}, _a[action.payload.stateName] = action.payload.value, _a));
    },
    _a);
var reducers = __assign({}, doSomethingReducer);
exports.default = reducers;

I'm not sure how to fix this. It seems there's an issue with Next's use of webpack (I'm not using webpack or babel in my npm package).

Any idea what the issue is here?

[TidyIQ]

Can this be opened again please? I'm not sure why it was closed.

[Timer]

@TidyIQ I cannot reproduce the issue with the code you've just provided.

Compiling the files by hand, using next-transpile-modules, or using the serverless target (which bundles node_modules) all work for me.

Unless you provide a full reproduction, there's nothing we can do to help.

[TidyIQ]

I provided the repo a few comments up - https://github.com/TidyIQ/nextjs-issue

[TidyIQ]

Oh sorry, you meant for the new issue with ReferenceError: exports is not defined. OK sure, I'll provide a repo shortly

[TidyIQ]

Here's the repo - https://github.com/TidyIQ/boilerplate

1. git clone https://github.com/TidyIQ/boilerplate.git
2. npm install to install dependencies for src folder
3. npm run build to compile the .tsx files in src to es5 (with commonjs modules) .js files in dist
4. cd dist
5. npm install to install dependencies for dist folder
6. npm run dev
7. Open browser to http://localhost:3066/
8. Look at the console for the error messages

You might notice that I haven't listed various packages you would expect in the package.json. This is because they are installed under the @tidyiq/core and @tidyiq/core-dev packages. Here are the repos for them:

• @tidyiq/core: Note that this is compiled in the same way as the boilerplate repo linked above (.tsx files to es5 commonjs .js files).
• @tidyiq/core-dev: Not used in the boilerplate dist folder, only for compiling typescript and including eslint configs for src folder

[Timer]

This looks like a webpack bug, for some reason it's not detecting commonjs and not providing the exports key. Can you please file it upstream?

 \***************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs2/core-js/object/assign */ "./node_modules/@babel/runtime-corejs2/core-js/object/assign.js");
/* harmony import */ var _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0__);




var __assign = undefined && undefined.__assign || function () {
  __assign = _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0___default.a || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var _a;

Object.defineProperty(exports, "__esModule", {
  value: true
});

var actions_1 = __webpack_require__(/*! ./actions */ "./state/actions.js");

var doSomethingReducer = (_a = {}, _a[actions_1.DO_SOMETHING] = function (state, action) {
  var _a;

  return __assign({}, state, (_a = {}, _a[action.payload.stateName] = action.payload.value, _a));
}, _a);

var reducers = __assign({}, doSomethingReducer);

exports.default = reducers;

/***/ }),

[Timer]

By the way, Next.js canary supports TypeScript OOTB and would greatly simplify your setup.

[TidyIQ]

Sorry, I'm still a bit new to using github. What do you mean "file it upstream"?

I tried using the canary branch but 1) the built in types are different/lacking compared to @types/next and requires refactoring a lot of my code to get it to work, and 2) I kept getting an error message about missing modules in next/server. I don't remember specifically what the error message was but after being unable to solve it for a couple of hours I just reverted back to the stable branch.

[Timer]

This appears to be an issue that needs to be opened on the Webpack issue tracker: https://github.com/webpack/webpack/issues

Effectively, the above code that you posted + my snippet displayed appears to be a bug in Webpack.

---

re: using canary -- I'd definitely encourage this path because it's being released as stable in a few days time. Please open separate issues if you're running into compatibility troubles.