{"id":74263,"date":"2023-11-20T16:54:00","date_gmt":"2023-11-20T15:54:00","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=74263&post_type=knowledgebase&preview_id=74263"},"modified":"2025-10-01T20:42:26","modified_gmt":"2025-10-01T19:42:26","slug":"cannot-use-import-statement-outside-module","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/","title":{"rendered":"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module"},"content":{"rendered":"

Le message d’erreur \u00ab\u00a0Cannot use import statement outside a module\u00a0\u00bb se produit lorsque le mot-cl\u00e9 import<\/code> est rencontr\u00e9 dans un module JavaScript<\/a> ou TypeScript<\/a> mal configur\u00e9.<\/p>\n

Dans un environnement d’ex\u00e9cution JavaScript<\/a> c\u00f4t\u00e9 serveur, cette erreur r\u00e9sulte g\u00e9n\u00e9ralement de l’utilisation de la syntaxe import<\/code> pour les modules \u00e9crits en ECMAScript (ES) alors que Node.js<\/a> attend le mot-cl\u00e9 require<\/code> utilis\u00e9 par le syst\u00e8me de modules CommonJS.<\/p>\n

TypeScript prend en charge diff\u00e9rents formats de modules, mais les erreurs de codage qui confondent les approches ES et CommonJS de l’importation de modules entra\u00eenent \u00e9galement cette erreur.<\/p>\n

Du c\u00f4t\u00e9 du navigateur, l’erreur se produit g\u00e9n\u00e9ralement lorsque vous n’utilisez pas de bundler<\/a> pour vos fichiers de code JavaScript.<\/p>\n

Cet article explore ces trois sources d’erreur et d\u00e9taille une solution pour chaque environnement.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comment r\u00e9soudre l’erreur dans le JavaScript c\u00f4t\u00e9 serveur<\/h2>\n

Cette section montre comment r\u00e9soudre l’erreur dans les environnements JavaScript c\u00f4t\u00e9 serveur.<\/p>\n

Contexte<\/h3>\n

Node.js utilise par d\u00e9faut le mot-cl\u00e9 require<\/code> du syst\u00e8me CommonJS. Par cons\u00e9quent, vous recevrez l’erreur habituelle \u00e0 moins que vous ne configuriez Node.js pour qu’il prenne en charge la syntaxe des modules ES. De m\u00eame, Node.js a besoin de l’extension .mjs<\/strong> pour reconna\u00eetre et utiliser les modules ES.<\/p>\n

Solution<\/h3>\n

Au lieu d’utiliser .mjs<\/strong>, vous pouvez rendre les anciennes versions de Node.js compatibles avec le module ES actuel en utilisant des bundlers ou en ex\u00e9cutant Node.js avec le drapeau --experimental-modules<\/code>. Sinon, vous pouvez d\u00e9finir le champ type<\/code> dans le fichier package.json<\/strong> \u00e0 module<\/code> comme suit :<\/p>\n

{\n  \"name\": \"test-package\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\",\n  \"main\": \"app.js\",\n  \"dependencies\": { }\n}<\/code><\/pre>\n
(Remarque <\/strong>: vous devez inclure la propri\u00e9t\u00e9 type<\/code> dans le fichier package.json<\/strong> pour tous les paquets. Cette pratique facilite l’identification du syst\u00e8me de modules utilis\u00e9 et garantit la coh\u00e9rence de vos biblioth\u00e8ques)<\/p>\n
Une autre fa\u00e7on d’\u00e9viter l’erreur est de s’assurer que les syntaxes import<\/code> et export<\/code> sont correctes et se chargent correctement. Il est essentiel de toujours utiliser des chemins de fichiers relatifs, des exportations nomm\u00e9es, des extensions de fichiers pour les exportations et d’\u00e9viter les exportations par d\u00e9faut.<\/p>\n
Voici un exemple :<\/p>\n
\/\/module import \nimport { sampleFunction } from '.\/sampleModule.js';\n\n\/\/ function export\nexport function sampleFunction() {\n     \/\/ code goes here\n}<\/code><\/pre>\n
Enfin, vous devez vous assurer de la compatibilit\u00e9 de toutes les biblioth\u00e8ques tierces avec les modules ES. Pour cela, reportez-vous \u00e0 la documentation de la biblioth\u00e8que dans le fichier package.json.<\/strong> Vous pouvez \u00e9galement utiliser un bundler pour transpiler le code afin qu’un environnement JavaScript puisse le comprendre.<\/p>\n
Comment r\u00e9soudre l’erreur dans les environnements TypeScript<\/h2>\n
Cette section montre comment r\u00e9soudre le message d’erreur dans les environnements TypeScript.<\/p>\n
Contexte<\/h3>\n
Les modules vous permettent de r\u00e9utiliser, d’organiser et de partager du code entre plusieurs fichiers d’un projet. ES prend en charge les modules externes pour le partage de code entre diff\u00e9rents fichiers \u00e0 l’aide des mots-cl\u00e9s import<\/code> et export<\/code>.<\/p>\n
Cette erreur se produit g\u00e9n\u00e9ralement dans les environnements TypeScript lorsque vous utilisez la syntaxe de module ES sans configurer TypeScript pour l’utiliser. TypeScript \u00e9tant un sur-ensemble de JavaScript, il utilise par d\u00e9faut la syntaxe CommonJS pour les importations, qui utilise require<\/code> au lieu de import<\/code>. Dans ce cas, c’est l’instruction import<\/code> qui est \u00e0 l’origine de l’erreur. N\u00e9anmoins, il est n\u00e9cessaire de configurer correctement TypeScript pour qu’il prenne en charge les modules ES.<\/p>\n
Vous pouvez \u00e9galement rencontrer cette erreur si vous utilisez une extension de fichier incorrecte. Par exemple, lorsque vous utilisez TypeScript dans un environnement Node.js avec la syntaxe des modules ES, le module que vous souhaitez importer doit avoir l’extension de fichier .mjs<\/strong> au lieu de l’extension normale .js<\/strong>.<\/p>\n
Une autre source d’erreur courante est la mauvaise configuration du champ module<\/code> dans vos fichiers tsconfig.json<\/strong> ou package.json<\/strong> lorsque vous utilisez des bundlers comme Webpack<\/a>. Cependant, vous pouvez utiliser des bundlers pour les modules ES en TypeScript en d\u00e9finissant les champs module<\/code> et target<\/code> dans le fichier tsconfig.json<\/strong> \u00e0 ECMAScript<\/code>. Webpack comprendra alors l’environnement cible et utilisera les extensions de fichier correctes lors de la transpilation du code.<\/p>\n
Solution<\/h3>\n
Pour charger des modules ES \u00e0 l’aide d’un chargeur de modules comme RequireJS<\/a> ou d’un bundler comme Webpack, ajoutez les \u00e9l\u00e9ments suivants au fichier tsconfig.json<\/strong>:<\/p>\n
{\n  \"compilerOptions\": {\n    \"module\": \"es20215\",\n    \"target\": \"es20215\",\n    \"sourceMap\": true\n  }\n}<\/code><\/pre>\n
Dans la partie compilerOptions<\/code> du code ci-dessus, les champs module<\/code> et target<\/code> sont d\u00e9finis pour utiliser un module es20215<\/code>. Gr\u00e2ce \u00e0 ces ajouts, vous pouvez utiliser les d\u00e9clarations import<\/code> et export<\/code> dans un environnement TypeScript sans provoquer d’erreur.<\/p>\n
Comme TypeScript utilise CommonJS par d\u00e9faut, si vous ne modifiez pas le fichier tsconfig.json<\/strong> en cons\u00e9quence, vous obtiendrez le message d’erreur.<\/p>\n
Heureusement, une fois que vous avez d\u00e9fini les champs module<\/code> et target<\/code> pour utiliser un module ECMAScript<\/code>, vous pouvez utiliser l’instruction export<\/code> pour exporter une fonction ou une variable d’un module et l’instruction import<\/code> pour charger un autre module dans la port\u00e9e du module actuel. C’est ce qui se passe dans le code ci-dessous :<\/p>\n
\/\/ 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
Si vous utilisez une version plus ancienne de Node.js, vous pouvez activer la prise en charge des modules ES en ex\u00e9cutant votre code avec l’option --experimental-modules<\/code>. Vous devez \u00e9galement utiliser un bundler comme Webpack, Browserify<\/a> ou Rollup pour regrouper tout le code ES et le publier dans un seul fichier. Assurez-vous qu’il s’agit d’une version que les navigateurs et les anciennes versions de Node.js peuvent comprendre et mettez en place un fichier Webpack.config.js<\/strong> \u00e0 la racine de votre projet qui sp\u00e9cifie le type de module.<\/p>\n
Voici un exemple extrait de la documentation de Webpack<\/a>:<\/p>\n
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
Le code compil\u00e9 est envoy\u00e9 dans un fichier bundle.js<\/strong> dans le r\u00e9pertoire dist<\/strong> du r\u00e9pertoire racine du projet.<\/p>\n
Vous pouvez \u00e9galement utiliser des polyfills comme es-module-shims<\/code> pour cibler les anciens navigateurs qui ne prennent pas en charge les d\u00e9clarations import<\/code> et export<\/code> des modules ES.<\/p>\n
Comment r\u00e9soudre l’erreur dans le JavaScript c\u00f4t\u00e9 navigateur<\/h2>\n
Cette section vous montre comment r\u00e9soudre l’erreur dans les environnements JavaScript c\u00f4t\u00e9 navigateur.<\/p>\n
Contexte<\/h3>\n
La plupart des navigateurs modernes, notamment Chrome, Firefox, Edge et Safari, prennent en charge les modules ES. Vous n’aurez donc pas besoin d’utiliser les polyfills, les bundlers ou les transpilers des navigateurs.<\/p>\n
Vous n’en aurez pas besoin non plus si vous utilisez les biblioth\u00e8ques frontend JavaScript React ou Vue, car elles prennent en charge par d\u00e9faut les champs ES imports<\/code> et exports<\/code>. Toutefois, les navigateurs plus anciens ne prennent pas en charge la syntaxe ES et ont donc besoin de ces outils pour assurer la compatibilit\u00e9 entre les plateformes.<\/p>\n
La raison la plus fr\u00e9quente de l’erreur dans un navigateur plus ancien est que les fichiers HTML d’une page ne contiennent pas l’attribut type=\"module\"<\/code>. Dans ce cas, l’erreur se produit parce que le JavaScript ex\u00e9cut\u00e9 sur le web n’inclut pas la prise en charge par d\u00e9faut de la syntaxe du module ES. Pour le code JavaScript envoy\u00e9 par c\u00e2ble, vous pouvez rencontrer une erreur de partage de ressources inter-origines lorsque vous tentez de charger un module ES provenant d’un domaine diff\u00e9rent.<\/p>\n
Solution<\/h3>\n
Pour \u00e9viter l’erreur de module dans un navigateur plus ancien, assurez-vous que vous utilisez l’attribut de balise script<\/code> correct – type=\"module\"<\/code> – dans le fichier HTML racine. Vous pouvez \u00e9galement utiliser Webpack pour transpiler le code afin que les navigateurs plus anciens puissent le comprendre.<\/p>\n
Pour utiliser l’attribut type=\"module\"<\/code>, incluez la ligne suivante dans votre fichier HTML racine :<\/p>\n
<script type=\"module\" src=\"app.js\"><\/script><\/code><\/pre>\n
Il est \u00e9galement essentiel de s’assurer que les chemins d’acc\u00e8s aux fichiers import<\/code> sont valides et que vous utilisez la syntaxe import<\/code> correcte.<\/p>\n
En outre, vous pouvez consulter des sites tels que Can I Use<\/a> pour v\u00e9rifier la compatibilit\u00e9 des navigateurs avec les modules ES.<\/p>\n
Enfin, \u00e9tant donn\u00e9 que l’utilisation de l’extension de fichier .js<\/strong> est une pratique courante, vous pouvez d\u00e9finir l’attribut type<\/code> dans la balise script<\/code> du fichier HTML du module comme solution de contournement. En attribuant la valeur module<\/code> \u00e0 cet attribut, vous indiquez au navigateur de ne pas tenir compte de l’extension .js<\/strong> et de traiter le fichier comme un module.<\/p>\n
R\u00e9sum\u00e9<\/h2>\n
L’erreur \u00ab Cannot use import statement outside a module \u00bb peut appara\u00eetre pour diverses raisons, selon que vous vous trouvez dans un environnement JavaScript c\u00f4t\u00e9 navigateur ou c\u00f4t\u00e9 serveur. Une syntaxe incorrecte, des configurations inad\u00e9quates et des extensions de fichiers non prises en charge sont quelques-unes des sources les plus courantes de cette erreur.<\/p>\n
Bien que la plupart des navigateurs modernes prennent en charge les modules ES, vous devez vous assurer que les navigateurs plus anciens sont compatibles. Les bundlers comme Webpack vous permettent de compiler tout le code source avec ses d\u00e9pendances en une sortie unique que les navigateurs plus anciens peuvent comprendre.<\/p>\n
N’oubliez pas d’ajouter l’attribut type=\"module\"<\/code> dans le fichier HTML pour informer le navigateur que le module est un module ES. Enfin, bien que l’utilisation de l’extension .js<\/strong> pour CommonJS soit la pratique par d\u00e9faut, vous pouvez utiliser l’extension .mjs<\/strong> pour permettre l’importation de modules ES.<\/p>\n
Vous avez une application JavaScript \u00e0 mettre en ligne, mais vous ne voulez pas g\u00e9rer les serveurs vous-m\u00eame ? Les plateformes d’h\u00e9bergement d’applications<\/a> et de bases de donn\u00e9es<\/a> de Kinsta pourraient \u00eatre la solution. Vous pouvez m\u00eame combiner ces services avec l’h\u00e9bergement de sites statiques<\/a> de Kinsta pour que la partie frontend de votre application soit servie gratuitement.<\/p>\n","protected":false},"excerpt":{"rendered":"
Le message d’erreur \u00ab\u00a0Cannot use import statement outside a module\u00a0\u00bb se produit lorsque le mot-cl\u00e9 import est rencontr\u00e9 dans un module JavaScript ou TypeScript mal configur\u00e9. …<\/p>\n","protected":false},"author":259,"featured_media":74264,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[978,994],"class_list":["post-74263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erreurs-javascript","topic-node-js"],"yoast_head":"\nR\u00e9solu : Erreur Cannot Use Import Statement Outside a Module - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module\" \/>\n<meta property=\"og:description\" content=\"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/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\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-20T15:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:42:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/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=\"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module\",\"datePublished\":\"2023-11-20T15:54:00+00:00\",\"dateModified\":\"2025-10-01T19:42:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\"},\"wordCount\":1593,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\",\"name\":\"R\u00e9solu : Erreur Cannot Use Import Statement Outside a Module - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"datePublished\":\"2023-11-20T15:54:00+00:00\",\"dateModified\":\"2025-10-01T19:42:26+00:00\",\"description\":\"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png\",\"width\":1999,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erreurs Javascript\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/erreurs-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/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:\/\/kinqsta.com\/fr\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"R\u00e9solu : Erreur Cannot Use Import Statement Outside a Module - Kinsta\u00ae","description":"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.","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:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/","og_locale":"fr_FR","og_type":"article","og_title":"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module","og_description":"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-11-20T15:54:00+00:00","article_modified_time":"2025-10-01T19:42:26+00:00","og_image":[{"width":1999,"height":1000,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Steve Bonisteel","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module","datePublished":"2023-11-20T15:54:00+00:00","dateModified":"2025-10-01T19:42:26+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/"},"wordCount":1593,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/","url":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/","name":"R\u00e9solu : Erreur Cannot Use Import Statement Outside a Module - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","datePublished":"2023-11-20T15:54:00+00:00","dateModified":"2025-10-01T19:42:26+00:00","description":"L'erreur JavaScript \u00ab Cannot use import statement outside a module \u00bb peut se manifester de diff\u00e9rentes mani\u00e8res. Voici comment la corriger.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/cannot-use-import-statement-outside-module.png","width":1999,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/cannot-use-import-statement-outside-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Erreurs Javascript","item":"https:\/\/kinqsta.com\/fr\/sujets\/erreurs-javascript\/"},{"@type":"ListItem","position":3,"name":"R\u00e9solu : erreur Cannot Use Import Statement Outside a Module"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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:\/\/kinqsta.com\/fr\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/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:\/\/kinqsta.com\/fr\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/74263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=74263"}],"version-history":[{"count":6,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/74263\/revisions"}],"predecessor-version":[{"id":74271,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/74263\/revisions\/74271"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/translations\/es"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74263\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/74264"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=74263"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=74263"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=74263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}