Does Netlify not support a Webpack + React + Typescript stack? In my package.json, I have “ts-loader” and “typescript” listed as devDependencies, and run “npm i” before my build. However, I never see “ts-loader” or “typescript” installs show up in the logs, and when it comes time for webpack to build my React site, it complains:
“Module parse failed: The keyword ‘interface’ is reserved (4:0)”
“You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.”
My guess is because “ts-loader” isn’t actually installed.
Any help here? Seems odd such a common stack wouldn’t work out-of-the-box. I’m using NODE_ENV=development and see other devDependencies getting installed, just not the typescript-related ones. Also, this works fine locally.
Have you tried adding these to as dependencies rather than devDependencies? You shouldn’t need to run npm i as dependencies are installed as per your package.json. As per docs
Before running your build command, the buildbot will look for instructions about required languages and software needed to run your command.
Set your build command as npm run build (or whatever it is for your specific project) and away you go.
No luck so far. Maybe my deployment setup is a little off the beaten path of what Netlify expects. I have a “server”, “app”, and “lib” folder in a monorepo–all of which are npm packages. Server is the express server, and the real entry point for everything. I tried including ts-loader here, but that didn’t help. Lib is a component library, which is one of the things that needs ts-loader and fails. App is the React app, which also requires ts-loader (but the build fails before getting here).
So my build script (from “server”) runs build for lib, then “app” installs “lib”, and builds. Then the output of that is consumed by “server”.
I’m guessing having multiple package.json files might be throwing things off. But I didn’t create a package.json at the root and included “ts-loader” and “typescript” in it, but still ran into the same webpack/typescript issues.
Thanks again @coelmay – that put me on the right path.
For future Googlers, my steps to get it working:
Simplified my dependencies to be proper npm modules using Github Packages
Added a .npmrc file to my app and committed it, but used an environment variable NPM_TOKEN to reference the personal access token created for Github Packages (per these forum posts)
Added a _redirects file in the public folder to handle React Routing per the docs.
Got rid of the Express.js server and everything works as expected, now.