{"id":65016,"date":"2023-12-14T12:54:50","date_gmt":"2023-12-14T15:54:50","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=65016&#038;post_type=knowledgebase&#038;preview_id=65016"},"modified":"2025-10-01T17:00:34","modified_gmt":"2025-10-01T20:00:34","slug":"cannot-use-import-statement-outside-module","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/","title":{"rendered":"Como Resolver o Erro &#8220;Cannot Use Import Statement Outside a Module&#8221;"},"content":{"rendered":"<p>A mensagem de erro &#8220;Cannot use import statement outside a module&#8221; ocorre quando a palavra-chave <code>import<\/code> \u00e9 encontrada em um m\u00f3dulo <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a> configurado incorretamente.<\/p>\n<p>Em um ambiente de tempo de execu\u00e7\u00e3o no lado do servidor <a href=\"https:\/\/kinsta.com\/pt\/topicos\/tutoriais-javascript\/\">JavaScript<\/a>, esse erro geralmente resulta do uso da sintaxe <code>import<\/code> para m\u00f3dulos escritos em ECMAScript (ES) quando o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-node-js\/\">Node.js<\/a> espera a palavra-chave <code>require<\/code> usada pelo sistema de m\u00f3dulos CommonJS.<\/p>\n<p>O TypeScript oferece suporte a diferentes formatos de m\u00f3dulo, mas os erros de codifica\u00e7\u00e3o que confundem as abordagens ES e CommonJS para importar m\u00f3dulos tamb\u00e9m resultam nesse erro.<\/p>\n<p>No lado do navegador, o erro geralmente ocorre quando voc\u00ea n\u00e3o usa um <a href=\"https:\/\/kinsta.com\/pt\/blog\/empacotadores-javascript\/\">empacotador<\/a> para seus arquivos de c\u00f3digo JavaScript.<\/p>\n<p>Este artigo explora essas tr\u00eas fontes de erro e detalha uma solu\u00e7\u00e3o para cada ambiente.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Como resolver o erro no JavaScript do lado do servidor<\/h2>\n<p>Esta se\u00e7\u00e3o demonstra como resolver o erro em ambientes JavaScript do lado do servidor.<\/p>\n<h3>Background<\/h3>\n<p>O Node.js usa a palavra-chave <code>require<\/code> do sistema CommonJS por padr\u00e3o. Portanto, voc\u00ea receber\u00e1 o erro conhecido, a menos que configure o Node.js para dar suporte \u00e0 sintaxe do m\u00f3dulo ES. Da mesma forma, o Node.js requer a extens\u00e3o <strong>.mjs<\/strong> para reconhecer e trabalhar com m\u00f3dulos ES.<\/p>\n<h3>Solu\u00e7\u00e3o<\/h3>\n<p>Como alternativa ao uso do <strong>.mjs<\/strong>, voc\u00ea pode tornar as vers\u00f5es mais antigas do Node.js compat\u00edveis com o m\u00f3dulo ES atual usando bundlers ou executando o Node.js com o sinalizador <code>--experimental-modules<\/code>. Caso contr\u00e1rio, voc\u00ea pode definir o campo <code>type<\/code> no arquivo <strong>package.json<\/strong> para <code>module<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"test-package\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\",\n  \"main\": \"app.js\",\n  \"dependencies\": { }\n}<\/code><\/pre>\n<p><strong>(Observa\u00e7\u00e3o<\/strong>: voc\u00ea deve incluir a propriedade <code>type<\/code> no arquivo <strong>package.json<\/strong> em todos os pacotes. Essa pr\u00e1tica facilita a identifica\u00e7\u00e3o do sistema de m\u00f3dulos em uso e garante a consist\u00eancia entre suas bibliotecas)<\/p>\n<p>Outra maneira de evitar o erro \u00e9 garantir que as sintaxes <code>import<\/code> e <code>export<\/code> estejam corretas e sejam carregadas adequadamente. \u00c9 fundamental que voc\u00ea sempre use caminhos de arquivos relativos, exporta\u00e7\u00f5es nomeadas, extens\u00f5es de arquivos para exporta\u00e7\u00f5es e evite exporta\u00e7\u00f5es padr\u00e3o.<\/p>\n<p>Aqui est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-js\">\/\/module import \nimport { sampleFunction } from '.\/sampleModule.js';\n\n\/\/ function export\nexport function sampleFunction() {\n     \/\/ code goes here\n}<\/code><\/pre>\n<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-aoheq-79elbk h-full\">\n<div class=\"react-scroll-to-bottom--css-aoheq-1n7m0yu\">\n<div class=\"flex flex-col pb-9 text-sm\">\n<div class=\"w-full text-token-text-primary\" data-testid=\"conversation-turn-5\">\n<div class=\"px-4 py-2 justify-center text-base md:gap-6 m-auto\">\n<div class=\"flex flex-1 text-base mx-auto gap-3 md:px-5 lg:px-1 xl:px-5 md:max-w-3xl } group final-completion\">\n<div class=\"relative flex w-full flex-col lg:w-[calc(100%-115px)] agent-turn\">\n<div class=\"flex-col gap-1 md:gap-3\">\n<div class=\"flex flex-grow flex-col max-w-full\">\n<div class=\"min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&#038;]:mt-5 overflow-x-auto\" data-message-author-role=\"assistant\" data-message-id=\"81614e90-ba85-4815-ab96-28d682e2367f\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<p>Finalmente, voc\u00ea deve garantir a compatibilidade de todas as bibliotecas de terceiros com m\u00f3dulos ES. Para obter essas informa\u00e7\u00f5es, consulte a documenta\u00e7\u00e3o da biblioteca no arquivo <strong>package.json.<\/strong> Alternativamente, use um bundler para transpilar o c\u00f3digo, de forma que um ambiente JavaScript possa entend\u00ea-lo.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Como resolver o erro em ambientes TypeScript<\/h2>\n<p>Esta se\u00e7\u00e3o demonstra como resolver a mensagem de erro em ambientes TypeScript.<\/p>\n<h3>Contexto<\/h3>\n<p>Com os m\u00f3dulos, voc\u00ea pode reutilizar, organizar e compartilhar c\u00f3digo entre v\u00e1rios arquivos em um projeto. O ES oferece suporte a m\u00f3dulos externos para o compartilhamento de c\u00f3digo entre v\u00e1rios arquivos usando as palavras-chave <code>import<\/code> e <code>export<\/code>.<\/p>\n<p>Esse erro geralmente ocorre em ambientes TypeScript quando voc\u00ea usa a sintaxe do m\u00f3dulo ES sem configurar o TypeScript para us\u00e1-la. Como o TypeScript \u00e9 um superconjunto do JavaScript, o padr\u00e3o \u00e9 usar a sintaxe CommonJS para importa\u00e7\u00f5es, que usa <code>require<\/code> em vez de <code>import<\/code>. Nesse caso, a instru\u00e7\u00e3o <code>import<\/code> causa o erro. No entanto, a configura\u00e7\u00e3o correta do TypeScript \u00e9 necess\u00e1ria para que ele ofere\u00e7a suporte aos m\u00f3dulos ES.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode encontrar esse erro se usar a extens\u00e3o de arquivo incorreta. Por exemplo, ao usar o TypeScript em um ambiente Node.js com sintaxe de m\u00f3dulo ES, o m\u00f3dulo que voc\u00ea deseja importar deve ter a extens\u00e3o de arquivo <strong>.mjs<\/strong> em vez da extens\u00e3o <strong>.js<\/strong> normal.<\/p>\n<p>Outra fonte comum do erro \u00e9 a configura\u00e7\u00e3o incorreta do campo <code>module<\/code> nos arquivos <strong>tsconfig.json<\/strong> ou <strong>package.json<\/strong> quando voc\u00ea usa empacotadores como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/#webpack\">Webpack<\/a>. No entanto, voc\u00ea pode usar bundlers para m\u00f3dulos ES em TypeScript configurando os campos <code>module<\/code> e <code>target<\/code> no arquivo <strong>tsconfig.json<\/strong> como <code>ECMAScript<\/code>. Assim, o Webpack entender\u00e1 o ambiente de destino e usar\u00e1 as extens\u00f5es de arquivo corretas ao transpilar o c\u00f3digo.<\/p>\n<h3>Solu\u00e7\u00e3o<\/h3>\n<p>Para carregar m\u00f3dulos ES usando um carregador de m\u00f3dulo como o <a href=\"https:\/\/requirejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">RequireJS<\/a> ou um empacotador como o Webpack, fa\u00e7a as seguintes adi\u00e7\u00f5es ao arquivo <strong>tsconfig.json<\/strong>:<\/p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \"module\": \"es20215\",\n    \"target\": \"es20215\",\n    \"sourceMap\": true\n  }\n}<\/code><\/pre>\n<p>Na parte <code>compilerOptions<\/code> do c\u00f3digo acima, os campos <code>module<\/code> e <code>target<\/code> s\u00e3o definidos para que voc\u00ea use um m\u00f3dulo <code>es20215<\/code>. Com essas adi\u00e7\u00f5es, voc\u00ea pode usar as declara\u00e7\u00f5es <code>import<\/code> e <code>export<\/code> em um ambiente TypeScript sem causar o erro.<\/p>\n<p>Como o TypeScript usa o CommonJS por padr\u00e3o, se voc\u00ea n\u00e3o modificar o arquivo <strong>tsconfig.json<\/strong> adequadamente, a mensagem de erro ser\u00e1 exibida.<\/p>\n<p>Felizmente, depois de definir os campos <code>module<\/code> e <code>target<\/code> para usar um m\u00f3dulo <code>ECMAScript<\/code>, voc\u00ea pode usar a instru\u00e7\u00e3o <code>export<\/code> para exportar uma fun\u00e7\u00e3o ou vari\u00e1vel de um m\u00f3dulo e a instru\u00e7\u00e3o <code>import<\/code> para carregar outro m\u00f3dulo no escopo do atual. Esse processo ocorre no c\u00f3digo abaixo:<\/p>\n<pre><code class=\"language-typescript\">\/\/ sum.ts\nexport function sum(a: number, b: number, c: number): number {\n  return a + b + c;\n}\n\n\/\/ main.ts\nimport { sum } from '.\/sum';\nconsole.log(add(4, 4, 9));<\/code><\/pre>\n<p>Se voc\u00ea estiver usando uma vers\u00e3o mais antiga do Node.js, poder\u00e1 ativar o suporte ao m\u00f3dulo ES executando seu c\u00f3digo com o sinalizador <code>--experimental-modules<\/code>. Voc\u00ea tamb\u00e9m deve usar um empacotador como Webpack, <a href=\"https:\/\/browserify.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Browserify<\/a> ou Rollup para empacotar todo o c\u00f3digo ES e envi\u00e1-lo para um \u00fanico arquivo. Certifique-se de que ele esteja em uma vers\u00e3o que os navegadores e as vers\u00f5es antigas do Node.js possam entender e configure um arquivo <strong>Webpack.config.js<\/strong> na raiz do seu projeto que especifique o tipo de m\u00f3dulo.<\/p>\n<p>Aqui est\u00e1 um exemplo extra\u00eddo da <a href=\"https:\/\/webpack.js.org\/guides\/typescript\/#basic-setup\">documenta\u00e7\u00e3o do Webpack<\/a>:<\/p>\n<pre><code class=\"language-js\">module.exports = {\n  entry: '.\/src\/index.ts',\n  output: {\n    filename: 'bundle.js',\n   path: path.resolve(__dirname, 'dist')\n  },\n  resolve: {\n    extensions: ['.ts', '.js', '.mjs']\n  },\n  module: {\n    rules: [\n      {\n        test: \/.ts$\/,\n        use: 'ts-loader',\n        exclude: \/node_modules\/\n      }\n    ]\n  },\n  experiments: {\n    outputModule: true\n  }\n};<\/code><\/pre>\n<p>O c\u00f3digo compilado \u00e9 enviado para um arquivo <strong>bundle.js<\/strong> no diret\u00f3rio <strong>dist<\/strong> do diret\u00f3rio raiz do projeto.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode usar polyfills como <code>es-module-shims<\/code> para direcionar os navegadores mais antigos que n\u00e3o suportam as instru\u00e7\u00f5es <code>import<\/code> e <code>export<\/code> dos m\u00f3dulos ES.<\/p>\n<h2>Como resolver o erro no JavaScript do lado do navegador<\/h2>\n<p>Esta se\u00e7\u00e3o mostra a voc\u00ea como resolver o erro em ambientes JavaScript do lado do navegador.<\/p>\n<h3>Background<\/h3>\n<p>A maioria dos navegadores modernos, incluindo Chrome, Firefox, Edge e Safari, oferece suporte a m\u00f3dulos ES, portanto, voc\u00ea n\u00e3o precisar\u00e1 usar polyfills, bundlers ou transpilers de navegador.<\/p>\n<p>Voc\u00ea tamb\u00e9m n\u00e3o precisar\u00e1 deles se usar as bibliotecas de frontend baseadas em JavaScript React ou Vue, pois elas s\u00e3o compat\u00edveis com os campos ES <code>imports<\/code> e <code>exports<\/code> por padr\u00e3o. No entanto, os navegadores mais antigos n\u00e3o oferecem suporte \u00e0 sintaxe ES e, portanto, exigem essas ferramentas para compatibilidade entre plataformas.<\/p>\n<p>O motivo mais comum para o erro em um navegador mais antigo \u00e9 quando os arquivos HTML de uma p\u00e1gina n\u00e3o cont\u00eam o atributo <code>type=\"module\"<\/code>. Nesse cen\u00e1rio, o erro ocorre porque o JavaScript executado na web n\u00e3o inclui suporte padr\u00e3o para a sintaxe do m\u00f3dulo ES. Para o c\u00f3digo JavaScript enviado por meio da conex\u00e3o, voc\u00ea pode encontrar um erro de compartilhamento de recursos entre origens ao tentar carregar um m\u00f3dulo ES de um dom\u00ednio diferente.<\/p>\n<h3>Solu\u00e7\u00e3o<\/h3>\n<p>Para evitar o erro de m\u00f3dulo em um navegador mais antigo, verifique se voc\u00ea est\u00e1 usando o atributo correto da tag <code>script<\/code> &#8211; <code>type=\"module\"<\/code> &#8211; no arquivo HTML raiz. Como alternativa, voc\u00ea pode usar o Webpack para transpilar o c\u00f3digo para que os navegadores mais antigos possam entend\u00ea-lo.<\/p>\n<p>Para usar o atributo <code>type=\"module\"<\/code>, inclua a seguinte linha em seu arquivo HTML raiz:<\/p>\n<pre><code class=\"language-js\">&lt;script type=\"module\" src=\"app.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>\u00c9 fundamental garantir que os caminhos do arquivo <code>import<\/code> sejam v\u00e1lidos e que voc\u00ea esteja usando a sintaxe <code>import<\/code> correta.<\/p>\n<p>Al\u00e9m disso, voc\u00ea pode visitar sites como o <a href=\"https:\/\/caniuse.com\/?search=esmodules\" target=\"_blank\" rel=\"noopener noreferrer\">Can I Use<\/a> para confirmar a compatibilidade do navegador com os m\u00f3dulos ES.<\/p>\n<p>Por fim, como o uso da extens\u00e3o de arquivo <strong>.js<\/strong> \u00e9 uma pr\u00e1tica comum, voc\u00ea pode definir o atributo <code>type<\/code> na tag <code>script<\/code> do arquivo HTML do m\u00f3dulo como uma solu\u00e7\u00e3o alternativa. Ao definir esse atributo como <code>module<\/code>, voc\u00ea informa ao navegador para desconsiderar a extens\u00e3o <strong>.js<\/strong> e tratar o arquivo como um m\u00f3dulo.<\/p>\n<h2>Resumo<\/h2>\n<p>O erro &#8220;Cannot use import statement outside a module&#8221; pode aparecer por v\u00e1rios motivos, dependendo de voc\u00ea estar em um ambiente JavaScript do lado do navegador ou do lado do servidor. Sintaxe incorreta, configura\u00e7\u00f5es inadequadas e extens\u00f5es de arquivo sem suporte s\u00e3o algumas das fontes mais comuns desse erro.<\/p>\n<p>Embora a maioria dos navegadores modernos ofere\u00e7a suporte a m\u00f3dulos ES, voc\u00ea deve garantir que os navegadores mais antigos sejam compat\u00edveis. Pacotes como o Webpack permitem que voc\u00ea compile todo o c\u00f3digo-fonte com suas depend\u00eancias em uma \u00fanica sa\u00edda que os navegadores mais antigos possam entender.<\/p>\n<p>Lembre-se de adicionar o atributo <code>type=\"module\"<\/code> no arquivo HTML para informar ao navegador que o m\u00f3dulo \u00e9 um m\u00f3dulo ES. Por fim, embora o uso da extens\u00e3o <strong>.js<\/strong> para CommonJS seja a pr\u00e1tica padr\u00e3o, voc\u00ea pode usar a extens\u00e3o <strong>.mjs<\/strong> para permitir a importa\u00e7\u00e3o de m\u00f3dulos ES.<\/p>\n<p>Voc\u00ea tem um aplicativo JavaScript que precisa ficar on-line, mas n\u00e3o quer gerenciar os servidores por conta pr\u00f3pria? As plataformas de <a href=\"https:\/\/docs.sevalla.com\/applications\/overview\">hospedagem de aplicativos<\/a> e <a href=\"https:\/\/sevalla.com\/database-hosting\/\">hospedagem de banco de dados<\/a> da Kinsta podem ser a resposta para voc\u00ea. Voc\u00ea pode at\u00e9 mesmo combinar esses servi\u00e7os com a <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de Site Est\u00e1tico<\/a> da Kinsta para que o frontend do seu aplicativo seja servido gratuitamente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A mensagem de erro &#8220;Cannot use import statement outside a module&#8221; ocorre quando a palavra-chave import \u00e9 encontrada em um m\u00f3dulo JavaScript ou TypeScript configurado incorretamente. &#8230;<\/p>\n","protected":false},"author":259,"featured_media":65017,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[976,992],"class_list":["post-65016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-de-javascript","topic-node-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Resolver o Erro &quot;Cannot Use Import Statement Outside a Module&quot; - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"O erro JavaScript &quot;Cannot use import statement outside a module&quot; pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Resolver o Erro &quot;Cannot Use Import Statement Outside a Module&quot;\" \/>\n<meta property=\"og:description\" content=\"O erro JavaScript &quot;Cannot use import statement outside a module&quot; pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-14T15:54:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1999\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"O erro JavaScript &quot;Cannot use import statement outside a module&quot; pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Como Resolver o Erro &#8220;Cannot Use Import Statement Outside a Module&#8221;\",\"datePublished\":\"2023-12-14T15:54:50+00:00\",\"dateModified\":\"2025-10-01T20:00:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\"},\"wordCount\":1549,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\",\"name\":\"Como Resolver o Erro \\\"Cannot Use Import Statement Outside a Module\\\" - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"datePublished\":\"2023-12-14T15:54:50+00:00\",\"dateModified\":\"2025-10-01T20:00:34+00:00\",\"description\":\"O erro JavaScript \\\"Cannot use import statement outside a module\\\" pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"width\":1999,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erros de Javascript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/erros-de-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Resolver o Erro &#8220;Cannot Use Import Statement Outside a Module&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Resolver o Erro \"Cannot Use Import Statement Outside a Module\" - Kinsta\u00ae","description":"O erro JavaScript \"Cannot use import statement outside a module\" pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Resolver o Erro \"Cannot Use Import Statement Outside a Module\"","og_description":"O erro JavaScript \"Cannot use import statement outside a module\" pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.","og_url":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-12-14T15:54:50+00:00","article_modified_time":"2025-10-01T20:00:34+00:00","og_image":[{"width":1999,"height":1000,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"O erro JavaScript \"Cannot use import statement outside a module\" pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Steve Bonisteel","Tempo estimado de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Como Resolver o Erro &#8220;Cannot Use Import Statement Outside a Module&#8221;","datePublished":"2023-12-14T15:54:50+00:00","dateModified":"2025-10-01T20:00:34+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/"},"wordCount":1549,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/","url":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/","name":"Como Resolver o Erro \"Cannot Use Import Statement Outside a Module\" - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","datePublished":"2023-12-14T15:54:50+00:00","dateModified":"2025-10-01T20:00:34+00:00","description":"O erro JavaScript \"Cannot use import statement outside a module\" pode aparecer de v\u00e1rias formas. Aqui est\u00e1 como corrigi-lo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/cannot-use-import-statement-outside-module.png","width":1999,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Erros de Javascript","item":"https:\/\/kinsta.com\/pt\/topicos\/erros-de-javascript\/"},{"@type":"ListItem","position":3,"name":"Como Resolver o Erro &#8220;Cannot Use Import Statement Outside a Module&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/65016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=65016"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/65016\/revisions"}],"predecessor-version":[{"id":66089,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/65016\/revisions\/66089"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/65016\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/65017"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=65016"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=65016"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=65016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}