There are issues for two specific scenarios in this issue, so let's tackle them one-by-one. First would recommend ensuring that you have the latest version of the Yeoman templates by executing npm install -g @microsoft/generator-sharepoint, which will update your Yeoman package for the tutorial work.
Issues around the Document Card tutorial
As Vipul Kelkar mentioned in his 2nd paragraph, you can perfectly use that development stack with SharePoint 2013. You can use whatever front-end framework you like. However, you cannot use the SPFx template. You need to build your own react / typescript / webpack configuration and a way to deploy your code.
In the end the toolstack just builds you a ...
SharePoint framework works only on SharePoint online and SharePoint 2016 on-premise : https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
Having said that, you can still write typescript code, bundle it and use as client side code in your 2013 on premise env also : https://sii.pl/blog/creating-sharepoint-solutions-with-...
you can add the jsChart to the devDependencies in package.json and also keep it in the external dependency configuration. Doing that the tests will run and in the same time the jsChart would not be bundled with the packages, but the packages will use your external dependency. Hope that clears your ask.
Ok... I figure out the error. on my externals I need to refer to react as in:
Also import react in every component that uses it. now it works and uses the current webpack bundle from sharepoint to import react.
import * as React from 'react';
You are not able to modify the actual webpack configuration file that is provided ootb by the spfx tools.
But they have made it possible to add your own loaders. Take a look at this post by the spfx team. Extending Webpack
Unfortunately the thing you want to do is not possible as i understand it. As the question you are refering to states that this ...
Insert 2 lines to your gulpfile.js
const path = require('path');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
This solution solves the problem for me:
remove everything regarding jquery and "jquery.typeahead" from config.json
require "jquery.typehead" from "node_modules" directly
The require looks like this:
Webpack will resolve this correctly to the js file located in the node_modules directory of your project.
Here's what I got from a member of the team when I posed this to them:
One thing that surprises me is that he is putting both dependencies as ‘jQuery’ global name, which is confusing, and looks like the issue could be somewhere there.
jquery-typeahead modifies the jquery object and returns a different thing. In his code I see he’s using the output of ...