[英]Javascript code gets "Attempted import error:" in react-scripts build when importing from Typescript file
Getting an error with react-scripts V2.1.3. react-scripts V2.1.3 出现错误。 We are just migrated to this from V1.x.我们刚刚从 V1.x 迁移到这个。 This all worked well previous to the react-scripts upgrade.在 react-scripts 升级之前,这一切都运行良好。
The source file (metadataAccess, doing the export) is typescript and has the following code:源文件(metadataAccess,进行导出)是 typescript 并具有以下代码:
export const NAVIGATION = 'Navigation';
The file referencing the const is Javascript as follows:引用 const 的文件是 Javascript,如下所示:
import { WIDGET_TREE, NAVIGATION, metadataScan } from './universal/metadataAccess';
...
const scanNavigation = await metadataScan(dynamoClient, NAVIGATION);
The error is:错误是:
Creating an optimized production build...
Failed to compile.
./src/App.jsx
Attempted import error: 'NAVIGATION' is not exported from './universal/metadataAccess'.
If I were to fix this error (above), I get the same problem on another const.如果我要修复这个错误(上图),我会在另一个 const 上遇到同样的问题。 Sadly, the errors are reported one at a time.可悲的是,一次报告一个错误。 I also get it on an exported enum.我也在导出的枚举中得到它。 All from Typescript files.全部来自 Typescript 文件。 I changed the extensions of the referencing files to be .tsx (from .jsx) and it makes no difference.我将引用文件的扩展名更改为 .tsx(来自 .jsx)并且没有区别。
I have searched the source code of the Typescript compile, webpack, and babel for the string "Attempted import" and not found anything, so I don't even know which code is causing this error.我在 Typescript compile、webpack 和 babel 的源代码中搜索了字符串“Attempted import”,但没有找到任何东西,所以我什至不知道是哪个代码导致了这个错误。
I also tried adding ".js" to the file name in the import statement, and the (generated) Javascript file has this line:我还尝试在导入语句的文件名中添加“.js”,并且(生成的)Javascript 文件包含以下行:
exports.NAVIGATION = 'Navigation';
It gets the same result.它得到相同的结果。 I tried changing the import statement to refer to a non-existent file, and I get a different error, so it seems to be finding the imported file.我尝试将导入语句更改为引用不存在的文件,但出现不同的错误,因此它似乎正在查找导入的文件。
Any ideas about how to get this to run?关于如何让它运行的任何想法?
Below is for react-native-web, and include the solution of "Attempted import error", maybe also helpful for you.下面是react-native-web,包括“尝试导入错误”的解决方法,也许对你也有帮助。
npm install --save-dev react-app-rewired
Create a config-overrides.js
in your project root在你的项目根目录中创建一个config-overrides.js
// used by react-app-rewired
const webpack = require('webpack');
const path = require('path');
module.exports = {
webpack: function (config, env) {
config.module.rules[1].use[0].options.baseConfig.extends = [
path.resolve('.eslintrc.js'),
];
// To let alias like 'react-native/Libraries/Components/StaticRenderer'
// take effect, must set it before alias 'react-native'
delete config.resolve.alias['react-native'];
config.resolve.alias['react-native/Libraries/Components/StaticRenderer'] =
'react-native-web/dist/vendor/react-native/StaticRenderer';
config.resolve.alias['react-native'] = path.resolve(
'web/aliases/react-native',
);
// Let's force our code to bundle using the same bundler react native does.
config.plugins.push(
new webpack.DefinePlugin({
__DEV__: env === 'development',
}),
);
// Need this rule to prevent `Attempted import error: 'SOME' is not exported from` when `react-app-rewired build`
// Need this rule to prevent `TypeError: Cannot assign to read only property 'exports' of object` when `react-app-rewired start`
config.module.rules.push({
test: /\.(js|tsx?)$/,
// You can exclude the exclude property if you don't want to keep adding individual node_modules
// just keep an eye on how it effects your build times, for this example it's negligible
// exclude: /node_modules[/\\](?!@react-navigation|react-native-gesture-handler|react-native-screens)/,
use: {
loader: 'babel-loader',
},
});
return config;
},
paths: function (paths, env) {
paths.appIndexJs = path.resolve('index.web.js');
paths.appSrc = path.resolve('.');
paths.moduleFileExtensions.push('ios.js');
return paths;
},
};
Also create a web/aliases/react-native/index.js
还要创建一个web/aliases/react-native/index.js
// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b
import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';
// And let's stub out everything that's missing!
export const ViewPropTypes = {
style: () => {},
};
RNText.propTypes = {
style: () => {},
};
RNImage.propTypes = {
style: () => {},
source: () => {},
};
export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};
Now you can just run react-app-rewired start
instead of react-scripts start
现在你可以运行react-app-rewired start
而不是react-scripts start
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.