部署React+Netlify Functions应用报Cannot use import statement错误如何解决

问题根因 #

1. 你安装的node-fetch@3.x仅支持ES Module导入语法，而Netlify Functions默认运行在CommonJS模块环境下，无法识别import语句
2. 根目录package.json的"type": "module"仅作用于项目前端代码，Netlify Functions的执行上下文是独立的，不会继承这个配置
3. 你的Function代码同时混用了ES Module的import和CommonJS的exports.handler导出语法，本身存在模块规范冲突

解决方案 #

方案1：使用CommonJS兼容版本（推荐，改造成本最低） #

• 卸载当前3.x版本的node-fetch，安装同时支持CommonJS和ES Module的2.x版本

npm uninstall node-fetch
npm install node-fetch@2

• 修改Function代码，把import改成CommonJS的require导入即可：

const fetch = require('node-fetch');

exports.handler = async function(event) {
    try{
        const {city} = event.queryStringParameters;
        const API = process.env.REACT_APP_API_KEY;

        const url= `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API}`;

        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        return { 
            statusCode: 200,
            body: JSON.stringify({data})
        }
    } catch(err) {
        console.log(err);
        return { 
            statusCode: 400,
            body: JSON.stringify({error: 'Failed fetching data'})
        }
    }
}

• 可删除根目录package.json里的"type": "module"配置，避免和React的打包逻辑冲突

方案2：开启Netlify Functions ES Module支持 #

如果需要保留node-fetch@3.x版本，可以按以下步骤调整：

• 把你的Function文件后缀从.js改成.mjs，明确标识为ES Module
• 修改Function的导出语法，把CommonJS的exports.handler改成ES Module的标准导出：

import fetch from 'node-fetch';

export const handler = async function(event) {
    try{
        const {city} = event.queryStringParameters;
        const API = process.env.REACT_APP_API_KEY;

        const url= `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API}`;

        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        return { 
            statusCode: 200,
            body: JSON.stringify({data})
        }
    } catch(err) {
        console.log(err);
        return { 
            statusCode: 400,
            body: JSON.stringify({error: 'Failed fetching data'})
        }
    }
}

• 若不想改文件后缀，也可以在Functions存放的目录下单独新增一个package.json，内容为{"type": "module"}，该配置只会作用于Function文件，不会影响前端React打包

内容的提问来源于stack exchange，提问作者user16589580