Cannot import axios into razzle project using Typescript

❓Question

I’m using Typescript and I am wanting to import axios.

Whenever I add an import, the build process complains about a TypeError inside the process/browser.js module.

I am struggling to make sense of this. If anyone is able to assist on where to start, should I look into the Babel project itself for the type definition?

Or abandon using Axios all together (highly undesired)

Thank you in advance.

[
  './node_modules/process/browser.js\n' +
    'Module build failed (from ./node_modules/razzle/config/babel-loader/razzle-babel-loader.js):\n' +
    'TypeError: /Volumes/code/name-of-project/node_modules/process/browser.js: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "BooleanLiteral"\n' +
    '    at Object.validate (/Volumes/code/name-of-project/node_modules/@babel/types/lib/definitions/utils.js:130:11)\n' +
    '    at validateField (/Volumes/code/name-of-project/node_modules/@babel/types/lib/validators/validate.js:24:9)\n' +
    '    at validate (/Volumes/code/name-of-project/node_modules/@babel/types/lib/validators/validate.js:17:3)\n' +
    '    at NodePath._replaceWith (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/path/replacement.js:170:5)\n' +
    '    at NodePath.replaceWith (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/path/replacement.js:152:8)\n' +
    '    at replaceAndEvaluateNode (/Volumes/code/name-of-project/node_modules/babel-plugin-transform-define/lib/index.js:37:12)\n' +
    '    at processNode (/Volumes/code/name-of-project/node_modules/babel-plugin-transform-define/lib/index.js:62:5)\n' +
    '    at PluginPass.MemberExpression (/Volumes/code/name-of-project/node_modules/babel-plugin-transform-define/lib/index.js:99:9)\n' +
    '    at newFn (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/visitors.js:177:21)\n' +
    '    at NodePath._call (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/path/context.js:53:20)\n' +
    '    at NodePath.call (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/path/context.js:40:17)\n' +
    '    at NodePath.visit (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/path/context.js:90:31)\n' +
    '    at TraversalContext.visitQueue (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/context.js:103:16)\n' +
    '    at TraversalContext.visitSingle (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/context.js:77:19)\n' +
    '    at TraversalContext.visit (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/context.js:131:19)\n' +
    '    at Function.traverse.node (/Volumes/code/name-of-project/node_modules/@babel/traverse/lib/index.js:82:17)\n' +
    ' @ ./node_modules/axios/lib/defaults.js 1:0-37\n' +
    ' @ ./node_modules/axios/lib/axios.js\n' +
    ' @ ./node_modules/axios/index.js\n' +
    ' @ ./src/web/func/GetDataFromAPI.ts\n' +
    ' @ ./src/web/page/Home.tsx\n' +
    ' @ ./src/web/layout/App.tsx\n' +
    ' @ ./src/web/entry/app.ts'
]

[fivethreeo]

I wish next.js babel loader and babel preset was its own packages then razzle could just use those.

[lyndonbuckley]

Closing this issue.

I ended up ignoring the process module in babel by adding the following modifyWebpackConfig callback

module.exports = ({options: {webpackOptions}, paths}) => {
    if (webpackOptions.babelRule)
        webpackOptions.babelRule.exclude = [`${paths.appNodeModules}/process`];
    return webpackOptions;
}