8

I upgrade my angular project from 12 to 13 but getting error Uncaught SyntaxError: Cannot use 'import.meta' outside a module.I wanted to use both require and import in my project I tried using "type"=module but getting error in webpack.config.js file

Sayali
  • 109
  • 1
  • 1
  • 6

2 Answers2

13

The issue might be related to webpack.config setting the publicPath to 'auto'. You might have to set the relative path. Other option to fix this issue will be to set the scriptType property to 'text/javascript' in the webpack.config as follows:

 module.exports = {
        output: {
            uniqueName: "MyProj",
            publicPath: "auto",
            scriptType: 'text/javascript'
        }

This option will not migrate microfrontend and it bring back the behavior of Angular 12.

A more detailed article on microfrontend upgrade can be found here: https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md

Rajesh Pandya
  • 1,540
  • 4
  • 18
  • 31
Anish cp
  • 139
  • 3
2
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

const webpackConfig = withModuleFederationPlugin({...})
module.exports = {
...webpackConfig,
output: {
    ...webpackConfig.output,
    scriptType: 'text/javascript'
      }
};
nguyen van duc
  • 29
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 16 '23 at 14:17
  • After the initialization of `module.exports` using `withModuleFederationPlugin`, use this line to set the scriptType to text/javascript: `module.exports.output.scriptType = "text/javascript"` – Isthar Jul 13 '23 at 10:32