My journey to deploy my app on Heroku has hit a roadblock. The import statements, like import cors from 'cors', are causing the app to fail in production with the "Cannot Load ES6 Modules in Common JS" error. Interestingly, everything runs smoothly locally.
Trying to fix this issue by adding
"type": "module"package.json results in a new set of errors that prevent the app from running locally. I suspect the problem lies in how I'm setting up sequelize and its models, but I can't be certain. I need help with the correct syntax for imports to resolve this issue...I think.
The errors along with snippets from package.json and index.js are provided below.
Error Text
[nodemon] starting `babel-node src/index.js`
internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/jeff/Clients/Bummer/Code/Server/src/models' is not supported resolving ES modules imported from /Users/jeff/Clients/Bummer/Code/Server/src/index.js
at finalizeResolution (internal/modules/esm/resolve.js:272:17)
at moduleResolve (internal/modules/esm/resolve.js:699:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
at Loader.resolve (internal/modules/esm/loader.js:85:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///Users/jeff/Clients/Bummer/Code/Server/src/models'
}
[nodemon] app crashed - waiting for file changes before starting...
Package.JSON
{
"name": "bummer",
"type": "module",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node src/index.js",
"dev": "nodemon --exec babel-node src/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
// other properties omitted for brevity
}
Index.js
import cors from 'cors';
import express from 'express';
import models, { sequelize } from './models';
// import routes from './routes';
//Initiaze Express
const app = express();
const routes = require('./routes');
//Helpers for Spotify oAuth
const cookieParser = require('cookie-parser')
// Include Middleware
app.use(express.static(__dirname + '/public'))
.use(cors())
.use(cookieParser())
.use(express.json())
.use(express.urlencoded({ extended: true }))
require('dotenv').config()
// Include all Models
app.use((req, res, next) => {
req.context = {
models,
};
next();
});
// Load Routes from Router Index
app.use('/', routes);
sequelize.sync().then(() => {
app.listen(process.env.PORT, () => {
console.log(`Example app listening on port ${process.env.PORT}!`)
});
});
Any insights or tips would be greatly appreciated! Thank you!