blocks|key|2603534|text|更改以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2603535|import+{+version+}+from+'../../package.json';|code-block|syntax|javascript|2603536|到某种程度上|2603537|import+packageInfo+from+'../../package.json';|2603538|然后将您的访问权限更改为|2603539|version,|2603540|或|2603541|version:+version,|2603542|至|2603543|version:+packageInfo.version,|2603544|正如注释中所指出的，可能存在不希望在客户端代码中公开整个package.json文件的情况。|offset|length|style|CODE|2603545|entityMap^0|0|0|0|0|0|0|0|0|0|0|S|C|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1E|8|@$Y|1F|Z|1G|10|11]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

Change the following
<pre><code>import { version } from '../../package.json';
</code></pre>
to something like
<pre><code>import packageInfo from '../../package.json';
</code></pre>
And then change your access from something like
<pre><code>version,
</code></pre>
or
<pre><code>version: version,
</code></pre>
to
<pre><code>version: packageInfo.version,
</code></pre>
As noted in the comments, there may be cases where you do not want to expose your entire <code>package.json</code> file in the client code.

blocks|key|1218042|text|还应该将"allowSyntheticDefaultImports":+true,添加到tsconfig.json中的编译器选项中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1218043|entityMap^0|4|11|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You should also add
<code>&quot;allowSyntheticDefaultImports&quot;: true,</code>
to the compileroptions in the tsconfig.json

blocks|key|1218091|text|我用以下方法解决了我的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218092|++++import+packageInfo+from+'./package.json';
++++
++++
++++version+=+packageInfo.version;|code-block|syntax|javascript|1218093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I solved my issue with the following:
<pre class="lang-ts prettyprint-override"><code> import packageInfo from './package.json';
 
 
 version = packageInfo.version;
</code></pre>

blocks|key|1218085|text|const+appVersion+=+require('./package.json').version;怎么样？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1218086|使用它，我们实际上并不是发布整个package.json，而是从它引入版本。|1218087|entityMap^0|0|1H|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

How about
<code>const appVersion = require('./package.json').version;</code> ?
Using this we are not actually shipping the whole package.json but just bringing in the version from it.

blocks|key|374978|text|对于最新版本的create+react+app，以下语法工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|374979|import+rData+from+'./registration-form.json';|code-block|syntax|javascript|374980|entityMap^0|7|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

With latest version of <code>create react app</code>, following syntax works:
<pre><code>import rData from './registration-form.json';
</code></pre>

blocks|key|1218169|text|表示角12+%2B，请执行以下步骤：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1218170|步骤1:我们需要在环境文件中使用require节点函数，所以我们必须向编译器选项中添加节点类型。打开tsconfig.app.json和tsconfig.spec.json文件(通常位于“src”文件夹下)，在compilerOptions+->类型下添加“节点”|CODE|1218171|...
++"compilerOptions":+{
++++"outDir":+"../out-tsc/spec",
++++"module":+"commonjs",
++++"types":+[
++++++"jasmine",
++++++"node"
++++]
++}
...|code-block|syntax|javascript|1218172|注意:请确保在“package.json”文件中包含了“@type/node”作为依赖项。|1218173|步骤2:现在打开environment.ts+(‘src\environments\environment.ts’)并创建一个属性，用于在环境变量中保存应用程序版本，如下所示(在本例中，这将是appVersion)：|1218174|export+const+environment+=+{
++appVersion:+require('../../package.json').version+%2B+'-dev',
++production:+false
};|1218175|请注意，必须从环境文件的位置计算到package.json的路径。|1218176|.version将从package.json文件中加载版本号，%2B‘-dev’将向其添加‘-dev’后缀。后缀不是必需的，但通过这种方式可以识别用于运行应用程序的女巫环境文件。|1218177|按照同样的方法，我们还必须编辑生产环境文件。最后，environment.prod.ts将如下所示：|1218178|export+const+environment+=+{
++++appVersion:+require('../../package.json').version,
++++production:+true
};|1218179|步骤3:将版本号添加到组件并在应用程序中显示。例如：|1218180|import+{Component}+from+'@angular/core';
import+{environment}+from+'../environments/environment';

@Component({
++++selector:+'app-root',
++++template:+`<h1>{{title}}</h1>
++++<h3>v{{currentApplicationVersion}}</h3>`
})
export+class+AppComponent+{
++++title+=+'Demo+application+for+version+numbering';
++++currentApplicationVersion+=+environment.appVersion;
}|1218181|entityMap^0|0|G|0|0|4|G|7|0|0|0|0|4|2O|A|0|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1G|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|H]]|D|@]|E|$]]|$1|R|3|S|5|K|7|1M|8|@]|D|@]|E|$L|M]]|$1|T|3|U|5|6|7|1N|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1O|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1P|8|@]|D|@]|E|$]]|$1|Z|3|10|5|K|7|1Q|8|@]|D|@]|E|$L|M]]|$1|11|3|12|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|13|3|14|5|K|7|1U|8|@]|D|@]|E|$L|M]]|$1|15|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|16|$]]

For Angular 12 +,
Follow this steps:
Step 1:
We need to use the <code>require</code> node function in our environment files, so we have to add node types to the compiler options. Open tsconfig.app.json and tsconfig.spec.json files (usually they are located under the ‘src’ folder), add “node” under compilerOptions -&gt; types
<pre><code>...
 &quot;compilerOptions&quot;: {
 &quot;outDir&quot;: &quot;../out-tsc/spec&quot;,
 &quot;module&quot;: &quot;commonjs&quot;,
 &quot;types&quot;: [
 &quot;jasmine&quot;,
 &quot;node&quot;
 ]
 }
...
</code></pre>
Note: Be sure to have included ‘@type/node’ as a dependency in your ‘package.json’ file.
Step 2:
Now open environment.ts (‘src\environments\environment.ts’) and create a property for holding the application version in environment variable as follows ( in our case this will be <code>appVersion</code>) :
<pre><code>export const environment = {
 appVersion: require('../../package.json').version + '-dev',
 production: false
};
</code></pre>
Be aware, the path to package.json must be calculated from the environment file’s location.
The require(‘../../package.json’).version will load the version number from the package.json file and + ‘-dev’ will add the ‘-dev’ suffix to it. The suffix isn’t a must, but this way you can identify witch environment file is used for running your application
Following the same approach we have to edit the production environment file as well. In the end the environment.prod.ts will look like this:
<pre><code>export const environment = {
 appVersion: require('../../package.json').version,
 production: true
};
</code></pre>
Step 3:
Add version number to a component and show it in the application. For example:
<pre><code>import {Component} from '@angular/core';
import {environment} from '../environments/environment';

@Component({
 selector: 'app-root',
 template: `&lt;h1&gt;{{title}}&lt;/h1&gt;
 &lt;h3&gt;v{{currentApplicationVersion}}&lt;/h3&gt;`
})
export class AppComponent {
 title = 'Demo application for version numbering';
 currentApplicationVersion = environment.appVersion;
}
</code></pre>

blocks|key|2603789|text|我就是这样解决这个问题的(其余的答案对我没有用)。从这里找到解决方案，https://www.angularfix.com/2021/10/error-should-not-import-named-export.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2603790|第一步|2603791|将以下内容添加到ts.config文件中|style|CODE|2603792|"resolveJsonModule":+true,
"esModuleInterop":+true,|code-block|syntax|javascript|2603793|(将它们添加到“编译器选项”块的末尾)|2603794|++"compilerOptions":+{
++++//+
++++"resolveJsonModule":+true,
++++"allowSyntheticDefaultImports":+true
++},|2603795|第二步|2603796|使用以下语法导入所需的文件。当然，将文件名更改为您的文件名。|2603797|import+{default+as+data}+from+'../../package.json';|2603798|第三步|2603799|现在可以通过以下语法访问变量|2603800|data.variable_name|2603801|这基本上就是我的文件的样子，它成功地编译了。|2603802|import+{default+as+authInfo}+from+'../../auth_config.json';

export+const+environment+=+{
++//+
++domain:+authInfo.domain,
++clientId:+authInfo.clientId
};|2603803|entityMap|0|LINK|mutability|MUTABLE|url|https://www.angularfix.com/2021/10/error-should-not-import-named-export.html^0|Z|24|0|0|0|8|9|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|D|3|E|5|6|7|1K|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1L|8|@$A|1M|B|1N|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1O|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1P|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1Q|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1R|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1S|8|@]|9|@]|C|$]]|$1|W|3|X|5|L|7|1T|8|@]|9|@]|C|$M|N]]|$1|Y|3|Z|5|6|7|1U|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1V|8|@]|9|@]|C|$]]|$1|12|3|13|5|L|7|1W|8|@]|9|@]|C|$M|N]]|$1|14|3|15|5|6|7|1X|8|@]|9|@]|C|$]]|$1|16|3|17|5|L|7|1Y|8|@]|9|@]|C|$M|N]]|$1|18|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]]|19|$1A|$5|1B|1C|1D|C|$1E|1F]]]]

This is how I have solved the issue (the rest of the answers didn't work for me). Solution found from here <a href="https://www.angularfix.com/2021/10/error-should-not-import-named-export.html" rel="nofollow noreferrer">https://www.angularfix.com/2021/10/error-should-not-import-named-export.html</a>
<h2>Step 1</h2>
add the following to your <code>ts.config</code> file
<pre><code>&quot;resolveJsonModule&quot;: true,
&quot;esModuleInterop&quot;: true,
</code></pre>
(add them at the end of your &quot;compileroptions&quot; block)
<pre><code> &quot;compilerOptions&quot;: {
 // 
 &quot;resolveJsonModule&quot;: true,
 &quot;allowSyntheticDefaultImports&quot;: true
 },
</code></pre>
<h2>Step 2</h2>
Import the file you want using the following syntax. Of course change the name of the file to your file name.
<pre><code>import {default as data} from '../../package.json';
</code></pre>
<h2>Step 3</h2>
You can now access your variables via this syntax
<pre><code>data.variable_name
</code></pre>
This is basically what my file looks like, it compiles successfully
<pre><code>import {default as authInfo} from '../../auth_config.json';

export const environment = {
 // 
 domain: authInfo.domain,
 clientId: authInfo.clientId
};
</code></pre>

blocks|key|2603708|text|作为进一步的参考，这并不是只发生在package.json上，在更新webpack+v5之后，我在@atlaskit的包中遇到了同样的问题，并找到了很好的解释并修复了那里|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2603709|您可以直接将JSON文件导入Javascript文件。这一点得到节点和Webpack的支持。在Webpack的旧版本中，可以导入表示整个JSON+blob的默认导出，也可以导入JSON文件中每个顶级属性的命名导出。从Webpack+5开始，就不再推荐指定的导出，这反映了节点的行为。|blockquote|2603710|要在webpack配置中使用，请执行以下操作：|2603711|ignoreWarnings:+[
/only+default+export+is+available+soon/,
],|code-block|syntax|javascript|2603712|entityMap|0|LINK|mutability|MUTABLE|url|https://%2520https://community.developer.atlassian.com/t/error-should-not-import-the-named-export-in-editor-core/54982/5^0|2B|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|11|8|@]|9|@]|C|$L|M]]|$1|N|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

Just for further reference this does not happen with just the package.json
I had the same problem with packages from the @atlaskit after an update to webpack v5 and found good explanation and fix <a href="https://%20https://community.developer.atlassian.com/t/error-should-not-import-the-named-export-in-editor-core/54982/5" rel="nofollow noreferrer">there</a>:
<blockquote>
You can import JSON files directly into Javascript files. This is supported by node and by Webpack. In older versions of Webpack you could import either the default export which represents the whole JSON blob or a named export for each top level property in the JSON file.
</blockquote>
<blockquote>
As of Webpack 5 the named export is deprecated which mirrors the behaviour of node.
</blockquote>
To work around use in webpack config:
<pre><code>ignoreWarnings: [
/only default export is available soon/,
],
</code></pre>

blocks|key|1218050|text|我认为您应该只更改以下导入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218051|import+{+version+}+from+'../../package.json';|code-block|syntax|javascript|1218052|与下列进口：|1218053|import+version+from+'../../package.json';|1218054|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I think you should only change the following import:
<pre><code>import { version } from '../../package.json';
</code></pre>
with the following import:
<pre><code>import version from '../../package.json';
</code></pre>

I have an ejected create-react-app project. I am getting this error after updating it to webpack 5. It was working fine with webpack v4.41.5
OS: MacOS Catalina 10.15.7 
node: v10.23.0
<blockquote>
Error: Should not import the named export 'version' (imported as
'version') from default-exporting module (only default export is
available soon).
</blockquote>

Error: Should not import the named export 'version' (imported as 'version')

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个弹出的创建-反应-应用项目。更新到webpack 5之后，我得到了这个错误。它在webpack v4.41.5中运行得很好操作系统: MacOS Catalina 10.15.7节点: v10.23.0错误:不应该从默认导出模块导入命名的导出“版本”(导入为“版本”)(只有默认导出很快可用)。

问错误:不应导入命名的导出“版本”(导入为“版本”)
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问错误:不应导入命名的导出“版本”(导入为“版本”)EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问错误:不应导入命名的导出“版本”(导入为“版本”)
EN