Can't import the named export from non EcmaScript module

simonrumi · March 1, 2022, 4:31pm

Hi

My site name is stupefied-lamarr-20c8d9

On the server side of my app I have lambda functions and within those I’m using apollo-server-lambda and mongodb and am trying to upgrade both to a new major version

when I do that, on my local machine it builds, but when it starts to run I get a series of errors like this

ERROR in ../node_modules/@graphql-tools/mock/index.mjs 782:9-19
[1] Can't import the named export 'MapperKind' from non EcmaScript module (only default export is available)

Googling it, I found that the issue is that webpack is not handling .mjs files properly, so adding this to webpack.config.js was the fix:

module: {
		rules: [
			{ 
				test: /\.mjs$/,
				include: /node_modules/,
				type: 'javascript/auto'
			}
		]
	},

(There was more than one place I found this same answer, here is one example:
node.js - Can't import the named export XXXX from non EcmaScript module (only default export is available) - Stack Overflow)

My package.json file has a script like this

"scripts": {
   ...
   "build:lambda": "netlify-lambda build lambdaFunctions --config ./webpack.config.js",
}

Note that

“build:lambda” is in turn being called by another script, to build and run my local dev environment
lambdaFunctions is the folder where I have the source code for the lambda functions that are getting built (I think usually this is called just “lambda”)

My problem is that after adding the above code to webpack.config.js, it seems to have no effect

So my next thought was that I need to understand how the netlify-lambda build function uses webpack and that webpack.config.js file…can someone give me some pointers on that? Or if anyone is familiar with this issue and has specific advice, that’d be even better.

Thanks!
Simon

Here’s the full build log (this is just running locally):


> parent@1.0.0 dev
> cd ./serverLambda && npm run build:lambda && cd .. && npm run tailwind:css && concurrently "npm run client" "npm run lambda"


> server-lambda@1.0.0 build:lambda
> netlify-lambda build lambdaFunctions --config ./webpack.config.js

netlify-lambda: Building functions
reading the webpack.config.js file
Hash: 441f43cefd6fe09ebf40
Version: webpack 4.44.1
Time: 1673ms
Built at: 02/28/2022 8:25:53 AM
              Asset      Size            Chunks             Chunk Names
            auth.js    36 KiB              auth  [emitted]  auth
      authReturn.js  33.9 KiB        authReturn  [emitted]  authReturn
authReturnGoogle.js    33 KiB  authReturnGoogle  [emitted]  authReturnGoogle
     dbConnector.js  9.71 KiB       dbConnector  [emitted]  dbConnector
         graphql.js  67.8 KiB           graphql  [emitted]  graphql
       resolvers.js  50.3 KiB         resolvers  [emitted]  resolvers
Entrypoint auth = auth.js
Entrypoint authReturn = authReturn.js
Entrypoint authReturnGoogle = authReturnGoogle.js
Entrypoint dbConnector = dbConnector.js
Entrypoint graphql = graphql.js
Entrypoint resolvers = resolvers.js
[../config/keys.js] 190 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[../constants.js] 406 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[./auth.js] 1.83 KiB {auth} [built]
[./authReturn.js] 2.42 KiB {authReturn} [built]
[./authReturnGoogle.js] 2.85 KiB {authReturnGoogle} [built]
[./dbConnector.js] 1.1 KiB {dbConnector} {auth} {authReturn} {authReturnGoogle} {graphql} [built]
[./graphql.js] 2.46 KiB {graphql} [built]
[./helpers/authHelpers.js] 2.33 KiB {auth} {authReturn} {authReturnGoogle} [built]
[./helpers/facebookAuthHelpers.js] 3.69 KiB {auth} {authReturn} [built]
[./helpers/googleAuthHelpers.js] 2.15 KiB {auth} {authReturnGoogle} [built]
[./helpers/graphqlHelpers.js] 4.51 KiB {graphql} [built]
[./helpers/index.js] 1.93 KiB {auth} {authReturn} {authReturnGoogle} {graphql} {resolvers} [built]
[./helpers/logger.js] 677 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[./helpers/sheetHelpers.js] 6.93 KiB {graphql} {resolvers} [built]
[./resolvers.js] 11.2 KiB {resolvers} {graphql} [built]
    + 24 hidden modules

> parent@1.0.0 tailwind:css
> tailwind build client/src/css/tailwind.src.css -c client/tailwind.config.js -o client/src/css/tailwind.css

[deprecation] Running tailwindcss without -i, please provide an input file.

Done in 876ms.
[1] 
[1] > parent@1.0.0 lambda
[1] > npm run lambda --prefix serverLambda
[1]
[0]
[0] > parent@1.0.0 client
[0] > npm run start --prefix client
[0]
[0] 
[0] > client@0.1.0 start
[0] > react-scripts start
[0]
[1]
[1] > server-lambda@1.0.0 lambda
[1] > netlify-lambda serve lambdaFunctions
[1]
[1] netlify-lambda: Starting server
[0] [HPM] Proxy created: /.netlify/functions/,/.netlify/functions/auth,/.netlify/functions/authReturn  -> http://localhost:9000
[0] [HPM] Proxy rewrite rule created: "^/\.netlify/functions" ~> ""
[0] (node:2596) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:2596) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] Starting the development server...
[0]
[0] Compiled successfully!
[0]
[0] You can now view client in the browser.
[0]
[0]   Local:            http://localhost:3000
[0]   On Your Network:  http://10.0.0.17:3000
[0]
[0] Note that the development build is not optimized.
[0] To create a production build, use npm run build.
[0]
[0] asset static/js/bundle.js 4.02 MiB [emitted] (name: main) 1 related asset
[0] asset index.html 1.17 KiB [emitted]
[0] asset asset-manifest.json 190 bytes [emitted]
[0] cached modules 3.38 MiB (javascript) 28.1 KiB (runtime) [cached] 900 modules
[0] webpack 5.66.0 compiled successfully in 6032 ms
[0] [HPM] Error occurred while proxying request localhost:3000/graphql to http://localhost:9000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
[1] Hash: 64f7d85a9a8623b78716
[1] Version: webpack 4.44.1
[1] Time: 13414ms
[1] Built at: 02/28/2022 8:26:15 AM
[1]               Asset      Size            Chunks             Chunk Names
[1]             auth.js  19.1 MiB              auth  [emitted]  auth
[1]       authReturn.js   4.8 MiB        authReturn  [emitted]  authReturn
[1] authReturnGoogle.js  19.1 MiB  authReturnGoogle  [emitted]  authReturnGoogle
[1]      dbConnector.js  4.69 MiB       dbConnector  [emitted]  dbConnector
[1]          graphql.js  8.45 MiB           graphql  [emitted]  graphql
[1]        resolvers.js  8.43 MiB         resolvers  [emitted]  resolvers
[1] Entrypoint auth = auth.js
[1] Entrypoint authReturn = authReturn.js
[1] Entrypoint authReturnGoogle = authReturnGoogle.js
[1] Entrypoint dbConnector = dbConnector.js
[1] Entrypoint graphql = graphql.js
[1] Entrypoint resolvers = resolvers.js
[1] [../config/keys.js] 190 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[1] [../constants.js] 406 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[1] [../node_modules/apollo-server-lambda/dist/index.js] 1.6 KiB {graphql} {resolvers} [built]
[1] [../node_modules/googleapis/build/src/index.js] 57.4 KiB {auth} {authReturnGoogle} [built]
[1] [../node_modules/mongoose/index.js] 186 bytes {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[1] [../node_modules/ramda/es/index.js] 12.9 KiB {auth} {authReturn} {authReturnGoogle} {dbConnector} {graphql} {resolvers} [built]
[1] [./auth.js] 1.83 KiB {auth} [built]
[1] [./authReturn.js] 2.42 KiB {authReturn} [built]
[1] [./authReturnGoogle.js] 2.85 KiB {authReturnGoogle} [built]
[1] [./dbConnector.js] 1.1 KiB {dbConnector} {auth} {authReturn} {authReturnGoogle} {graphql} [built]
[1] [./graphql.js] 2.46 KiB {graphql} [built]
[1] [./helpers/authHelpers.js] 2.33 KiB {auth} {authReturn} {authReturnGoogle} [built]
[1] [./helpers/facebookAuthHelpers.js] 3.69 KiB {auth} {authReturn} [built]
[1] [./helpers/googleAuthHelpers.js] 2.15 KiB {auth} {authReturnGoogle} [built]
[1] [./resolvers.js] 11.2 KiB {resolvers} {graphql} [built]
[1]     + 1964 hidden modules
[1]
[1] WARNING in ../node_modules/express/lib/view.js 81:13-25
[1] Critical dependency: the request of a dependency is an expression
[1]  @ ../node_modules/express/lib/application.js
[1]  @ ../node_modules/express/lib/express.js
[1]  @ ../node_modules/express/index.js
[1]  @ ../node_modules/apollo-server-lambda/dist/ApolloServer.js
[1]  @ ../node_modules/apollo-server-lambda/dist/index.js
[1]  @ ./resolvers.js
[1]
[1] WARNING in ../node_modules/mongodb/lib/deps.js
[1] Module not found: Error: Can't resolve 'snappy' in 'C:\Simon\code\deepsheet\serverLambda\node_modules\mongodb\lib'
[1]  @ ../node_modules/mongodb/lib/deps.js
[1]  @ ../node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongodb-client-encryption/lib/index.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/encrypter.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/connection_string.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/mongo_client.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongoose/lib/index.js
[1]  @ ../node_modules/mongoose/index.js
[1]  @ ./dbConnector.js
[1]
[1] WARNING in ../node_modules/mongoose/node_modules/mongodb/lib/deps.js
[1] Module not found: Error: Can't resolve 'snappy' in 'C:\Simon\code\deepsheet\serverLambda\node_modules\mongoose\node_modules\mongodb\lib'
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/deps.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongoose/lib/index.js
[1]  @ ../node_modules/mongoose/index.js
[1]  @ ./dbConnector.js
[1]
[1] WARNING in ../node_modules/mongodb/lib/deps.js
[1] Module not found: Error: Can't resolve 'snappy/package.json' in 'C:\Simon\code\deepsheet\serverLambda\node_modules\mongodb\lib'
[1]  @ ../node_modules/mongodb/lib/deps.js
[1]  @ ../node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongodb-client-encryption/lib/index.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/encrypter.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/connection_string.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/mongo_client.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongoose/lib/index.js
[1]  @ ../node_modules/mongoose/index.js
[1]  @ ./dbConnector.js
[1]
[1] WARNING in ../node_modules/mongoose/node_modules/mongodb/lib/deps.js
[1] Module not found: Error: Can't resolve 'snappy/package.json' in 'C:\Simon\code\deepsheet\serverLambda\node_modules\mongoose\node_modules\mongodb\lib'
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/deps.js
[1]  @ ../node_modules/mongoose/node_modules/mongodb/lib/index.js
[1]  @ ../node_modules/mongoose/lib/index.js
[1]  @ ../node_modules/mongoose/index.js
[1]  @ ./dbConnector.js
[1]
[1] ERROR in ../node_modules/@graphql-tools/mock/index.mjs 733:9-19
[1] Can't import the named export 'MapperKind' from non EcmaScript module (only default export is available)
[1]  @ ../node_modules/apollo-server-core/dist/ApolloServer.js
[1]  @ ../node_modules/apollo-server-core/dist/index.js
[1]  @ ../node_modules/apollo-server-lambda/dist/index.js
[1]  @ ./resolvers.js
[1]
[1] ERROR in ../node_modules/@graphql-tools/mock/index.mjs 782:9-19
[1] Can't import the named export 'MapperKind' from non EcmaScript module (only default export is available)
[1]  @ ../node_modules/apollo-server-core/dist/ApolloServer.js
[1]  @ ../node_modules/apollo-server-core/dist/index.js
[1]  @ ../node_modules/apollo-server-lambda/dist/index.js
[1]  @ ./resolvers.js
[1]
[1] ERROR in ../node_modules/@graphql-tools/schema/index.mjs 59:9-19
[1] Can't import the named export 'MapperKind' from non EcmaScript module (only default export is available)
[1]  @ ../node_modules/apollo-server-core/dist/ApolloServer.js
[1]  @ ../node_modules/apollo-server-core/dist/index.js
[1]  @ ../node_modules/apollo-server-lambda/dist/index.js
[1]  @ ./resolvers.js
[1]
[1] ERROR in ../node_modules/@graphql-tools/schema/index.mjs 299:9-19
[1] Can't import the named export 'MapperKind' from non EcmaScript module (only default export is available)
[1]  @ ../node_modules/apollo-server-core/dist/ApolloServer.js
[1]  @ ../node_modules/apollo-server-core/dist/index.js
[1]  @ ../node_modules/apollo-server-lambda/dist/index.js
[1]  @ ./resolvers.js
[1]

… many other similar errors here…

[1] Lambda server is listening on 9000

perry · March 2, 2022, 6:58pm

hi simon, i made some edits to your post for readability. we’ll take a closer look when we can!

please do put any mulit-line code in three bacticks: ``` at the beginning and end, thanks. it greatly improves the speed at which we can read and respond to questions.

simonrumi · March 3, 2022, 4:07pm

@perry thanks - will do that in future…looks a lot better!

BTW another question:
currently I’m looking at the webpack configuration for my lambda functions. I didn’t previously have a babel.config.json, so I’m giving that a go, but it’s leading to more errors

So I’m wondering if I have it in the right place

Should it go in the same folder as my netlify.toml, package.json and webpack.config.js?
Or should I put it in the subfolder lambdaFunctions, which has the source code that gets built with the netlify-lambda build command

I have a lot of holes with my knowledge in this domain, so if you have any suggested reading, that’d be helpful also

thanks!
Simon

hrishikesh · March 6, 2022, 2:10pm

Hi @simonrumi,

To start with, Netlify Lambda has been not a recommended tool to build functions since a long time now. You can try building with Netlify CLI.

simonrumi · March 7, 2022, 3:36pm

thanks @hrishikesh I did see that…hoping I wouldn’t have to update, but I’ll try it

simonrumi · March 30, 2022, 4:29pm

@hrishikesh, in switching to netlify dev from netlify lambda, I had to get netlify dev to recognize that I am using Create React App (CRA).

I have a directory structure where I put the CRA stuff in a “client” folder and then I have a “server” folder with my lambda functions in it, (see below). Maybe this is not the usual way to do things, but to me it doesn’t seem too crazy

Consequently for netlify dev to realize that I have CRA, I had to put a devDependency “react-scripts”: “^5.0.0” in the package.json at the top level…where it is not needed.

the real react-scripts dependency is in the package.json in the client folder.

This works, but my question is: can I somehow get netlify dev to recognize that I have CRA in that client sub-directory, without having to put that unnecessary dependency in the top level package.json

--netlify.toml
--package.json (contains unnecessary devDependency "react-scripts": "^5.0.0")
--client
  --package.json (contains dependency "react-scripts": "^5.0.0")
--server
  --package.json
  --functions
    --(lambda functions here)

hillary · April 1, 2022, 4:16pm

Hey there, @simonrumi

Thanks for your patience here. Can you try adding:

[build]
  base = "./client"

[functions]
  directory = "./server/functions/"

inside your netlify toml folder? It should be in there and not just in the base path.

Let us know if this gets you on the right track!

simonrumi · April 1, 2022, 9:59pm

Hi @hillary, thanks for the reply

Unfortunately that doesn’t quite work. Here’s my netlify.toml without your change:

[functions]
  directory = "server/functions/"

[build]
  command = "npm run build"
  publish = "client/build"

[dev]
publish = "client/public"

And here’s (most of) the scripts from my package.json from the root of the project:

"scripts": {
      "start": "cd client && npm run start",
      "tailwind:css": "tailwind build client/src/css/tailwind.src.css -c client/tailwind.config.js -o client/src/css/tailwind.css",
      "prebuild": "npm run tailwind:css",
      "build": "cd client && npm run build",
      "dev": "npm run build && netlify dev"
   },

To start my dev server I use the command
npm run dev

Which then builds the tailwindcss thing from the root directory before cd-ing into the client directory to build the react stuff in there.

The build command, run in production in the netlify.toml file is
command = "npm run build"

…which will run the root package.json build command, which does the same thing: build tailwind css in the root, then cd into the client and build the client

If I add
base = "./client"
to the netlify.toml file, things break (at least on my local machine) …presumably because I do want the build of tailwindcss to happen from the root directory, not client

Any suggestions?

thanks
Simon

hrishikesh · April 3, 2022, 1:49pm

In that case, I think you can simply specify framework = “create-react-app” in your netlify.toml [dev] block and that could work too. More details:

https://cli.netlify.com/netlify-dev#project-detection

simonrumi · April 5, 2022, 5:12am

thanks! I’ll give that a try

simonrumi · April 6, 2022, 2:10pm

Just to confirm, yes that worked!

…I think I saw that framework option when I was looking at the docs, but didn’t remember it when I was trying to solve this problem. For anyone looking at this thread in future, it is here:

simonrumi · April 6, 2022, 2:14pm

For anyone looking at these posts in future, getting Netlify Dev really was the solution, but it took a bit of doing, which lead to the other questions in this chain.

Here’s the place in the docs to start

hillary · April 6, 2022, 3:18pm

Thanks so much for coming back and sharing this, @simonrumi. This will definitely be beneficial for future Forums members who encounter something similar!