Compile error with a lot of errors from webpack

Question

I am receiving error, compiling graphql doesn't work because of the graphql-js dependency.

Version: webpack 4.43.0
Time: 69237ms
Built at: 01/12/2021 3:01:04 PM
 35 assets
Entrypoint main = assets/vendors~896.bundle.js assets/page.js

ERROR in ./node_modules/graphql/index.mjs 12:0-65:205
Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql-tag/lib/index.js
 @ ./node_modules/apollo-boost/lib/bundle.esm.js
 @ ./src/apollo/client.ts
 @ ./src/App.tsx
 @ ./src/client.js

ERROR in ./node_modules/graphql/index.mjs 20:0-87:42
Can't reexport the named export 'SAMPLE' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql-tag/lib/index.js
 @ ./node_modules/apollo-boost/lib/bundle.esm.js
 @ ./src/apollo/client.ts
 @ ./src/App.tsx
 @ ./src/client.js

ERROR in ./node_modules/graphql/index.mjs 99:0-80:50
Can't reexport the named export 'SAMPLE' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql-tag/lib/index.js
 @ ./src/apollo/client.ts
 @ ./src/App.tsx
 @ ./src/client.js

ERROR: Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)

and a million more of these.
ps. let me know if you need more details

Answer 1

I had this same issue yesterday and followed this answer from github and I add '.mjs' to my configureWebpack extensions. and to the rules. Just make sure to appear before .js'. So basically you will have as follow :

const config = {
 configureWebpack: {
   resolve: { // .mjs comes before .js 
     extensions: ['*', '.mjs', '.js', '.json', '.gql', '.graphql']
   },
   module: {
     rules: [ 
       {
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto'
       },
       // all the other rules
     ]
   }
 }
}

module.exports = config